@odigos/ui-kit 0.0.48 → 0.0.50

package/lib/{useTransition-DanOnTji.js → useTransition-DmHfJSEP.js}

@@ -1,6 +1,6 @@
+import { g as useModalStore, c as useDrawerStore, u as useActiveNodeStore } from './index-BC03UmY5.js';
+import { AddNodeTypes, EntityTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { g as useNotificationStore } from './index-Bw7RE2T2.js';
-import { CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import styled from 'styled-components';
 
 const useGenericForm = (initialFormData) => {
@@ -12,6 +12,7 @@ const useGenericForm = (initialFormData) => {
     }
     const [formData, setFormData] = useState(copyInitial());
     const [formErrors, setFormErrors] = useState({});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleFormChange = (key, val, obj) => {
         if (key) {
             // this is for cases where the form contains objects such as "exportedSignals",
@@ -60,6 +61,42 @@ const useGenericForm = (initialFormData) => {
     };
 };
 
+const useClickNode = () => {
+    const { setCurrentModal } = useModalStore();
+    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const { setActiveNodeType, setActiveNodeId } = useActiveNodeStore();
+    const onClickNode = (_, object) => {
+        const { id: nodeId, type: nodeType, data: { id: entityId, type: entityType }, } = object;
+        setActiveNodeType(nodeType);
+        setActiveNodeId(nodeId);
+        switch (entityType) {
+            case EntityTypes.Source:
+            case EntityTypes.Destination:
+            case EntityTypes.Action:
+            case EntityTypes.InstrumentationRule:
+                setDrawerType(entityType);
+                setDrawerEntityId(entityId);
+                break;
+            case AddNodeTypes.AddSource:
+                setCurrentModal(EntityTypes.Source);
+                break;
+            case AddNodeTypes.AddDestination:
+                setCurrentModal(EntityTypes.Destination);
+                break;
+            case AddNodeTypes.AddAction:
+                setCurrentModal(EntityTypes.Action);
+                break;
+            case AddNodeTypes.AddRule:
+                setCurrentModal(EntityTypes.InstrumentationRule);
+                break;
+            default:
+                console.warn('Unhandled node click', object);
+                break;
+        }
+    };
+    return { onClickNode };
+};
+
 const useContainerSize = () => {
     const ref = useRef(null);
     const [width, setWidth] = useState(0);
@@ -148,13 +185,11 @@ const INITIAL = {
     },
 };
 const useInstrumentationRuleFormData = () => {
-    const { addNotification } = useNotificationStore();
     const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
+    const validateForm = () => {
+        // We don't have any specific validations for this form yet
+        handleErrorChange(undefined, undefined, {});
+        return true;
     };
     const loadFormWithDrawerItem = ({ ruleName, notes, disabled, payloadCollection, codeAttributes, headersCollection, customInstrumentations }) => {
         const updatedData = {
@@ -241,6 +276,35 @@ const useOnClickOutside = (ref, handler) => {
     }, [ref, handler]);
 };
 
+const usePopup = ({ defaultClientHeight = 0, defaultClientwidth = 0, onClickOutside } = {}) => {
+    const popupRef = useRef(null);
+    const [popupOpen, setPopupOpen] = useState(false);
+    const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
+    useOnClickOutside(popupRef, () => {
+        if (popupOpen) {
+            setPopupOpen(false);
+            onClickOutside?.();
+        }
+    });
+    const handlePosition = (clientX, clientY) => {
+        const { innerWidth, innerHeight } = window;
+        let top = clientY;
+        let left = clientX;
+        if (top >= innerHeight / 2)
+            top += -(popupRef.current?.clientHeight || defaultClientHeight);
+        if (left >= innerWidth / 2)
+            left += -(popupRef.current?.clientWidth || defaultClientwidth);
+        setPopupPosition({ top, left });
+    };
+    return {
+        popupRef,
+        popupOpen,
+        setPopupOpen,
+        popupPosition,
+        handlePosition,
+    };
+};
+
 // Fallback locale.
 // (when not a single one of the supplied "preferred" locales is available)
 var defaultLocale$1 = 'en'; // For all locales added
@@ -3487,7 +3551,9 @@ const useTransition = ({ container, animateIn, animateOut, duration = 300 }) =>
   `;
     // !! Do not deprecate this "useCallback" hook, it is necessary for the transition to work properly
     const Transition = useCallback(({ children, enter, ...props }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         const [mounted, setMounted] = useState(false);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             const t = setTimeout(() => setMounted(enter), duration + 50); // +50ms to ensure the animation is finished
             return () => clearTimeout(t);
@@ -3501,4 +3567,4 @@ const useTransition = ({ container, animateIn, animateOut, duration = 300 }) =>
     return Transition;
 };
 
-export { useCopy as a, useGenericForm as b, useInstrumentationRuleFormData as c, useKeyDown as d, useOnClickOutside as e, useTimeAgo as f, useTransition as g, useContainerSize as u };
+export { useContainerSize as a, useCopy as b, useGenericForm as c, useInstrumentationRuleFormData as d, useKeyDown as e, useOnClickOutside as f, usePopup as g, useTimeAgo as h, useTransition as i, useClickNode as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -10,7 +10,8 @@
     "dev": "storybook dev -p 6006",
     "prebuild": "rm -rf lib",
     "build": "rollup -c --bundleConfigAsCjs",
-    "watch": "rollup -c --bundleConfigAsCjs -w"
+    "watch": "rollup -c --bundleConfigAsCjs -w",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "release": {
     "branches": [

package/lib/containers/data-flow/nodes/skeleton-node.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { NodeTypes } from '@/types';
-import { type Node, type NodeProps } from '@xyflow/react';
-export interface SkeletonNodeProps extends NodeProps<Node<{
-    nodeWidth: number;
-}, NodeTypes.Skeleton>> {
-}
-export declare const SkeletonNode: React.FC<SkeletonNodeProps>;

package/lib/containers/data-flow-actions-menu/search/recent-searches/index.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RecentSearches: () => React.JSX.Element;