@iota/apps-ui-kit 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -30,21 +30,20 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.3.0"
+    "@iota/apps-ui-icons": "0.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-onboarding": "^8.1.11",
     "@storybook/blocks": "^7.1.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
-    "@storybook/test": "^8.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { BadgeType } from './badge.enums';
+import type { BadgeType } from './badge.enums';
 import { BACKGROUND_COLORS, BADGE_TEXT_CLASS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
 interface BadgeProps {

package/src/lib/components/atoms/button/button-variants/ButtonPill.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ButtonHtmlType } from '../button.enums';
-import { ButtonVariantProps } from './buttonVariants.types';
+import type { ButtonVariantProps } from './buttonVariants.types';
 
 export function ButtonPill({
     htmlType = ButtonHtmlType.Button,

package/src/lib/components/atoms/button/button-variants/ButtonUnstyled.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ButtonHtmlType } from '../button.enums';
-import { ButtonVariantProps } from './buttonVariants.types';
+import type { ButtonVariantProps } from './buttonVariants.types';
 import cx from 'classnames';
 
 export function ButtonUnstyled({

package/src/lib/components/atoms/button/button-variants/buttonVariants.types.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ButtonProps } from '../Button';
+import type { ButtonProps } from '../Button';
 
 type ButtonPickedProps = Pick<ButtonProps, 'htmlType' | 'testId'>;
 type PropsFromButtonElement = Omit<React.HTMLProps<HTMLButtonElement>, 'type'>;

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -38,6 +38,10 @@ interface ButtonSegmentProps {
      * The type of the button.
      */
     type?: ButtonSegmentType;
+    /**
+     * If the button is nested inside a parent button.
+     */
+    isNested?: boolean;
 }
 
 export function ButtonSegment({
@@ -47,6 +51,7 @@ export function ButtonSegment({
     disabled,
     onClick,
     type = ButtonSegmentType.Rounded,
+    isNested = false,
 }: ButtonSegmentProps): React.JSX.Element {
     const isUnderlined = type === ButtonSegmentType.Underlined;
 
@@ -58,9 +63,16 @@ export function ButtonSegment({
 
     const underlined = isUnderlined ? (selected ? UNDERLINED_SELECTED : UNDERLINED) : '';
     const textColors = selected ? TEXT_COLORS_SELECTED : TEXT_COLORS;
-    const padding = isUnderlined ? 'px-lg py-md' : 'px-sm py-[6px]';
+    const padding = isUnderlined ? (isNested ? 'px-md py-sm' : 'px-lg py-md') : 'px-sm py-[6px]';
     const borderRadius = isUnderlined ? '' : 'rounded-full';
-    const textSize = isUnderlined ? 'text-title-md' : 'text-label-lg';
+    const textSize = isNested
+        ? isUnderlined
+            ? 'text-title-sm'
+            : 'text-label-md'
+        : isUnderlined
+          ? 'text-title-md'
+          : 'text-label-lg';
+
     return (
         <ButtonUnstyled
             onClick={onClick}
@@ -79,7 +91,7 @@ export function ButtonSegment({
         >
             <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
                 {icon && <span>{icon}</span>}
-                <span className="font-inter">{label}</span>
+                <span className="shrink-0 font-inter">{label}</span>
             </div>
         </ButtonUnstyled>
     );

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { InfoBoxStyle, InfoBoxType } from './infoBox.enums';
+import type { InfoBoxType } from './infoBox.enums';
+import { InfoBoxStyle } from './infoBox.enums';
 import { BACKGROUND_COLORS, ICON_COLORS } from './infoBox.classes';
 
 export interface InfoBoxProps {

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import cx from 'classnames';
 import { Copy, Info } from '@iota/apps-ui-icons';
 import { ValueSize } from './keyValue.enums';
-import { Tooltip, TooltipPosition } from '../tooltip';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
 import { ButtonUnstyled } from '../button';
 
 interface KeyValueProps {

package/src/lib/components/atoms/label-text/LabelText.tsx

@@ -5,7 +5,8 @@ import cx from 'classnames';
 import { LabelTextSize } from './labelText.enums';
 import { LABEL_TEXT_SIZE, SUPPORTING_TEXT_SIZE, TEXT_SIZE } from './labelText.classes';
 import { Info } from '@iota/apps-ui-icons';
-import { TooltipPosition, Tooltip } from '../tooltip';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
 
 interface LabelTextProps {
     /**

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowRight } from '@iota/apps-ui-icons';
-import { Button, ButtonSize, ButtonType } from '@/components';
+import { Button, ButtonSize, ButtonType } from '../button';
 
 export interface ListItemProps {
     /**

package/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@iota/apps-ui-icons';
 import { SnackbarType } from './snackbar.enums';
-import { BACKGROUND_COLOR, TEXT_COLOR } from '@/components/atoms/snackbar/snackbar.classes';
+import { BACKGROUND_COLOR, TEXT_COLOR } from './snackbar.classes';
 
 type Renderable = JSX.Element | string | null;
 export interface SnackbarProps {

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -1,37 +1,138 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import { useRef, useState, useLayoutEffect } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
-import { TOOLTIP_POSITION } from './tooltip.classes';
 
 interface TooltipProps {
     text: string;
     position?: TooltipPosition;
     maxWidth?: string;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
 }
 
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
     maxWidth = 'max-w-[200px]',
+    offset = 8,
+    openDelay = 0,
+    closeDelay = 100,
     children,
-}: PropsWithChildren<TooltipProps>): React.JSX.Element {
-    const tooltipPositionClass = TOOLTIP_POSITION[position];
+}: PropsWithChildren<TooltipProps>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+    const openTimer = useRef<ReturnType<typeof setTimeout>>();
+    const closeTimer = useRef<ReturnType<typeof setTimeout>>();
+
+    const clearTimers = () => {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+    };
+
+    const open = () => {
+        clearTimers();
+        openTimer.current = setTimeout(() => setVisible(true), openDelay);
+    };
+
+    const close = () => {
+        clearTimers();
+        closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+
+        const pos = {
+            [TooltipPosition.Top]: {
+                top: rect.top - offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, -100%)',
+            },
+            [TooltipPosition.Bottom]: {
+                top: rect.bottom + offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, 0)',
+            },
+            [TooltipPosition.Left]: {
+                top: rect.top + rect.height / 2,
+                left: rect.left - offset,
+                transform: 'translate(-100%, -50%)',
+            },
+            [TooltipPosition.Right]: {
+                top: rect.top + rect.height / 2,
+                left: rect.right + offset,
+                transform: 'translate(0, -50%)',
+            },
+        }[position];
+
+        setCoords({ top: pos.top, left: pos.left });
+        tooltipRef.current!.style.transform = pos.transform;
+    }, [visible, position, offset]);
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+        const update = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+            setCoords((prev) => ({ ...prev, left: rect.left + rect.width / 2 }));
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [visible]);
+
+    const base =
+        'z-[999] w-max rounded bg-neutral-80 p-xs text-neutral-10 dark:bg-neutral-30 dark:text-neutral-92';
+
     return (
-        <div className="group relative inline-block">
-            {children}
+        <>
             <div
-                className={cx(
-                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
-                    tooltipPositionClass,
-                    maxWidth,
-                )}
-                role="tooltip"
+                ref={triggerRef}
+                className="inline-block cursor-pointer"
+                onMouseEnter={open}
+                onFocus={open}
+                onMouseLeave={close}
+                onBlur={close}
             >
-                <p className="w-full break-words">{text}</p>
+                {children}
             </div>
-        </div>
+
+            {visible &&
+                createPortal(
+                    <div
+                        ref={tooltipRef}
+                        role="tooltip"
+                        style={{
+                            position: 'fixed',
+                            top: coords.top,
+                            left: coords.left,
+                            transition: 'opacity .15s ease',
+                            opacity: 1,
+                        }}
+                        className={cx(base, maxWidth)}
+                        onMouseEnter={open}
+                        onMouseLeave={close}
+                    >
+                        <p className="w-full break-words">{text}</p>
+                    </div>,
+                    document.body,
+                )}
+        </>
     );
 }

package/src/lib/components/molecules/account/Account.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
-import { Badge, BadgeType } from '../../atoms';
+import type { BadgeType } from '@/components/atoms';
+import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
 import {
     LockLocked,
     LockUnlocked,
@@ -82,6 +82,14 @@ interface AccountProps {
      * The text of the badge.
      */
     badgeText?: string;
+    /**
+     * The tooltip text of the badge.
+     */
+    badgeTooltipText?: string;
+    /**
+     * The tooltip position of the badge.
+     */
+    badgeTooltipPosition?: TooltipPosition;
 }
 
 export function Account({
@@ -102,6 +110,8 @@ export function Account({
     isSelected,
     isActive,
     showSelected,
+    badgeTooltipText,
+    badgeTooltipPosition = TooltipPosition.Bottom,
 }: AccountProps): React.JSX.Element {
     const Avatar = avatarContent;
 
@@ -122,7 +132,15 @@ export function Account({
                         <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
                             {title}
                         </span>
-                        {badgeType && badgeText && <Badge type={badgeType} label={badgeText} />}
+                        {badgeText && badgeType ? (
+                            badgeTooltipText ? (
+                                <Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
+                                    <Badge type={badgeType} label={badgeText} />
+                                </Tooltip>
+                            ) : (
+                                <Badge type={badgeType} label={badgeText} />
+                            )
+                        ) : null}
                     </div>
                     <Address
                         text={subtitle}

package/src/lib/components/molecules/address/Address.tsx

@@ -3,7 +3,7 @@
 
 import cx from 'classnames';
 import { Copy, ArrowTopRight } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 
 interface AddressProps {
     /**

package/src/lib/components/molecules/card/CardAction.tsx

@@ -3,7 +3,7 @@
 
 import { ArrowRight } from '@iota/apps-ui-icons';
 import { CardActionType } from './card.enums';
-import { Button, ButtonSize, ButtonType } from '../../atoms/button';
+import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
     title?: string;

package/src/lib/components/molecules/card/CardBody.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import cx from 'classnames';
-
-import { ReactNode } from 'react';
-import { Tooltip, TooltipPosition } from '../../atoms';
+import type { ReactNode } from 'react';
+import { Tooltip } from '@/components/atoms/tooltip';
+import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
     title: string;

package/src/lib/components/molecules/chip/Chip.tsx

@@ -11,7 +11,7 @@ import {
     TEXT_COLOR,
     FOCUS_CLASSES,
 } from './chip.classes';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { Close } from '@iota/apps-ui-icons';
 
 interface ChipProps {

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode } from 'react';
-import { Tooltip, TooltipPosition } from '../../atoms';
-import { Info } from '@iota/apps-ui-icons';
+import type { ReactNode } from 'react';
+import type { TooltipPosition } from '@/components/atoms';
+import { ButtonUnstyled, Tooltip } from '@/components/atoms';
+import { Copy, Info } from '@iota/apps-ui-icons';
 import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
 import cx from 'classnames';
 import {
@@ -48,6 +49,18 @@ interface DisplayStatsProps {
      * Add icon to the right of the label.
      */
     icon?: React.ReactNode;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the KeyValue  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the KeyValue  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
 }
 
 export function DisplayStats({
@@ -59,6 +72,9 @@ export function DisplayStats({
     type = DisplayStatsType.Default,
     size = DisplayStatsSize.Default,
     icon,
+    copyText,
+    onCopySuccess,
+    onCopyError,
 }: DisplayStatsProps): React.JSX.Element {
     const backgroundClass = BACKGROUND_CLASSES[type];
     const sizeClass = SIZE_CLASSES[size];
@@ -67,6 +83,21 @@ export function DisplayStats({
     const labelClass = LABEL_TEXT_CLASSES[size];
     const supportingLabelTextClass = SUPPORTING_LABEL_TEXT_CLASSES[size];
 
+    async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (!navigator.clipboard) {
+            return;
+        }
+
+        if (copyText) {
+            try {
+                await navigator.clipboard.writeText(copyText);
+                onCopySuccess?.(event, copyText);
+            } catch (error) {
+                console.error('Failed to copy:', error);
+                onCopyError?.(error, copyText);
+            }
+        }
+    }
     return (
         <div
             className={cx(
@@ -98,6 +129,13 @@ export function DisplayStats({
                         {supportingLabel}
                     </span>
                 )}
+                {copyText && (
+                    <div className="self-center">
+                        <ButtonUnstyled onClick={handleCopyClick}>
+                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                        </ButtonUnstyled>
+                    </div>
+                )}
             </div>
         </div>
     );

package/src/lib/components/molecules/input/Input.tsx

@@ -3,7 +3,8 @@
 
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
-import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
 import {
     BORDER_CLASSES,
     INPUT_CLASSES,
@@ -12,10 +13,10 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import { InputType } from './input.enums';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { Close, VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
-import { InputPropsByType, NumericFormatInputProps } from './input.types';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import type { InputPropsByType, NumericFormatInputProps } from './input.types';
 import { NumericFormat } from 'react-number-format';
 
 export interface BaseInputProps extends InputWrapperProps {

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
 

package/src/lib/components/molecules/input/TextArea.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { forwardRef, useEffect, useState } from 'react';
-import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
 import {
     BORDER_CLASSES,
     INPUT_CLASSES,
@@ -10,7 +11,7 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
 
 type TextAreaProps = Omit<

package/src/lib/components/molecules/input/input.types.ts

@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ComponentProps } from 'react';
-import { InputType } from '.';
-import { NumericFormat } from 'react-number-format';
+import type { ComponentProps } from 'react';
+import type { InputType } from '.';
+import type { NumericFormat } from 'react-number-format';
 
 type InputElementProps = Omit<
     React.ComponentProps<'input'>,

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -13,8 +13,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemHorizontal({
     icon,

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -9,8 +9,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemVertical({
     icon,

package/src/lib/components/molecules/search/Search.tsx

@@ -4,7 +4,8 @@
 import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
-import { Divider, SearchBarType } from '@/components';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
 import {
     BACKGROUND_COLORS,
     SUGGESTIONS_WRAPPER_STYLE,
@@ -43,10 +44,6 @@ export interface SearchProps {
      * Are the suggestions loading.
      */
     isLoading: boolean;
-    /**
-     * Callback when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * The type of the search bar. Can be 'outlined' or 'filled'.
      */
@@ -64,7 +61,6 @@ export function Search({
     onSuggestionClick,
     placeholder,
     isLoading = false,
-    onKeyDown,
     type = SearchBarType.Outlined,
     renderSuggestion,
 }: SearchProps): React.JSX.Element {
@@ -157,9 +153,6 @@ export function Search({
                 }
             }
         }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
     };
 
     return (