@veltdev/react 1.0.96 → 1.0.98

package/cjs/types/components/Snippyly/Snippyly.stories.d.ts

@@ -1,5 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 declare const _default: ComponentMeta<React.FC<import("./Snippyly").IVeltProps>>;
 export default _default;
-export declare const Snippyly1: ComponentStory<React.FC<import("./Snippyly").IVeltProps>>;
+export declare const Snippyly1: any;

package/cjs/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IVeltNivoChartCommentsProps {
+    props?: any;
+}
+declare const VeltNivoChartComments: React.FC<IVeltNivoChartCommentsProps>;
+export default VeltNivoChartComments;

package/cjs/types/components/VeltNivoChartComments/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./VeltNivoChartComments";

package/cjs/types/components/index.d.ts

@@ -25,3 +25,4 @@ export { default as VeltCommentThread } from "./VeltCommentThread";
 export { default as VeltNotificationsTool } from "./VeltNotificationsTool";
 export { default as VeltNotificationsPanel } from "./VeltNotificationsPanel";
 export { default as VeltNotificationsHistoryPanel } from "./VeltNotificationsHistoryPanel";
+export { default as VeltNivoChartComments } from "./VeltNivoChartComments";

package/cjs/types/redux/veltLiveStateSynceMiddleware.d.ts

@@ -4,5 +4,8 @@ declare type LiveStateMiddlewareConfig = {
     allowAction?: (action: any) => boolean;
     liveStateDataId?: string;
 };
-export declare const createLiveStateMiddleware: (config?: LiveStateMiddlewareConfig) => (store: any) => (next: any) => (action: any) => any;
+export declare const createLiveStateMiddleware: (config?: LiveStateMiddlewareConfig) => {
+    middleware: (store: any) => (next: any) => (action: any) => any;
+    updateLiveStateDataId: (newId?: string) => void;
+};
 export {};

package/esm/index.js

