@odigos/ui-kit 0.0.8 → 0.0.9

package/lib/{index-CKUgKtl0.js → index-m62aT4IR.js}

@@ -3,13 +3,12 @@ import { NOTIFICATION_TYPE, OTHER_STATUS, PROGRAMMING_LANGUAGES, ENTITY_TYPES }
 import './index-DIcomki-.js';
 import styled, { css } from 'styled-components';
 import Theme from './theme.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-BulCzWQI.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-Bc8gi9FH.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
-import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
+import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, I as ImageErrorIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-D_Qn2U89.js';
 import { M as MONITORS_OPTIONS } from './index-CZe2VX28.js';
 import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-Dfxjcy-C.js';
 import ReactDOM from 'react-dom';
-import { O as OdigosLogo } from './index-BGlk5VhF.js';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
 import require$$2 from 'babel-runtime/helpers/classCallCheck';
@@ -17,7 +16,7 @@ import require$$3 from 'babel-runtime/helpers/createClass';
 import require$$4 from 'babel-runtime/helpers/possibleConstructorReturn';
 import require$$5 from 'babel-runtime/helpers/inherits';
 import require$$1 from 'object-assign';
-import { I as InfoIcon } from './index-DLKEpJJm.js';
+import { I as InfoIcon } from './index-ixs381n-.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -4082,7 +4081,7 @@ const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     if (!!src && !hasError) {
         return React.createElement("img", { src: src, alt: alt, width: size, height: size, onError: () => setHasError(true) });
     }
