@odigos/ui-kit 0.0.49 → 0.0.50

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.0.50](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.49...ui-kit-v0.0.50) (2025-07-10)
+
+
+### Features
+
+* add AvatarIcon & UserGroupIcon, update UserIcon ([#214](https://github.com/odigos-io/ui-kit/issues/214)) ([755e660](https://github.com/odigos-io/ui-kit/commit/755e6601cfa90a8fd8ca9cedddcb33d88883b86d))
+* add DataFinger component ([#212](https://github.com/odigos-io/ui-kit/issues/212)) ([d0f328d](https://github.com/odigos-io/ui-kit/commit/d0f328dd486b0ac0437b1921d88482ddc622c77d))
+* add Tag component ([#213](https://github.com/odigos-io/ui-kit/issues/213)) ([700031e](https://github.com/odigos-io/ui-kit/commit/700031ef09c824377c6f31d5fc207244cb51952b))
+* refactor DataCardFields ([#211](https://github.com/odigos-io/ui-kit/issues/211)) ([9f446b3](https://github.com/odigos-io/ui-kit/commit/9f446b36dac4e008c79eba4ee2177f44b2743fef))
+* refactor popups to be re-used ([#215](https://github.com/odigos-io/ui-kit/issues/215)) ([18e671e](https://github.com/odigos-io/ui-kit/commit/18e671e73b999f35e0ee4fc9e189a0194dcfde01))
+* service map edits ([#216](https://github.com/odigos-io/ui-kit/issues/216)) ([eaa1526](https://github.com/odigos-io/ui-kit/commit/eaa15269ffb562e70ab8e6156c395187f1e121a8))
+
 ## [0.0.49](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.48...ui-kit-v0.0.49) (2025-07-01)
 
 

package/lib/components/data-card/data-card-fields/index.d.ts

@@ -8,17 +8,13 @@ declare enum DataCardFieldTypes {
     Divider = "divider",
     Monitors = "monitors",
     CopyText = "copy-text",
-    DescribeRow = "describe-row",
-    ActiveStatus = "active-status",
-    PodContainer = "pod-container",
-    SourceContainer = "source-container"
+    ActiveStatus = "active-status"
 }
 interface DataCardField {
     type?: DataCardFieldTypes;
     title?: string;
     tooltip?: string;
     value?: string | AnyObj;
-    callback?: (payload: any) => void | Promise<void>;
 }
 interface DataCardFieldsProps {
     data?: DataCardField[];

package/lib/components/data-card/data-card.stories.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { StoryObj } from '@storybook/react-webpack5';
 import { type DataCardProps } from '.';
+import { StoryObj } from '@storybook/react-webpack5';
 declare const _default: {
     title: string;
     component: React.FC<DataCardProps>;
 };
 export default _default;
-export declare const Containers: StoryObj<DataCardProps>;
-export declare const FromChildren: StoryObj<DataCardProps>;
-export declare const DescribePod: StoryObj<DataCardProps>;
+export declare const MixedCard: StoryObj<DataCardProps>;
+export declare const SourceContainers: StoryObj<DataCardProps>;
+export declare const SourceDescribe: StoryObj<DataCardProps>;

package/lib/components/data-finger/data-finger.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type DataFingerProps } from '.';
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const _default: {
+    title: string;
+    component: React.FC<DataFingerProps>;
+};
+export default _default;
+export declare const Default: StoryObj<DataFingerProps>;

package/lib/components/data-finger/index.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from 'react';
+import type { SVG } from '@/types';
+interface DataFingerProps {
+    title?: string;
+    subTitle?: string;
+    icons?: SVG[];
+    iconSrcs?: string[];
+    onClick?: () => void;
+    renderActions?: () => ReactNode;
+}
+declare const DataFinger: FC<DataFingerProps>;
+export { DataFinger, type DataFingerProps };

package/lib/components/icon-button/index.d.ts

@@ -5,6 +5,8 @@ interface IconButtonProps extends PropsWithChildren {
     size?: number;
     withPing?: boolean;
     pingColor?: CSSProperties['backgroundColor'];
+    withBorder?: boolean;
+    backgroundColor?: CSSProperties['backgroundColor'];
 }
 declare const IconButton: FC<IconButtonProps>;
 export { IconButton, type IconButtonProps };

package/lib/components/index.d.ts

@@ -6,8 +6,10 @@ export * from './checkbox/index';
 export * from './code/index';
 export * from './condition-details/index';
 export * from './data-card/index';
+export * from './data-finger/index';
 export * from './data-tab/index';
 export * from './delete-warning/index';
+export * from './describe-row/index';
 export * from './divider/index';
 export * from './docs-button/index';
 export * from './drawer/index';
@@ -35,6 +37,8 @@ export * from './monitors-icons/index';
 export * from './navigation-buttons/index';
 export * from './no-data-found/index';
 export * from './notification-note/index';
+export * from './popup/index';
+export * from './popup-form/index';
 export * from './scroll-x/index';
 export * from './section-title/index';
 export * from './segment/index';
@@ -42,6 +46,7 @@ export * from './selection-button/index';
 export * from './skeleton-loader/index';
 export * from './status/index';
 export * from './stepper/index';
+export * from './tag/index';
 export * from './text/index';
 export * from './textarea/index';
 export * from './toggle/index';

package/lib/components/popup/index.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+interface PopupProps extends PropsWithChildren {
+    header?: ReactNode;
+    footer?: ReactNode;
+    isOpen: boolean;
+    asPortal?: boolean;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    borderRadius?: CSSProperties['borderRadius'];
+    padding?: CSSProperties['padding'];
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
+export { Popup, type PopupProps };

package/lib/components/popup/popup.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type StoryFn } from '@storybook/react-webpack5';
+import { type PopupProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: StoryFn<PopupProps>;

package/lib/components/popup-form/index.d.ts

@@ -0,0 +1,18 @@
+import { type FC, type ReactNode } from 'react';
+interface PopupFormProps {
+    clientX?: number;
+    flipX?: boolean;
+    clientY?: number;
+    flipY?: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: () => void;
+    withDelete?: boolean;
+    onDelete?: () => void;
+    title?: string;
+    titleTooltip?: string;
+    warning?: string;
+    children: ReactNode;
+}
+declare const PopupForm: FC<PopupFormProps>;
+export { PopupForm, type PopupFormProps };

package/lib/components/popup-form/popup-form.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type StoryFn } from '@storybook/react-webpack5';
+import { type PopupFormProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<PopupFormProps>;
+};
+export default _default;
+export declare const OverrideRuntime: StoryFn<PopupFormProps>;
+export declare const TokenUpdate: StoryFn<PopupFormProps>;

package/lib/components/tag/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import { StatusType } from '@/types';
+import { TextProps } from '../text';
+interface TagProps extends TextProps {
+    type: StatusType;
+}
+declare const Tag: FC<TagProps>;
+export { Tag, type TagProps };

package/lib/components/tag/tag.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type StoryObj } from '@storybook/react-webpack5';
+import { type TagProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<TagProps>;
+};
+export default _default;
+export declare const Default: StoryObj<TagProps>;
+export declare const Info: StoryObj<TagProps>;
+export declare const Warning: StoryObj<TagProps>;
+export declare const Error: StoryObj<TagProps>;
+export declare const Success: StoryObj<TagProps>;

package/lib/components.js

@@ -1,16 +1,16 @@
-import { d as Button } from './index-C1V7D2ey.js';
-export { e as AutocompleteInput, f as Badge, ad as CenterThis, C as Checkbox, g as Code, h as ConditionDetails, D as DataCard, j as DataCardFieldTypes, i as DataCardFields, k as DataTab, l as Divider, m as DocsButton, o as Drawer, q as DrawerFooter, p as DrawerHeader, r as Dropdown, s as ExtendArrow, t as FadeLoader, u as FieldError, v as FieldLabel, ac as FlexColumn, ab as FlexRow, w as Header, I as IconButton, x as IconGroup, y as IconTitleBadge, z as IconWrapped, G as IconsNav, J as ImageControlled, K as Input, O as InputList, P as InputTable, Q as InteractiveTable, R as KeyValueInputsList, U as Modal, ag as ModalBody, V as MonitorsCheckboxes, W as MonitorsIcons, X as NavigationButtons, Y as NoDataFound, Z as NotificationNote, af as Overlay, _ as ScrollX, $ as SectionTitle, a0 as Segment, a1 as SelectionButton, a2 as SkeletonLoader, a3 as Status, a4 as Stepper, ah as TableContainer, ai as TableTitleWrap, aj as TableWrap, a5 as Text, a6 as TextArea, a7 as Toggle, T as ToggleCodeComponent, a8 as Tooltip, a9 as TraceLoader, ae as VerticalScroll, aa as WarningModal } from './index-C1V7D2ey.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-DOU0EdZP.js';
+import { e as Button } from './index-CgdNGqvh.js';
+export { f as AutocompleteInput, g as Badge, al as CenterThis, h as Checkbox, i as Code, j as ConditionDetails, D as DataCard, l as DataCardFieldTypes, k as DataCardFields, m as DataFinger, o as DataTab, p as DescribeRow, q as Divider, r as DocsButton, s as Drawer, u as DrawerFooter, t as DrawerHeader, v as Dropdown, w as ExtendArrow, x as FadeLoader, y as FieldError, z as FieldLabel, ak as FlexColumn, aj as FlexRow, G as Header, I as IconButton, J as IconGroup, K as IconTitleBadge, O as IconWrapped, Q as IconsNav, R as ImageControlled, U as Input, V as InputList, W as InputTable, X as InteractiveTable, Y as KeyValueInputsList, Z as Modal, ao as ModalBody, _ as MonitorsCheckboxes, $ as MonitorsIcons, a0 as NavigationButtons, a1 as NoDataFound, a2 as NotificationNote, an as Overlay, a3 as Popup, a4 as PopupForm, a5 as ScrollX, a6 as SectionTitle, a7 as Segment, a8 as SelectionButton, a9 as SkeletonLoader, aa as Status, ab as Stepper, ap as TableContainer, aq as TableTitleWrap, ar as TableWrap, ac as Tag, ad as Text, ae as TextArea, af as Toggle, T as ToggleCodeComponent, ag as Tooltip, ah as TraceLoader, am as VerticalScroll, ai as WarningModal } from './index-CgdNGqvh.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-DnhO-nLH.js';
 import React, { Component, createElement, createContext } from 'react';
-import { T as Theme } from './index-Bw7RE2T2.js';
+import { T as Theme } from './index-BC03UmY5.js';
 import './types.js';
-import './index-CkTdd3MS.js';
-import './index-DsEoqSQn.js';
+import './index-CyHOJpMl.js';
+import './index-Dbs7YARA.js';
 import 'styled-components';
-import './index-DxR7e2Cq.js';
+import './index-H8TwBQHm.js';
 import './index-BnvrwbRB.js';
-import './useTransition-mupXsbop.js';
 import 'react-dom';
+import './useTransition-DmHfJSEP.js';
 
 const ErrorBoundaryContext = createContext(null);
 

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, k as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, l as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-Bw7RE2T2.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, l as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, m as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-BC03UmY5.js';
 export { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import 'react';
 import './types.js';

package/lib/containers/service-map/helpers/generate-dag-positions.d.ts

@@ -0,0 +1,5 @@
+import type { XYPosition } from '@xyflow/react';
+import type { ServiceMapSources } from '@/types';
+type PositionMap = Map<string, XYPosition>;
+export declare const generateDAGPositions: (serviceMap: ServiceMapSources, containerWidth: number, containerHeight: number) => PositionMap;
+export {};

package/lib/containers/service-map/helpers/generate-spiral-grid-position.d.ts

@@ -0,0 +1,2 @@
+import type { XYPosition } from '@xyflow/react';
+export declare const generateSpiralGridPosition: (existingPositions: XYPosition[], containerWidth: number, containerHeight: number) => XYPosition;

package/lib/containers/service-map/index.d.ts

@@ -1,5 +1,5 @@
-import React, { CSSProperties } from 'react';
-import { type ServiceMapSources } from '@/types';
+import React, { type CSSProperties } from 'react';
+import type { ServiceMapSources } from '@/types';
 interface ServiceMapProps {
     heightToRemove: CSSProperties['height'];
     serviceMap: ServiceMapSources;

package/lib/containers/system-overview/describe/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { DescribeOdigos } from '@/types';
+import { type DescribeOdigos } from '@/types';
 interface DescribeProps {
     fetchDescribeOdigos: () => Promise<{
         data?: {