@@ -495,6 +495,73 @@ var VeltNotificationsHistoryPanel = function (props) {
     return (React.createElement("velt-notifications-history-panel", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
 
+var VeltNivoChartComments = function (_a) {
+    var _b, _c, _d;
+    var props = _a.props;
+    var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
+        return {
+            x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
+            y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
+        };
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("foreignObject", null,
+            React.createElement("style", null, "\n                        .nivo-chart-comment-point {\n                            opacity: 0 !important;\n                            visibility: hidden !important;\n                          }\n                          \n                          .nivo-chart-comment-tool {\n                            opacity: 0;\n                          }\n                          \n                          .nivo-chart-comment-tool:hover {\n                            opacity: 1;\n                            visibility: visible;\n                            transition: 0.3s;\n                          }\n                          \n                          .nivo-chart-comment-container {\n                            position: relative;\n                            display: flex;\n                            flex-direction: column;\n                            align-items: center;\n                            /* justify-content: center; */\n                            width: 100%;\n                            height: 100%;\n                          }\n                          \n                          .nivo-chart-comment-container velt-comment-tool {\n                            display: flex;\n                            cursor: pointer;\n                          }\n                          \n                          .nivo-chart-container snippyly-comment-pin-portal {\n                              /* hide it */\n                              display: none;\n                          }\n                    ")),
+        ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
+            var _a, _b;
+            var targetCommentElementId = "".concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x, "-").concat((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y);
+            return (React.createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
+                React.createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
+                    React.createElement("div", { className: 'nivo-chart-comment-container' },
+                        React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React.createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React.createElement("div", { slot: 'button' },
+                                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React.createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React.createElement("div", { slot: 'content' },
+                                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: point.serieColor, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React.createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        }),
+        ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
+            var _a, _b;
+            var targetCommentElementId = "".concat(point === null || point === void 0 ? void 0 : point.key, "-").concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.value);
+            return (React.createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
+                React.createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
+                    React.createElement("div", { className: 'nivo-chart-comment-container' },
+                        React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React.createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React.createElement("div", { slot: 'button' },
+                                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React.createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React.createElement("div", { slot: 'content' },
+                                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.fill) || point.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React.createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        }),
+        ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
+            var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
+            var radiusOffset = 20; // Extend beyond the outer radius for visibility
+            var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
+            var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
+            return (React.createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
+                React.createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
+                    React.createElement("div", { className: 'nivo-chart-comment-container' },
+                        React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React.createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React.createElement("div", { slot: 'button' },
+                                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React.createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React.createElement("div", { slot: 'content' },
+                                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: (arcData === null || arcData === void 0 ? void 0 : arcData.fill) || arcData.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React.createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        })));
+};
+
 /**
  * @beta This hook is in beta
  */
@@ -1070,28 +1137,39 @@ var createLiveStateMiddleware = function (config) {
     if (!liveStateDataId) {
         liveStateDataId = VELT_DEFAULT_LIVE_STATE_ID;
     }
-    return function (store) {
-        var isSdkInitialized = false;
-        var getDataSubscriptionSet = false;
-        var setupGetDataSubscription = function () {
-            var _a;
-            if (!getDataSubscriptionSet) {
-                getDataSubscriptionSet = true;
-                var liveStateSyncElement = (_a = window.Velt) === null || _a === void 0 ? void 0 : _a.getLiveStateSyncElement();
-                liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (data) {
-                    // Dispatch action to update local state, marking it as remote
-                    if (data) {
-                        var sessionId_1 = getSessionId();
-                        if (data.id === sessionId_1) {
-                            return;
-                        }
-                        else {
-                            store.dispatch(__assign(__assign({}, data.action), { isRemote: true }));
-                        }
+    var internalStore; // This variable will hold the reference to the store
+    var dataSubscription; // This variable will hold the reference to the data subscription
+    var isSdkInitialized = false;
+    var setupGetDataSubscription = function () {
+        var _a, _b;
+        if (!dataSubscription && window.Velt && ((_a = window.Velt) === null || _a === void 0 ? void 0 : _a.getLiveStateSyncElement)) {
+            var liveStateSyncElement = (_b = window.Velt) === null || _b === void 0 ? void 0 : _b.getLiveStateSyncElement();
+            dataSubscription = liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (data) {
+                // Dispatch action to update local state, marking it as remote
+                if (data) {
+                    var sessionId_1 = getSessionId();
+                    if (data.id === sessionId_1) {
+                        return;
                     }
-                });
-            }
-        };
+                    else {
+                        internalStore === null || internalStore === void 0 ? void 0 : internalStore.dispatch(__assign(__assign({}, data.action), { isRemote: true }));
+                    }
+                }
+            });
+        }
+    };
+    var updateLiveStateDataId = function (newId) {
+        liveStateDataId = newId || VELT_DEFAULT_LIVE_STATE_ID;
+        if (dataSubscription) {
+            dataSubscription.unsubscribe();
+            dataSubscription = null;
+        }
+        if (isSdkInitialized) {
+            setupGetDataSubscription();
+        }
+    };
+    var middleware = function (store) {
+        internalStore = store;
         var veltSdkInitializedListener = function () {
             isSdkInitialized = true;
             setupGetDataSubscription();
@@ -1110,6 +1188,10 @@ var createLiveStateMiddleware = function (config) {
             return result;
         }; };
     };
+    return {
+        middleware: middleware,
+        updateLiveStateDataId: updateLiveStateDataId,
+    };
 };
 var logLiveState = function (action, liveStateDataId) {
     var _a;
@@ -1129,5 +1211,5 @@ var logLiveState = function (action, liveStateDataId) {
     }
 };
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, VeltViewAnalytics, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUserEditorState, useVeltClient, useViewsUtils };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, VeltViewAnalytics, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUserEditorState, useVeltClient, useViewsUtils };
 //# sourceMappingURL=index.js.map