@odigos/ui-kit 0.0.47 → 0.0.49

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.49](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.48...ui-kit-v0.0.49) (2025-07-01)
+
+
+### Features
+
+* add ESLint workflow for pull requests ([#206](https://github.com/odigos-io/ui-kit/issues/206)) ([17e5036](https://github.com/odigos-io/ui-kit/commit/17e50361890a251748115326b0f3e63bda924b6d))
+* service map ([#207](https://github.com/odigos-io/ui-kit/issues/207)) ([24637e0](https://github.com/odigos-io/ui-kit/commit/24637e01d75af8221b6fe20fde192ce55c072687))
+
+## [0.0.48](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.47...ui-kit-v0.0.48) (2025-06-26)
+
+
+### Features
+
+* add new instrumentation rule - `CustomInstrumentation` ([#197](https://github.com/odigos-io/ui-kit/issues/197)) ([88e1615](https://github.com/odigos-io/ui-kit/commit/88e161528dff2bfc452398e8cbca373d153e0c08))
+
 ## [0.0.47](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.46...ui-kit-v0.0.47) (2025-06-26)
 
 

package/eslint.config.mjs

@@ -1,5 +1,5 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
+import storybook from 'eslint-plugin-storybook';
 
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
@@ -15,6 +15,20 @@ const compat = new FlatCompat({
 const extensions = compat.extends('next/core-web-vitals', 'next/typescript');
 const config = compat.config({});
 
-const eslintConfig = [...extensions, ...config, ...storybook.configs["flat/recommended"]];
+// Custom rule to allow unused variables that start with underscore
+const customRules = {
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
+
+const eslintConfig = [...extensions, ...config, ...storybook.configs['flat/recommended'], customRules];
 
 export default eslintConfig;

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

@@ -1,4 +1,5 @@
 import { type FC } from 'react';
+import { AnyObj } from '@/types';
 declare enum DataCardFieldTypes {
     Code = "code",
     Table = "table",
@@ -16,7 +17,7 @@ interface DataCardField {
     type?: DataCardFieldTypes;
     title?: string;
     tooltip?: string;
-    value?: string | Record<string, any>;
+    value?: string | AnyObj;
     callback?: (payload: any) => void | Promise<void>;
 }
 interface DataCardFieldsProps {

package/lib/components/error-boundary/error-boundary.stories.d.ts

@@ -3,7 +3,9 @@ import type { StoryFn } from '@storybook/react-webpack5';
 import { type ErrorBoundaryProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<ErrorBoundaryProps>;
+    component: React.FC<{
+        children?: React.ReactNode | undefined;
+    }>;
 };
 export default _default;
 export declare const Default: StoryFn<ErrorBoundaryProps>;

package/lib/components/error-boundary/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC, type PropsWithChildren } from 'react';
-interface ErrorBoundaryProps extends PropsWithChildren {
-}
+type ErrorBoundaryProps = PropsWithChildren;
 declare const ErrorBoundary: FC<ErrorBoundaryProps>;
 export { ErrorBoundary, type ErrorBoundaryProps };

package/lib/components/field-error/field-error.stories.d.ts

@@ -3,7 +3,9 @@ import type { StoryFn } from '@storybook/react-webpack5';
 import { type FieldErrorProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<FieldErrorProps>;
+    component: React.FC<{
+        children?: React.ReactNode | undefined;
+    }>;
 };
 export default _default;
 export declare const Default: StoryFn<FieldErrorProps>;

package/lib/components/field-error/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC, type PropsWithChildren } from 'react';
-interface FieldErrorProps extends PropsWithChildren {
-}
+type FieldErrorProps = PropsWithChildren;
 declare const FieldError: FC<FieldErrorProps>;
 export { FieldError, type FieldErrorProps };

package/lib/components/key-value-input-list/index.d.ts

@@ -11,6 +11,8 @@ interface KeyValueInputsListProps {
     tooltip?: string;
     required?: boolean;
     errorMessage?: string;
+    keyPlaceholder?: string;
+    valuePlaceholder?: string;
 }
 declare const KeyValueInputsList: FC<KeyValueInputsListProps>;
 export { KeyValueInputsList, type KeyValueInputsListProps };

package/lib/components/key-value-input-list/key-value-input-list.stories.d.ts

@@ -7,3 +7,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: StoryFn<KeyValueInputsListProps>;
+export declare const CustomPlaceholders: StoryFn<KeyValueInputsListProps>;
+export declare const CustomInstrumentationExample: StoryFn<KeyValueInputsListProps>;

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

@@ -1,14 +1,15 @@
 import { type CSSProperties, type FC } from 'react';
 import type { SVG } from '@/types';
 type SelectedValue = any;
+type Option = {
+    icon?: SVG;
+    label?: string;
+    value: SelectedValue;
+    selectedBgColor?: CSSProperties['backgroundColor'];
+    selectedTextColor?: CSSProperties['color'];
+};
 interface SegmentProps {
-    options: {
-        icon?: SVG;
-        label?: string;
-        value: SelectedValue;
-        selectedBgColor?: CSSProperties['backgroundColor'];
-        selectedTextColor?: CSSProperties['color'];
-    }[];
+    options: Option[];
     selected: SelectedValue;
     setSelected: (value: SelectedValue) => void;
 }

package/lib/components/styled.d.ts

@@ -1,6 +1,8 @@
 import { type CSSProperties } from 'styled-components';
 export declare const FlexRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $gap?: number;
+    $alignItems?: CSSProperties["alignItems"];
+    $justifyContent?: CSSProperties["justifyContent"];
 }>> & string;
 export declare const FlexColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $gap?: number;
@@ -19,8 +21,10 @@ export declare const TableContainer: import("styled-components/dist/types").ISty
 }, {
     $maxWidth: CSSProperties["maxWidth"];
 }>> & string;
-export declare const TableTitleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap"> & {
+export declare const TableTitleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$alignItems" | "$justifyContent"> & {
     $gap?: number;
+    $alignItems?: CSSProperties["alignItems"];
+    $justifyContent?: CSSProperties["justifyContent"];
 }, never>> & string;
 export declare const TableWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $maxHeight: CSSProperties["maxHeight"];

package/lib/components.js

@@ -1,15 +1,15 @@
-import { B as Button } from './index-B1IScVBT.js';
-export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-B1IScVBT.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-C8vqcUbP.js';
+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 React, { Component, createElement, createContext } from 'react';
-import { T as Theme } from './index-BRGQ84pJ.js';
+import { T as Theme } from './index-Bw7RE2T2.js';
 import './types.js';
-import './index-BUCure0Q.js';
-import './index-BJpPcCBm.js';
+import './index-CkTdd3MS.js';
+import './index-DsEoqSQn.js';
 import 'styled-components';
-import './index-CeHgnkLY.js';
-import './index-BV85P9UP.js';
-import './useTransition-DsrDiKOV.js';
+import './index-DxR7e2Cq.js';
+import './index-BnvrwbRB.js';
+import './useTransition-mupXsbop.js';
 import 'react-dom';
 
 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-BRGQ84pJ.js';
+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 { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import 'react';
 import './types.js';

package/lib/containers/await-pipeline/await-pipeline.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react-webpack5';
 import { type AwaitPipelineProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<AwaitPipelineProps>;
+    component: React.FC<object>;
 };
 export default _default;
 export declare const Default: StoryFn<AwaitPipelineProps>;

package/lib/containers/await-pipeline/index.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-interface AwaitPipelineProps {
-}
+type AwaitPipelineProps = object;
 declare const AwaitPipeline: FC<AwaitPipelineProps>;
 export { AwaitPipeline, type AwaitPipelineProps };

package/lib/containers/data-flow-actions-menu/add-entity/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-interface Props {
-}
-export declare const AddEntity: React.FC<Props>;
+type AddEntityProps = object;
+export declare const AddEntity: React.FC<AddEntityProps>;
 export {};

package/lib/containers/data-flow-actions-menu/filters/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-interface Props {
-}
-export declare const Filters: React.FC<Props>;
+type FiltersProps = object;
+export declare const Filters: React.FC<FiltersProps>;
 export {};

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

@@ -1,5 +1,4 @@
 import React from 'react';
-interface Props {
-}
-export declare const Search: React.FC<Props>;
+type SearchProps = object;
+export declare const Search: React.FC<SearchProps>;
 export {};

package/lib/containers/data-stream-modal/data-stream-modal.stories.d.ts

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

package/lib/containers/data-stream-modal/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
-interface DataStreamModalProps {
-}
+type DataStreamModalProps = object;
 declare const DataStreamModal: FC<DataStreamModalProps>;
 export { DataStreamModal, type DataStreamModalProps };

package/lib/containers/index.d.ts

@@ -24,6 +24,7 @@ export * from './instrumentation-rule-table/index';
 export * from './multi-source-control/index';
 export * from './notification-manager/index';
 export * from './overview-drawer/index';
+export * from './service-map/index';
 export * from './setup-summary/index';
 export * from './side-nav/index';
 export * from './slack-invite/index';

package/lib/containers/instrumentation-rule-form/custom-fields/custom-instrumentation.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { type CustomFieldProps, type InstrumentationRuleFormData } from '@/types';
+type CustomInstrumentationProps = CustomFieldProps<InstrumentationRuleFormData>;
+declare const CustomInstrumentation: FC<CustomInstrumentationProps>;
+export { CustomInstrumentation, type CustomInstrumentationProps };

package/lib/containers/notification-manager/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-interface NotificationManagerProps {
-}
+type NotificationManagerProps = object;
 declare const NotificationManager: React.FC<NotificationManagerProps>;
 export { NotificationManager, type NotificationManagerProps };

package/lib/containers/notification-manager/notification-manager.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from '@storybook/react-webpack5';
 import { type NotificationManagerProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<NotificationManagerProps>;
+    component: React.FC<object>;
 };
 export default _default;
 export declare const Default: StoryObj<NotificationManagerProps>;

package/lib/containers/service-map/helpers/build-edges.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from 'styled-components';
+import { type Edge, type Node } from '@xyflow/react';
+import { type ServiceMapSources } from '@/types';
+interface Params {
+    theme: DefaultTheme;
+    nodes: Node[];
+    serviceMap: ServiceMapSources;
+}
+export declare const buildEdges: ({ theme, nodes, serviceMap }: Params) => Edge[];
+export {};

package/lib/containers/service-map/helpers/build-map-nodes.d.ts

@@ -0,0 +1,11 @@
+import type { Node } from '@xyflow/react';
+import { type Source, type ServiceMapSources } from '@/types';
+interface Params {
+    sources: Source[];
+    sourcesLoading: boolean;
+    serviceMap: ServiceMapSources;
+    containerHeight: number;
+    containerWidth: number;
+}
+export declare const buildMapNodes: ({ sources, serviceMap, containerHeight, containerWidth }: Params) => Node[];
+export {};

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

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+import { type ServiceMapSources } from '@/types';
+interface ServiceMapProps {
+    heightToRemove: CSSProperties['height'];
+    serviceMap: ServiceMapSources;
+}
+declare const ServiceMap: React.FC<ServiceMapProps>;
+export { ServiceMap, type ServiceMapProps };

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

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

package/lib/containers/slack-invite/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
-interface SlackInviteProps {
-}
+type SlackInviteProps = object;
 declare const SlackInvite: FC<SlackInviteProps>;
 export { SlackInvite, type SlackInviteProps };

package/lib/containers/slack-invite/slack-invite.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react-webpack5';
 import { type SlackInviteProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<SlackInviteProps>;
+    component: React.FC<object>;
 };
 export default _default;
 export declare const Default: StoryFn<SlackInviteProps>;

package/lib/containers/toast-list/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-interface ToastListProps {
-}
+type ToastListProps = object;
 declare const ToastList: React.FC<ToastListProps>;
 export { ToastList, type ToastListProps };

package/lib/containers/toast-list/toast-list.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react-webpack5';
 import { type ToastListProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<ToastListProps>;
+    component: React.FC<object>;
 };
 export default _default;
 export declare const Default: StoryObj<ToastListProps>;

package/lib/containers/toggle-dark-mode/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
-interface ToggleDarkModeProps {
-}
+type ToggleDarkModeProps = object;
 declare const ToggleDarkMode: FC<ToggleDarkModeProps>;
 export { ToggleDarkMode, type ToggleDarkModeProps };

package/lib/containers/toggle-dark-mode/toggle-dark-mode.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react-webpack5';
 import { type ToggleDarkModeProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<ToggleDarkModeProps>;
+    component: React.FC<object>;
 };
 export default _default;
 export declare const Default: StoryFn<ToggleDarkModeProps>;