@odigos/ui-kit 0.0.16 → 0.0.17

package/lib/useTransition-D0wUpPGk.js

@@ -0,0 +1,128 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+
+const useContainerSize = () => {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        const resize = () => {
+            if (ref.current) {
+                const { width, height } = ref.current.getBoundingClientRect();
+                setWidth(width);
+                setHeight(height);
+            }
+        };
+        resize();
+        window.addEventListener('resize', resize);
+        return () => window.removeEventListener('resize', resize);
+    }, []);
+    return {
+        containerRef: ref,
+        containerWidth: width,
+        containerHeight: height,
+    };
+};
+
+const useCopy = () => {
+    const [isCopied, setIsCopied] = useState(false);
+    const [copiedIndex, setCopiedIndex] = useState(-1);
+    const clickCopy = async (str, idx) => {
+        if (!isCopied) {
+            setIsCopied(true);
+            if (idx !== undefined)
+                setCopiedIndex(idx);
+            if (navigator?.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(str);
+                }
+                catch (err) {
+                    console.error('Clipboard write failed:', err);
+                }
+            }
+            else {
+                // Fallback: Create a temporary textarea
+                const textArea = document.createElement('textarea');
+                textArea.value = str;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                }
+                catch (err) {
+                    console.error('execCommand copy failed:', err);
+                }
+                document.body.removeChild(textArea);
+            }
+            setTimeout(() => {
+                setIsCopied(false);
+                setCopiedIndex(-1);
+            }, 1000);
+        }
+    };
+    return { isCopied, copiedIndex, clickCopy };
+};
+
+const useKeyDown = ({ active, key, withAltKey, withCtrlKey, withShiftKey, withMetaKey }, callback) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (active &&
+                key === e.key &&
+                (!withAltKey || (withAltKey && e.altKey)) &&
+                (!withCtrlKey || (withCtrlKey && e.ctrlKey)) &&
+                (!withShiftKey || (withShiftKey && e.shiftKey)) &&
+                (!withMetaKey || (withMetaKey && e.metaKey))) {
+                e.preventDefault();
+                e.stopPropagation();
+                callback(e);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [key, active, withAltKey, withCtrlKey, withShiftKey, withMetaKey, callback]);
+    return null;
+};
+
+const useOnClickOutside = (ref, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler();
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};
+
+const useTransition = ({ container, animateIn, animateOut, duration = 300 }) => {
+    const Animated = styled(container) `
+    animation-name: ${({ $isEntering, $isLeaving }) => ($isEntering ? animateIn : $isLeaving ? animateOut : 'none')};
+    animation-duration: ${duration}ms;
+    animation-fill-mode: forwards;
+  `;
+    // !! Do not deprecate this "useCallback" hook, it is necessary for the transition to work properly
+    const Transition = useCallback(({ children, enter, ...props }) => {
+        const [mounted, setMounted] = useState(false);
+        useEffect(() => {
+            const t = setTimeout(() => setMounted(enter), duration + 50); // +50ms to ensure the animation is finished
+            return () => clearTimeout(t);
+        }, [enter, duration]);
+        if (!enter && !mounted)
+            return null;
+        return (React.createElement(Animated, { "$isEntering": enter, "$isLeaving": !enter && mounted, ...props }, children));
+    }, 
+    // !! Do not add dependencies here, it will cause re-renders which we want to avoid
+    []);
+    return Transition;
+};
+
+export { useCopy as a, useKeyDown as b, useOnClickOutside as c, useTransition as d, useContainerSize as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": false,
   "exports": {
     "./components": {
       "types": "./lib/components/index.d.ts",

package/lib/components/auto-complete-input/auto-complete-input.stories.d.ts

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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { StoryObj } from '@storybook/react';
-import { type BadgeProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<BadgeProps>;
-};
-export default _default;
-export declare const Default: StoryObj<BadgeProps>;
-export declare const DefaultFilled: StoryObj<BadgeProps>;
-export declare const StatusSuccess: StoryObj<BadgeProps>;
-export declare const StatusError: StoryObj<BadgeProps>;
-export declare const StatusWarn: StoryObj<BadgeProps>;

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

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

package/lib/components/cancel-warning/cancel-warning.stories.d.ts

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

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

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

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

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

package/lib/components/condition-details/condition-details.stories.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { type ConditionDetailsProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<ConditionDetailsProps>;
-};
-export default _default;
-export declare const MixedConditions: StoryObj<ConditionDetailsProps>;
-export declare const SuccessConditions: StoryObj<ConditionDetailsProps>;
-export declare const DisabledConditions: StoryObj<ConditionDetailsProps>;
-export declare const ErrorConditions: StoryObj<ConditionDetailsProps>;
-export declare const WarningConditions: StoryObj<ConditionDetailsProps>;
-export declare const LoadingConditions: StoryObj<ConditionDetailsProps>;

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

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

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { type DataTabProps } from '.';
-import type { StoryObj } from '@storybook/react';
-declare const _default: {
-    title: string;
-    component: React.FC<DataTabProps>;
-};
-export default _default;
-export declare const NoStatus: StoryObj<DataTabProps>;
-export declare const ForcedBgColor: StoryObj<DataTabProps>;
-export declare const InfoStatus: StoryObj<DataTabProps>;
-export declare const DefaultStatus: StoryObj<DataTabProps>;
-export declare const ErrorStatus: StoryObj<DataTabProps>;
-export declare const WarningStatus: StoryObj<DataTabProps>;
-export declare const SuccessStatus: StoryObj<DataTabProps>;

package/lib/components/delete-warning/delete-warning.stories.d.ts

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

package/lib/components/describe-row/describe-row.stories.d.ts

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

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

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

package/lib/components/docs-button/docs-button.stories.d.ts

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

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

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

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

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

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

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

package/lib/components/extend-arrow/extend-arrow.stories.d.ts

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

package/lib/components/fade-loader/fade-loader.stories.d.ts

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

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

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

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

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

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

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

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

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

package/lib/components/icon-group/icon-group.stories.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { StoryObj } from '@storybook/react';
-import { type IconGroupProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<IconGroupProps>;
-};
-export default _default;
-export declare const SvgImportsMaxAmount: StoryObj<IconGroupProps>;
-export declare const SvgImportsHalfAmount: StoryObj<IconGroupProps>;
-export declare const SvgImportsMinAmount: StoryObj<IconGroupProps>;
-export declare const ImageUrlsMaxAmount: StoryObj<IconGroupProps>;
-export declare const ImageUrlsHalfAmount: StoryObj<IconGroupProps>;
-export declare const ImageUrlsMinAmount: StoryObj<IconGroupProps>;

package/lib/components/icon-title-badge/icon-title-badge.stories.d.ts

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

package/lib/components/icon-wrapped/icon-wrapped.stories.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { StoryObj } from '@storybook/react';
-import { type IconWrappedProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<IconWrappedProps>;
-};
-export default _default;
-export declare const SvgImport: StoryObj<IconWrappedProps>;
-export declare const ImageUrl: StoryObj<IconWrappedProps>;

package/lib/components/icons-nav/icons-nav.stories.d.ts

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

package/lib/components/image-controlled/image-controlled.stories.d.ts

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

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

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

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

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

package/lib/components/input-table/input-table.stories.d.ts

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

package/lib/components/interactive-table/interactive-table.stories.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { type InteractiveTableProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<InteractiveTableProps>;
-};
-export default _default;
-export declare const Tokens: StoryObj<InteractiveTableProps>;
-export declare const ComputePlatforms: StoryObj<InteractiveTableProps>;
-export declare const Sources: StoryObj<InteractiveTableProps>;
-export declare const Actions: StoryObj<InteractiveTableProps>;

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

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

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

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

package/lib/components/monitors-checkboxes/monitors-checkboxes.stories.d.ts

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

package/lib/components/monitors-icons/monitors-icons.stories.d.ts

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

package/lib/components/navigation-buttons/navigation-buttons.stories.d.ts

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

package/lib/components/no-data-found/no-data-found.stories.d.ts

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

package/lib/components/notification-note/notification-note.stories.d.ts

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

package/lib/components/section-title/section-title.stories.d.ts

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

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

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

package/lib/components/skeleton-loader/skeleton-loader.stories.d.ts

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

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

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

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

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

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

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