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

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -0,0 +1,124 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useEffect, useRef } from 'react';
+import cx from 'classnames';
+import { Dash, Checkmark } from '@iota/apps-ui-icons';
+
+interface CheckboxProps {
+    /**
+     * The label of the checkbox.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the checkbox.
+     */
+    isChecked?: boolean;
+    /**
+     * If true the checkbox will override the styles to show an indeterminate state.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the label should be placed before the checkbox.
+     */
+    isLabelFirst?: boolean;
+    /**
+     * If true the checkbox will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the checkbox is clicked.
+     */
+    onCheckedChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name of the checkbox.
+     */
+    name?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    (
+        {
+            isChecked,
+            isIndeterminate,
+            label,
+            isLabelFirst,
+            isDisabled,
+            onCheckedChange,
+            name,
+        }: CheckboxProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        useEffect(() => {
+            if (inputRef.current) {
+                inputRef.current.indeterminate = isIndeterminate ?? false;
+            }
+        }, [isIndeterminate, inputRef]);
+
+        const CheckmarkIcon = isIndeterminate ? Dash : Checkmark;
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        return (
+            <div
+                className={cx(
+                    'group inline-flex has-[:disabled]:opacity-40',
+                    isLabelFirst ? 'flex-row-reverse' : 'flex-row',
+                    {
+                        disabled: isDisabled,
+                        'gap-x-2': label,
+                    },
+                )}
+            >
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="peer hidden appearance-none"
+                    checked={isChecked}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={(e) => {
+                        onCheckedChange?.(e);
+                    }}
+                />
+                <span
+                    onClick={() => inputRef.current?.click()}
+                    className={cx(
+                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden',
+                        'checkbox-border-default',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-text-checked',
+                        'peer-disabled:peer-[&:not(:checked,:indeterminate)]:checkbox-border-color-disabled',
+                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-border-color-disabled-checked',
+                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-bg-color-disabled-checked',
+                    )}
+                >
+                    <CheckmarkIcon />
+                </span>
+
+                <LabelText label={label} name={name} />
+            </div>
+        );
+    },
+);
+
+function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
+    return (
+        <label htmlFor={name} className="checkbox-label checkbox-label-disabled">
+            {label}
+        </label>
+    );
+}

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

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

package/src/lib/components/atoms/divider/Divider.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DividerType } from './divider.enums';
+import cx from 'classnames';
+import { BACKGROUND_COLORS, DIVIDER_FULL_WIDTH } from './divider.classes';
+
+const DEFAULT_LINE_HEIGHT = '1px';
+
+interface DividerProps {
+    /**
+     * The type of the divider
+     */
+    type?: DividerType;
+    /**
+     * The width of the divider.
+     */
+    width?: string;
+    /**
+     * The height of the divider.
+     */
+    height?: string;
+    /**
+     * The line height of the divider.
+     */
+    lineHeight?: string;
+}
+
+export function Divider({
+    type = DividerType.Horizontal,
+    width,
+    height,
+    lineHeight = DEFAULT_LINE_HEIGHT,
+}: DividerProps): React.JSX.Element {
+    // Set height and width of divider line based on type
+    const lineStyle = {
+        ...(type === DividerType.Horizontal ? { height: lineHeight } : { width: lineHeight }),
+    };
+
+    let dividerSize = DIVIDER_FULL_WIDTH[type];
+    if (width && type === DividerType.Horizontal) {
+        dividerSize = width;
+    } else if (height && type === DividerType.Vertical) {
+        dividerSize = height;
+    }
+
+    return <div className={cx(BACKGROUND_COLORS, dividerSize)} style={lineStyle} />;
+}

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

@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DividerType } from './divider.enums';
+
+export const BACKGROUND_COLORS = 'divider-bg-color';
+
+export const DIVIDER_FULL_WIDTH: Record<DividerType, string> = {
+    [DividerType.Horizontal]: 'w-full',
+    [DividerType.Vertical]: 'h-full',
+};

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

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum DividerType {
+    Vertical = 'vertical',
+    Horizontal = 'horizontal',
+}

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

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

