@iota/apps-ui-kit 0.0.0-dev-20251015065834

package/src/lib/components/atoms/toggle/Toggle.tsx

@@ -0,0 +1,140 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useRef } from 'react';
+import { ToggleLabelPosition, ToggleSize } from './toggle.enums';
+import {
+    TOGGLE,
+    TOGGLE_LABEL,
+    TOGGLE_SIZE,
+    TOGGLE_STATES,
+    TOGGLE_THUMB,
+    TOGGLE_THUMB_COLOR,
+    TOGGLE_THUMB_POSITION,
+    TOGGLE_THUMB_SIZE,
+    TOGGLE_CONTAINER,
+} from './toggle.classes';
+import cx from 'classnames';
+
+interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+    (
+        {
+            label,
+            isToggled,
+            labelPosition = ToggleLabelPosition.Right,
+            isDisabled = false,
+            onChange,
+            name,
+            size = ToggleSize.Default,
+            testId,
+        }: ToggleProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+            const newChecked = e.target.checked;
+            onChange?.(newChecked, e);
+        }
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        const toggleClasses = cx(TOGGLE, {
+            [TOGGLE_STATES.active]: isToggled && !isDisabled,
+            [TOGGLE_STATES.inactive]: !isToggled,
+            [TOGGLE_STATES.disabledActive]: isDisabled && isToggled,
+            [TOGGLE_STATES.disabled]: isDisabled,
+            [TOGGLE_SIZE[size]]: true,
+        });
+
+        const thumbClasses = cx(TOGGLE_THUMB, {
+            [TOGGLE_THUMB_POSITION[size].unchecked]: !isToggled,
+            [TOGGLE_THUMB_POSITION[size].checked]: isToggled,
+            [TOGGLE_THUMB_COLOR.unchecked]: !isToggled,
+            [TOGGLE_THUMB_COLOR.checked]: isToggled,
+            [TOGGLE_THUMB_SIZE[size]]: true,
+        });
+
+        const containerClasses = cx(TOGGLE_CONTAINER, {
+            'flex-row-reverse': labelPosition === ToggleLabelPosition.Left,
+            'cursor-not-allowed': isDisabled,
+        });
+        const labelClasses = cx(TOGGLE_LABEL, {
+            'opacity-40': isDisabled && !isToggled,
+        });
+
+        return (
+            <div className={containerClasses}>
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="sr-only"
+                    checked={isToggled}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={handleChange}
+                    data-testid={testId}
+                />
+
+                <span
+                    role="switch"
+                    onClick={() => inputRef.current?.click()}
+                    className={toggleClasses}
+                >
+                    <span className={thumbClasses} />
+                </span>
+
+                {label && (
+                    <label htmlFor={name} className={labelClasses}>
+                        {label}
+                    </label>
+                )}
+            </div>
+        );
+    },
+);

package/src/lib/components/atoms/toggle/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Toggle } from './Toggle';
+
+export * from './toggle.enums';

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ToggleSize } from './toggle.enums';
+
+export const TOGGLE = 'relative inline-flex items-center p-xxs border rounded-full cursor-pointer';
+
+export const TOGGLE_STATES = {
+    active: 'toggle-bg-active toggle-border-active',
+    inactive: 'toggle-bg-inactive toggle-border-inactive',
+    disabledActive: 'toggle-bg-disabled-active toggle-border-disabled-active',
+    disabled: 'opacity-40 cursor-not-allowed',
+};
+
+export const TOGGLE_SIZE = {
+    [ToggleSize.Small]: 'h-5 w-10',
+    [ToggleSize.Default]: 'h-6 w-12',
+};
+
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB_POSITION = {
+    [ToggleSize.Small]: {
+        unchecked: 'left-1',
+        checked: 'left-8 -translate-x-full',
+    },
+    [ToggleSize.Default]: {
+        unchecked: 'left-1',
+        checked: 'left-10 -translate-x-full',
+    },
+};
+export const TOGGLE_THUMB_COLOR = {
+    unchecked: 'toggle-thumb-color',
+    checked: 'toggle-thumb-color-checked',
+};
+export const TOGGLE_THUMB_SIZE = {
+    [ToggleSize.Small]: 'h-3 w-3',
+    [ToggleSize.Default]: 'h-4 w-4',
+};
+
+export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
+export const TOGGLE_LABEL = 'text-label-lg toggle-label-color';

