@iota/apps-ui-kit 0.0.0-experimental-20250613144451

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

@@ -0,0 +1,114 @@
+// 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', 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="peer-enabled:state-layer relative inset-0 flex h-5 w-5 items-center justify-center rounded border border-neutral-80 text-neutral-40 group-[.disabled]:cursor-not-allowed peer-disabled:text-neutral-70 peer-disabled:text-opacity-40 peer-disabled:opacity-40 peer-[&:is(:checked,:indeterminate)]:border-primary-30 peer-[&:is(:checked,:indeterminate)]:bg-primary-30 peer-[&:is(:checked,:indeterminate)]:text-white peer-[&:not(:checked,:indeterminate)]:text-opacity-40 disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-70 dark:border-neutral-20 dark:text-neutral-60 dark:peer-disabled:text-neutral-30 dark:peer-disabled:text-opacity-40 dark:peer-disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-30 dark:peer-disabled:peer-[&:is(:checked,:indeterminate)]:bg-neutral-40 peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-60 peer-disabled:[&:is(:checked,:indeterminate)]:bg-neutral-60 dark:peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-40 [&_svg]:h-4 [&_svg]:w-4 peer-[&:not(:checked,:indeterminate)]:[&_svg]:hidden"
+                >
+                    <CheckmarkIcon />
+                </span>
+
+                <LabelText label={label} name={name} />
+            </div>
+        );
+    },
+);
+
+function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
+    return (
+        <label
+            htmlFor={name}
+            className="text-label-lg text-neutral-40 group-[.disabled]:cursor-not-allowed group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40"
+        >
+            {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 = 'bg-shader-neutral-light-8 dark:bg-shader-neutral-dark-8';
+
+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="flex min-h-[56px] w-full items-center bg-neutral-100 px-md--rs pb-xs pt-sm text-neutral-10 dark:bg-neutral-6 dark:text-neutral-92 [&_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/index.ts

@@ -0,0 +1,23 @@
+// 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 './tooltip';
+export * from './info-box';
+export * from './snackbar';
+export * from './visual-asset-card';
+export * from './loading-indicator';
+export * from './placeholder';
+export * from './skeleton';
+export * from './toggle';

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

@@ -0,0 +1,74 @@
+// 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="text-title-sm text-neutral-10 dark:text-neutral-92">
+                        {title}
+                    </span>
+                )}
+                {supportingText && (
+                    <span className="text-body-sm text-neutral-40 dark:text-neutral-60">
+                        {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,19 @@
+// 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-primary-90 dark:bg-primary-10 text-primary-20 dark:text-primary-90',
+    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10 text-error-20 dark:text-error-90',
+    [InfoBoxType.Success]:
+        'bg-tertiary-90 dark:bg-tertiary-10 text-tertiary-20 dark:text-tertiary-90',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20 text-warning-10 dark:text-warning-90',
+};
+
+export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
+    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10',
+    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10',
+    [InfoBoxType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+};

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="text-body-md text-neutral-40 dark:text-neutral-60">{keyText}</span>
+                {tooltipText && (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        <Info className="text-neutral-60 dark:text-neutral-40" />
+                    </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(
+                        'text-neutral-10 dark:text-neutral-92',
+                        size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',
+                        { truncate: isTruncated },
+                    )}
+                >
+                    {value}
+                </span>
+                {supportingLabel && (
+                    <span
+                        className={cx(
+                            'text-neutral-60 dark:text-neutral-40',
+                            size === ValueSize.Medium ? 'text-body-md' : 'text-body-sm',
+                        )}
+                    >
+                        {supportingLabel}
+                    </span>
+                )}
+                <div className="self-center">
+                    {copyText && (
+                        <ButtonUnstyled onClick={handleCopyClick}>
+                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                        </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',
+}

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

@@ -0,0 +1,94 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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 type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
+
+interface LabelTextProps {
+    /**
+     * The size of the LabelText.
+     */
+    size?: LabelTextSize;
+    /**
+     * The position of the LabelText.
+     */
+    isCentered?: boolean;
+    /**
+     * The supporting label of the LabelText.
+     */
+    supportingLabel?: string;
+    /**
+     * The text of the LabelText.
+     */
+    label: string;
+    /**
+     * The text of the LabelText.
+     */
+    text: string;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+}
+
+export function LabelText({
+    size = LabelTextSize.Medium,
+    isCentered,
+    supportingLabel,
+    label,
+    text,
+    tooltipPosition,
+    tooltipText,
+}: LabelTextProps): React.JSX.Element {
+    const textClasses = TEXT_SIZE[size];
+    const supportingLabelClasses = SUPPORTING_TEXT_SIZE[size];
+    const labelTextClasses = LABEL_TEXT_SIZE[size];
+    const centeredClasses = isCentered ? 'items-center' : 'items-start';
+    const gapClass = size === LabelTextSize.Small ? 'gap-0.5' : 'gap-1';
+    return (
+        <div className={cx('flex flex-col', centeredClasses, gapClass)}>
+            <div className="flex flex-row flex-wrap items-center gap-0.5">
+                <span
+                    className={cx('font-inter text-neutral-10 dark:text-neutral-92', textClasses)}
+                >
+                    {text}
+                </span>
+                {supportingLabel && (
+                    <span
+                        className={cx(
+                            'font-inter text-neutral-60 dark:text-neutral-40',
+                            supportingLabelClasses,
+                        )}
+                    >
+                        {supportingLabel}
+                    </span>
+                )}
+            </div>
+            <div className="flex flex-row items-center gap-x-0.5">
+                <span
+                    className={cx(
+                        'flex items-center font-inter text-neutral-60 dark:text-neutral-40',
+                        labelTextClasses,
+                    )}
+                >
+                    {label}
+                    {tooltipText && (
+                        <div className="ml-xxxs flex items-center">
+                            <Tooltip text={tooltipText} position={tooltipPosition}>
+                                <Info className="text-neutral-60 dark:text-neutral-40" />
+                            </Tooltip>
+                        </div>
+                    )}
+                </span>
+            </div>
+        </div>
+    );
+}