package/src/lib/components/atoms/header/Header.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Button, ButtonSize, ButtonType } from '../button';
+import { ArrowBack, Close } from '@iota/apps-ui-icons';
+
+interface HeaderProps {
+    /**
+     * Header title.
+     */
+    title: string;
+    /**
+     * Title alignment (optional).
+     */
+    titleCentered?: boolean;
+    /**
+     * On back click handler (optional). If provided, a back button will be displayed.
+     */
+    onBack?: () => void;
+    /**
+     * On close click handler (optional). If provided, a close button will be displayed.
+     */
+    onClose?: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function Header({
+    title,
+    titleCentered,
+    onBack,
+    onClose,
+    testId,
+}: HeaderProps): JSX.Element {
+    const titleCenteredClasses = titleCentered ? 'text-center' : onBack ? 'ml-1' : '';
+    const keepSpaceForIcon = titleCentered && (!onBack || !onClose);
+
+    return (
+        <div className="header-bg-color header-text-color flex min-h-[56px] w-full items-center px-md--rs pb-xs pt-sm [&_svg]:h-5 [&_svg]:w-5">
+            {onBack ? (
+                <Button
+                    size={ButtonSize.Small}
+                    type={ButtonType.Ghost}
+                    onClick={onBack}
+                    icon={<ArrowBack />}
+                />
+            ) : (
+                keepSpaceForIcon && <div className="w-9" />
+            )}
+
+            <div className={cx('flex-grow', titleCenteredClasses)}>
+                <span className="font-inter text-title-lg" data-testid={testId}>
+                    {title}
+                </span>
+            </div>
+
+            {onClose ? (
+                <Button
+                    size={ButtonSize.Small}
+                    type={ButtonType.Ghost}
+                    onClick={onClose}
+                    icon={<Close />}
+                    testId={`close-icon`}
+                />
+            ) : (
+                keepSpaceForIcon && <div className="w-9" />
+            )}
+        </div>
+    );
+}

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

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

package/src/lib/components/atoms/image/Image.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useState } from 'react';
+import { MediaFallback } from '../media-fallback';
+
+export interface ImageWithFallbackProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    renderFallback?: React.ReactNode;
+}
+
+export const ImageWithFallback = forwardRef<HTMLImageElement, ImageWithFallbackProps>(
+    ({ onError, renderFallback: fallback, ...imageProps }, ref) => {
+        const [imageError, setImageError] = useState(false);
+
+        function handleImageError(error: React.SyntheticEvent<HTMLImageElement, Event>) {
+            setImageError(true);
+            onError?.(error);
+        }
+
+        if (imageError || !imageProps.src) {
+            return fallback ? fallback : <MediaFallback />;
+        }
+
+        return <Image onError={handleImageError} ref={ref} {...imageProps} />;
+    },
+);
+
+export const Image = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+    (imageProps, ref) => {
+        return <img className="h-full w-full object-cover" ref={ref} {...imageProps} />;
+    },
+);

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

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

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

