@iota/apps-ui-kit 0.2.0 → 0.2.1

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,22 @@
+// 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';

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

@@ -0,0 +1,73 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { InfoBoxStyle, InfoBoxType } 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?: string;
+    /**
+     * 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,14 @@
+// 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-neutral-96 dark:bg-neutral-12 text-neutral-10 dark:text-neutral-92',
+    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10 text-error-20 dark:text-error-90',
+};
+
+export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
+    [InfoBoxType.Default]: 'bg-neutral-96 dark:bg-neutral-12',
+    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10',
+};

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

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

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

@@ -0,0 +1,156 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { 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 { 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,93 @@
+// 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 { TooltipPosition, 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>
+    );
+}

package/src/lib/components/atoms/label-text/index.ts

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

package/src/lib/components/atoms/label-text/labelText.classes.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { LabelTextSize } from './labelText.enums';
+
+export const TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-title-sm',
+    [LabelTextSize.Medium]: 'text-title-md',
+    [LabelTextSize.Large]: 'text-title-lg',
+};
+
+export const SUPPORTING_TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-label-md',
+    [LabelTextSize.Medium]: 'text-label-md',
+    [LabelTextSize.Large]: 'text-label-lg',
+};
+
+export const LABEL_TEXT_SIZE = {
+    [LabelTextSize.Small]: 'text-label-md',
+    [LabelTextSize.Medium]: 'text-label-md',
+    [LabelTextSize.Large]: 'text-label-lg',
+};

package/src/lib/components/atoms/label-text/labelText.enums.ts

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

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

@@ -0,0 +1,89 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowRight } from '@iota/apps-ui-icons';
+import { Button, ButtonSize, ButtonType } from '@/components';
+
+export interface ListItemProps {
+    /**
+     * Has right icon (optional).
+     */
+    showRightIcon?: boolean;
+    /**
+     * Hide bottom border (optional).
+     */
+    hideBottomBorder?: boolean;
+    /**
+     * On click handler (optional).
+     */
+    onClick?: () => void;
+    /**
+     * The list item is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list item is highlighted.
+     */
+    isHighlighted?: boolean;
+}
+
+export function ListItem({
+    showRightIcon,
+    hideBottomBorder,
+    onClick,
+    isDisabled,
+    children,
+    isHighlighted,
+}: PropsWithChildren<ListItemProps>): React.JSX.Element {
+    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+        if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    function handleClick() {
+        if (!isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    return (
+        <div
+            className={cx(
+                'w-full',
+                {
+                    'border-b border-shader-neutral-light-8 pb-xs dark:border-shader-neutral-dark-8':
+                        !hideBottomBorder,
+                },
+                { 'opacity-40': isDisabled },
+            )}
+        >
+            <div
+                onClick={handleClick}
+                role="button"
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+                className={cx(
+                    'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92',
+                    !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
+                    {
+                        'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted,
+                        'state-layer': !isDisabled,
+                    },
+                )}
+            >
+                {children}
+                {showRightIcon && (
+                    <Button
+                        size={ButtonSize.Small}
+                        type={ButtonType.Ghost}
+                        disabled={isDisabled}
+                        icon={<ArrowRight />}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/list-item/index.ts

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

package/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Loader } from '@iota/apps-ui-icons';
+
+export interface LoadingIndicatorProps {
+    /**
+     * The color of the loading indicator.
+     */
+    color?: string;
+    /**
+     * The size of the loading indicator.
+     */
+    size?: string;
+    /**
+     * The text to display next to the loading indicator.
+     */
+    text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function LoadingIndicator({
+    color = 'text-primary-30 dark:text-primary-80',
+    size = 'w-5 h-5',
+    text,
+    testId,
+}: LoadingIndicatorProps): React.JSX.Element {
+    return (
+        <div className="flex items-center justify-center gap-xs">
+            <Loader className={cx('animate-spin', color, size)} data-testid={testId} />
+            {text && <span className={cx('text-body-sm', color)}>{text}</span>}
+        </div>
+    );
+}

package/src/lib/components/atoms/loading-indicator/index.ts

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