-    return React.createElement(OdigosLogo, { size: size });
+    return React.createElement(ImageErrorIcon, { size: size });
 };
 
 const Container$o = styled.div `
@@ -4098,7 +4097,7 @@ const Container$o = styled.div `
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    return (React.createElement(Container$o, { "$status": status, "$size": size }, !!src ? React.createElement(ImageControlled, { src: src, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(OdigosLogo, { size: size - 16 })));
+    return (React.createElement(Container$o, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(ImageErrorIcon, { size: size - 16 })));
 };
 
 const Container$n = styled.div `
@@ -4646,7 +4645,7 @@ const renderValue = (type, value) => {
                 otelDistroName: '',
             });
             const awaitingInstrumentation = !instrumented && !instrumentationMessage;
-            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === PROGRAMMING_LANGUAGES.JAVASCRIPT ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), iconSrc: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
+            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === PROGRAMMING_LANGUAGES.JAVASCRIPT ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), icon: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
                     if (!!instrumentationMessage) {
                         return (React.createElement(AlignCenter, null,
                             React.createElement(Status, { status: NOTIFICATION_TYPE.INFO, title: splitCamelString(instrumentationMessage) })));
@@ -4671,18 +4670,15 @@ const CardContainer = styled.div `
   padding: 24px;
   border-radius: 24px;
   border: 1px solid ${({ theme }) => theme.colors.border};
-  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  background-color: ${({ theme, $hovered }) => ($hovered ? theme.colors.secondary + Theme.opacity.hex['010'] : 'transparent')};
   transition: background-color 0.3s;
-  ${({ $clickable, theme }) => $clickable &&
-    `&:hover {
-      background-color: ${theme.colors.secondary + Theme.opacity.hex['010']};
-    }`}
 `;
 const Header$1 = styled.div `
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 4px;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
 `;
 const Title$8 = styled(Text) `
   width: 100%;
@@ -4701,8 +4697,9 @@ const ActionWrapper = styled(FlexRow) `
 `;
 const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, data }) => {
     const [extend, setExtend] = useState(false);
-    return (React.createElement(CardContainer, { "$clickable": !!withExtend, onClick: () => withExtend && setExtend((prev) => !prev) },
-        !!title || !!description || !!Action ? (React.createElement(Header$1, null,
+    const [hovered, setHovered] = useState(false);
+    return (React.createElement(CardContainer, { "$hovered": hovered },
+        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
             (!!title || !!Action) && (React.createElement(Title$8, null,
                 title,
                 titleBadge !== undefined && React.createElement(Badge, { label: titleBadge }),

package/lib/types/connection/index.d.ts

@@ -1,7 +1,7 @@
 import { NOTIFICATION_TYPE, PLATFORM_TYPE } from '../common';
 export interface Connection {
     id: string;
+    type?: PLATFORM_TYPE;
     name?: string;
-    type: PLATFORM_TYPE;
-    connectionStatus: NOTIFICATION_TYPE;
+    status: NOTIFICATION_TYPE;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "Odigos",
   "repository": {
     "type": "git",

package/lib/index-DLKEpJJm.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import Theme from './theme.js';
-
-const LogsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66699 8.5H6.66699M2.66699 12.5H6.66699M2.66699 4.5L13.3337 4.5M12.4765 12.0146C13.0334 11.61 13.5322 11.1357 13.96 10.6043C14.0138 10.5375 14.0138 10.4441 13.96 10.3773C13.5322 9.84585 13.0334 9.37156 12.4765 8.96696M10.1908 8.96696C9.63389 9.37156 9.13508 9.84585 8.7073 10.3773C8.65356 10.4441 8.65356 10.5375 8.7073 10.6043C9.13508 11.1357 9.63389 11.61 10.1908 12.0146' })));
-};
-
-const MetricsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.2389 9.1672C13.2389 12.4305 10.5935 15.0758 7.33025 15.0758V14.3373M13.2389 9.1672H14.0883C14.0883 5.43485 11.0626 2.40918 7.33025 2.40918V4.73571M13.2389 9.1672L7.33025 9.1672M7.33025 14.3373C4.47491 14.3373 2.16016 12.0225 2.16016 9.1672H2.89877M7.33025 14.3373L7.33025 9.1672M2.89877 9.1672C2.89877 6.71975 4.88281 4.73571 7.33025 4.73571M2.89877 9.1672H7.33025M7.33025 4.73571L7.33025 9.1672' })));
-};
-
-const TracesIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10.3337 8.5C10.3337 9.60457 11.2291 10.5 12.3337 10.5C13.4382 10.5 14.3337 9.60457 14.3337 8.5C14.3337 7.39543 13.4382 6.5 12.3337 6.5C11.2291 6.5 10.3337 7.39543 10.3337 8.5ZM10.3337 8.5L8.00032 8.5M8.00032 8.5L8.00032 9.3C8.00032 10.4201 8.00032 10.9802 7.78234 11.408C7.59059 11.7843 7.28463 12.0903 6.90831 12.282C6.60852 12.4348 6.24381 12.4805 5.66698 12.4942M8.00032 8.5L8.00032 7.7C8.00032 6.57989 8.00032 6.01984 7.78234 5.59202C7.59059 5.21569 7.28463 4.90973 6.90831 4.71799C6.60852 4.56524 6.24381 4.51952 5.66698 4.50584M5.66698 12.4942C5.66383 11.3923 4.76961 10.5 3.66699 10.5C2.56242 10.5 1.66699 11.3954 1.66699 12.5C1.66699 13.6046 2.56242 14.5 3.66699 14.5C4.77156 14.5 5.66699 13.6046 5.66699 12.5C5.66699 12.4981 5.66699 12.4961 5.66698 12.4942ZM5.66698 4.50584C5.66383 5.60773 4.76961 6.5 3.66699 6.5C2.56242 6.5 1.66699 5.60457 1.66699 4.5C1.66699 3.39543 2.56242 2.5 3.66699 2.5C4.77156 2.5 5.66699 3.39543 5.66699 4.5C5.66699 4.50195 5.66699 4.5039 5.66698 4.50584Z' })));
-};
-
-const CheckCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size, height: size * (16 / 17), viewBox: '0 0 17 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.41707 8.34197L7.97787 9.90111C8.72855 8.58846 9.76744 7.46337 11.0162 6.61065L11.0837 6.56453M14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039Z' })));
-};
-
-const ErrorTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.error;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
-};
-
-const InfoIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.91498V11.5816M8 6.66498V6.66423M14 8.91504C14 12.2287 11.3137 14.915 8 14.915C4.68629 14.915 2 12.2287 2 8.91504C2 5.60133 4.68629 2.91504 8 2.91504C11.3137 2.91504 14 5.60133 14 8.91504Z' })));
-};
-
-const WarningTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.warning;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
-};
-
-export { CheckCircledIcon as C, ErrorTriangleIcon as E, InfoIcon as I, LogsIcon as L, MetricsIcon as M, TracesIcon as T, WarningTriangleIcon as W };