package/src/lib/components/atoms/toggle/toggle.enums.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ToggleSize {
+    Small = 'small',
+    Default = 'default',
+}
+
+export enum ToggleLabelPosition {
+    Left = 'left',
+    Right = 'right',
+}

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

@@ -0,0 +1,139 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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';
+
+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>) {
+    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]);
+
+    // z-[9999999999]: needed because we must exceed the popup’s ≈2 147 483 647 z-index;
+    // otherwise the tooltip renders but stays invisible inside a Chrome extension
+    const base = 'z-[9999999999] w-max rounded p-xs tooltip-bg tooltip-text-color';
+
+    return (
+        <>
+            <div
+                ref={triggerRef}
+                className="inline-block cursor-pointer"
+                onMouseEnter={open}
+                onFocus={open}
+                onMouseLeave={close}
+                onBlur={close}
+            >
+                {children}
+            </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/atoms/tooltip/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Tooltip';
+export * from './tooltip.enums';

package/src/lib/components/atoms/tooltip/tooltip.classes.ts

@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TooltipPosition } from './tooltip.enums';
+
+export const TOOLTIP_POSITION: Record<TooltipPosition, string> = {
+    [TooltipPosition.Top]: 'bottom-full left-1/2 transform -translate-x-1/2 mb-1',
+    [TooltipPosition.Bottom]: 'top-full left-1/2 transform -translate-x-1/2 mt-1',
+    [TooltipPosition.Left]: 'top-1/2 right-full transform -translate-y-1/2 mr-1',
+    [TooltipPosition.Right]: 'top-1/2 left-full transform -translate-y-1/2 ml-1',
+};

package/src/lib/components/atoms/tooltip/tooltip.enums.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum TooltipPosition {
+    Top = 'top',
+    Bottom = 'bottom',
+    Left = 'left',
+    Right = 'right',
+}

package/src/lib/components/atoms/video/Video.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from 'react';
+import { VIDEO_AUTOPLAY_FLAGS, VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS } from './video.constants';
+
+export interface VideoProps {
+    /**
+     * Whether the video should autoplay.
+     */
+    isAutoPlayEnabled?: boolean;
+    /**
+     * If the video controls should be disabled.
+     */
+    disableControls?: boolean;
+}
+
+export const Video = forwardRef<
+    HTMLVideoElement,
+    React.ComponentPropsWithoutRef<'video'> & VideoProps
+>(({ width = '100%', height = 'auto', isAutoPlayEnabled, disableControls, ...props }, ref) => {
+    const videoProps = isAutoPlayEnabled
+        ? disableControls
+            ? VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS
+            : VIDEO_AUTOPLAY_FLAGS
+        : { preload: 'metadata', autoPlay: false };
+
+    return (
+        <video ref={ref} width={width} height={height} {...videoProps} {...props}>
+            Your browser does not support the video tag.
+        </video>
+    );
+});

package/src/lib/components/atoms/video/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Video';

package/src/lib/components/atoms/video/video.constants.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const VIDEO_AUTOPLAY_FLAGS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: true,
+    controlsList: 'nodownload',
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};
+
+export const VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: false,
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};

package/src/lib/components/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';

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