@@ -0,0 +1,26 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './badge';
+export * from './button';
+export * from './radio-button';
+export * from './button-segment';
+export * from './button';
+export * from './checkbox';
+export * from './divider';
+export * from './key-value-info';
+export * from './label-text';
+export * from './list-item';
+export * from './header';
+export * from './panel';
+export * from './media-fallback';
+export * from './image';
+export * from './tooltip';
+export * from './info-box';
+export * from './snackbar';
+export * from './loading-indicator';
+export * from './placeholder';
+export * from './skeleton';
+export * from './video';
+export * from './toggle';
+export * from './secondary-text';

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

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import type { InfoBoxType } from './infoBox.enums';
+import { InfoBoxStyle } from './infoBox.enums';
+import { BACKGROUND_COLORS, ICON_COLORS } from './infoBox.classes';
+
+export interface InfoBoxProps {
+    /**
+     * The icon of the info box (optional).
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title of the info box (optional).
+     */
+    title?: string;
+    /**
+     * The supporting text of the info box (optional).
+     */
+    supportingText?: React.ReactNode;
+    /**
+     * The type of the info box.
+     */
+    type: InfoBoxType;
+    /**
+     * The style of the info box.
+     */
+    style?: InfoBoxStyle;
+}
+
+export function InfoBox({
+    icon,
+    title,
+    supportingText,
+    type,
+    style,
+}: InfoBoxProps): React.JSX.Element {
+    const iconColorClass = ICON_COLORS[type];
+    const backgroundClass = style === InfoBoxStyle.Elevated ? BACKGROUND_COLORS[type] : '';
+    return (
+        <div
+            className={cx('flex flex-row items-start gap-4 py-xs pr-lg', backgroundClass, {
+                'rounded-lg pl-xs': style === InfoBoxStyle.Elevated,
+            })}
+        >
+            {icon && (
+                <span
+                    className={cx(
+                        'flex items-center justify-center rounded-lg [&_svg]:h-4 [&_svg]:w-4',
+                        iconColorClass,
+                        {
+                            'p-xs': style === InfoBoxStyle.Default,
+                        },
+                    )}
+                >
+                    {icon}
+                </span>
+            )}
+            <div className="flex flex-col gap-1">
+                {title && <span className="infobox-text-title text-title-sm">{title}</span>}
+                {supportingText && (
+                    <span className="infobox-supporting-text text-body-sm">{supportingText}</span>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/info-box/index.ts

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

package/src/lib/components/atoms/info-box/infoBox.classes.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { InfoBoxType } from './infoBox.enums';
+
+export const ICON_COLORS: Record<InfoBoxType, string> = {
+    [InfoBoxType.Default]: 'bg-default-surface text-on-default',
+    [InfoBoxType.Error]: 'bg-error-surface text-on-error',
+    [InfoBoxType.Success]: 'bg-success-surface text-on-success',
+    [InfoBoxType.Warning]: 'bg-warning-surface text-on-warning',
+};
+
+export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
+    [InfoBoxType.Default]: 'bg-default-surface',
+    [InfoBoxType.Error]: 'bg-error-surface',
+    [InfoBoxType.Success]: 'bg-success-surface',
+    [InfoBoxType.Warning]: 'bg-warning-surface',
+};

package/src/lib/components/atoms/info-box/infoBox.enums.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum InfoBoxType {
+    Default = 'default',
+    Error = 'error',
+    Success = 'success',
+    Warning = 'warning',
+}
+
+export enum InfoBoxStyle {
+    Default = 'default',
+    Elevated = 'elevated',
+}

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

@@ -0,0 +1,157 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Copy, Info } from '@iota/apps-ui-icons';
+import { ValueSize } from './keyValue.enums';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
+import { ButtonUnstyled } from '../button';
+
+interface KeyValueProps {
+    /**
+     * The key of the KeyValue.
+     */
+    keyText: string;
+    /**
+     * The value of the KeyValue.
+     */
+    value: ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * The supporting label of the KeyValue (optional).
+     */
+    supportingLabel?: string;
+    /**
+     * The size of the value (optional).
+     */
+    size?: ValueSize;
+    /**
+     * The flag to truncate the value text.
+     */
+    isTruncated?: boolean;
+    /**
+     * 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;
+    /**
+     * Full width KeyValue (optional).
+     */
+    fullwidth?: boolean;
+    /**
+     * Reverse the KeyValue (optional).
+     */
+    isReverse?: boolean;
+    /**
+     * Text shown on value hover.
+     */
+    valueHoverTitle?: string;
+}
+
+export function KeyValueInfo({
+    keyText,
+    value,
+    tooltipPosition,
+    tooltipText,
+    supportingLabel,
+    size = ValueSize.Small,
+    isTruncated = false,
+    copyText,
+    onCopySuccess,
+    onCopyError,
+    fullwidth,
+    isReverse = false,
+    valueHoverTitle,
+}: KeyValueProps): React.JSX.Element {
+    const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
+    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(
+                'flex w-full items-baseline gap-xs py-xxs font-inter',
+                flexDirectionClass,
+                {
+                    'justify-between': fullwidth,
+                },
+            )}
+        >
+            <div
+                className={cx('flex shrink-0 flex-row items-center gap-x-0.5', {
+                    'w-1/4': !fullwidth,
+                })}
+            >
+                <span className="key-value-key-text-color text-body-md">{keyText}</span>
+                {tooltipText && (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        <Info className="key-supporting-text-color" />
+                    </Tooltip>
+                )}
+            </div>
+            <div
+                className={cx('flex flex-row items-baseline gap-1 break-all', {
+                    'w-3/4': !fullwidth,
+                    truncate: isTruncated,
+                })}
+            >
+                <span
+                    title={valueHoverTitle}
+                    className={cx(
+                        'key-value-hover-text-color',
+                        size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',
+                        { truncate: isTruncated },
+                    )}
+                >
+                    {value}
+                </span>
+                {supportingLabel && (
+                    <span
+                        className={cx(
+                            'key-supporting-text-color',
+                            size === ValueSize.Medium ? 'text-body-md' : 'text-body-sm',
+                        )}
+                    >
+                        {supportingLabel}
+                    </span>
+                )}
+                <div className="self-center">
+                    {copyText && (
+                        <ButtonUnstyled onClick={handleCopyClick}>
+                            <Copy className="key-supporting-text-color" />
+                        </ButtonUnstyled>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/key-value-info/index.ts

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

package/src/lib/components/atoms/key-value-info/keyValue.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ValueSize {
+    Small = 'small',
+    Medium = 'medium',
+}