@@ -0,0 +1,195 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import type { BadgeType } from '@/components/atoms';
+import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
+import {
+    LockLocked,
+    LockUnlocked,
+    MoreHoriz,
+    CheckmarkFilled,
+    RadioOff,
+} from '@iota/apps-ui-icons';
+import { Address } from '../address';
+
+interface AccountProps {
+    /**
+     * The title of the account.
+     */
+    title: string;
+    /**
+     * The subtitle of the account.
+     */
+    subtitle: string;
+    /**
+     * Whether the account is unlocked.
+     */
+    isLocked?: boolean;
+    /**
+     * Handler for more options click.
+     */
+    onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for the lock account icon click.
+     */
+    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handle for the unlock account icon click.
+     */
+    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Function to render avatar content.
+     */
+    avatarContent: ({ isLocked }: { isLocked?: boolean }) => React.JSX.Element;
+    /**
+     * The onCopy event of the Address  (optional).
+     */
+    onCopy?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+    /**
+     * The account is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Show the selected checkbox.
+     */
+    showSelected?: boolean;
+    /**
+     * Show background if account active (optional).
+     */
+    isActive?: boolean;
+    /**
+     * The type of the badge.
+     */
+    badgeType?: BadgeType;
+    /**
+     * 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({
+    title,
+    subtitle,
+    badgeType,
+    badgeText,
+    isLocked,
+    avatarContent,
+    onOptionsClick,
+    onLockAccountClick,
+    onUnlockAccountClick,
+    onCopy,
+    copyText,
+    onOpen,
+    isCopyable,
+    isExternal,
+    isSelected,
+    isActive,
+    showSelected,
+    badgeTooltipText,
+    badgeTooltipPosition = TooltipPosition.Bottom,
+}: AccountProps): React.JSX.Element {
+    const Avatar = avatarContent;
+
+    return (
+        <div
+            className={cx(
+                'state-layer group relative flex w-full items-center justify-between space-x-3 rounded-xl px-sm py-xs hover:cursor-pointer',
+                isActive && 'state-active',
+                {
+                    'opacity-60': isLocked && showSelected,
+                },
+            )}
+        >
+            <div className="flex w-full items-center gap-x-3">
+                <div>
+                    <Avatar isLocked={isLocked} />
+                </div>
+                <div className="flex w-full min-w-0 flex-col items-start py-xs">
+                    <div className="flex w-full min-w-0 items-center space-x-2">
+                        <p className="account-title-color min-w-0 max-w-full truncate font-inter text-title-md">
+                            {title}
+                        </p>
+                        {badgeText && badgeType ? (
+                            badgeTooltipText ? (
+                                <Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
+                                    <Badge type={badgeType} label={badgeText} />
+                                </Tooltip>
+                            ) : (
+                                <Badge type={badgeType} label={badgeText} />
+                            )
+                        ) : null}
+                    </div>
+                    <Address
+                        text={subtitle}
+                        onCopySuccess={onCopy}
+                        copyText={copyText}
+                        onOpen={onOpen}
+                        isCopyable={isCopyable}
+                        isExternal={isExternal}
+                    />
+                </div>
+
+                <div className="ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
+                    <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:invisible group-hover:[&_button:not(.locked)]:visible">
+                        {onOptionsClick && (
+                            <ButtonUnstyled onClick={onOptionsClick}>
+                                <MoreHoriz />
+                            </ButtonUnstyled>
+                        )}
+                        {onLockAccountClick &&
+                            onUnlockAccountClick &&
+                            (isLocked ? (
+                                <div className="flex items-center">
+                                    <ButtonUnstyled
+                                        onClick={onUnlockAccountClick}
+                                        testId="account-unlock"
+                                        className="locked"
+                                    >
+                                        <LockLocked />
+                                    </ButtonUnstyled>
+                                </div>
+                            ) : (
+                                <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
+                                    <LockUnlocked />
+                                </ButtonUnstyled>
+                            ))}
+                    </div>
+                    {showSelected && (
+                        <ButtonUnstyled>
+                            {isSelected ? (
+                                <CheckmarkFilled className="account-check-active-color h-5 w-5" />
+                            ) : (
+                                <RadioOff className="account-check-inactive-color h-5 w-5" />
+                            )}
+                        </ButtonUnstyled>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/molecules/account/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Account } from './Account';