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

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

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Copy, ArrowTopRight } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '@/components/atoms/button';
+
+interface AddressProps {
+    /**
+     * The text of the address.
+     */
+    text: string;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+
+    /**
+     * The link for external resource (optional).
+     */
+    externalLink?: string;
+
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the Address  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the Address  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function Address({
+    text,
+    isCopyable,
+    isExternal,
+    externalLink,
+    copyText = text,
+    onCopySuccess,
+    onCopyError,
+    onOpen,
+}: AddressProps): React.JSX.Element {
+    async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (!navigator.clipboard) {
+            return;
+        }
+
+        event?.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(copyText);
+            onCopySuccess?.(event, copyText);
+        } catch (error) {
+            console.error('Failed to copy:', error);
+            onCopyError?.(error, copyText);
+        }
+    }
+
+    function handleOpenClick(event: React.MouseEvent<HTMLButtonElement>) {
+        event?.stopPropagation();
+        if (externalLink) {
+            const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
+            if (newWindow) newWindow.opener = null;
+        } else {
+            onOpen?.(event);
+        }
+    }
+
+    return (
+        <div className="address-text-color group flex flex-row items-center gap-1">
+            <span className={cx('font-inter text-body-sm')}>{text}</span>
+            {isCopyable && (
+                <ButtonUnstyled
+                    onClick={handleCopyClick}
+                    className="opacity-0 group-hover:opacity-100"
+                >
+                    <Copy />
+                </ButtonUnstyled>
+            )}
+            {isExternal && (
+                <ButtonUnstyled
+                    onClick={handleOpenClick}
+                    className="opacity-0 group-hover:opacity-100"
+                >
+                    <ArrowTopRight />
+                </ButtonUnstyled>
+            )}
+        </div>
+    );
+}

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

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

package/src/lib/components/molecules/asset-media-renderer/AssetMediaRenderer.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { VisualAssetType } from '../visual-asset-card/visualAssetCard.enums';
+import { Video, ImageWithFallback, Image } from '../../atoms';
+import type { VideoProps } from '../../atoms';
+
+export interface AssetMediaRendererProps extends VideoProps {
+    /**
+     * The source of the media to be displayed.
+     */
+    src: string;
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType: VisualAssetType;
+    /**
+     * Alt text for the image..
+     */
+    altText?: string;
+    /**
+     * Whether to show a fallback image if the main image fails to load.
+     */
+    showFallback?: boolean;
+}
+
+export function AssetMediaRenderer({
+    src,
+    isAutoPlayEnabled,
+    assetType,
+    altText: alt,
+    showFallback,
+    disableControls,
+}: AssetMediaRendererProps): React.JSX.Element {
+    if (assetType === VisualAssetType.Video) {
+        return (
+            <Video
+                src={src}
+                isAutoPlayEnabled={isAutoPlayEnabled}
+                disableControls={disableControls}
+            />
+        );
+    }
+
+    if (showFallback) {
+        return <ImageWithFallback src={src} alt={alt} />;
+    }
+
+    return <Image src={src} alt={alt} />;
+}

package/src/lib/components/molecules/asset-media-renderer/index.ts

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

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

@@ -0,0 +1,70 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { CARD_DISABLED_CLASSES, CARD_TYPE_CLASSES } from './card.classes';
+import { CardType } from './card.enums';
+
+export interface CardProps {
+    /**
+     * If `true`, the card will be disabled.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * Handler on click to the card.
+     */
+    onClick?: () => void;
+
+    /**
+     * UI variant of the card.
+     */
+    type?: CardType;
+
+    /**
+     * Passing composable Card components like: CardImage, CardText, CardAction.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * Indicates whether the state-layer should be shown on the card anyway.
+     * Use case: When the card is wrapped with a Link component
+     */
+    isHoverable?: boolean;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function Card({
+    isDisabled = false,
+    type = CardType.Default,
+    isHoverable,
+    onClick,
+    children,
+    testId,
+}: CardProps) {
+    function handleOnClick() {
+        if (!isDisabled) {
+            onClick?.();
+        }
+    }
+    return (
+        <div
+            onClick={handleOnClick}
+            className={cx(
+                'relative inline-flex w-full items-center gap-3 rounded-xl px-sm py-xs',
+                CARD_TYPE_CLASSES[type],
+                {
+                    'state-layer': isHoverable || (!isDisabled && onClick),
+                    [CARD_DISABLED_CLASSES]: isDisabled,
+                    'cursor-pointer': onClick,
+                },
+            )}
+            data-testid={testId}
+        >
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,78 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ArrowRight } from '@iota/apps-ui-icons';
+import { CardActionType } from './card.enums';
+import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
+
+export type CardActionProps = {
+    title?: string;
+    subtitle?: string;
+    type: CardActionType;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    iconAfterText?: boolean;
+    buttonType?: ButtonType;
+    buttonDisabled?: boolean;
+};
+
+export function CardAction({
+    type,
+    onClick,
+    subtitle,
+    title,
+    icon,
+    iconAfterText,
+    buttonType,
+    buttonDisabled,
+}: CardActionProps) {
+    function handleActionClick(event: React.MouseEvent) {
+        if (onClick) {
+            event.stopPropagation();
+            onClick();
+        }
+    }
+
+    if (type === CardActionType.Link) {
+        return (
+            <div
+                onClick={handleActionClick}
+                className="card-action-link-color shrink-0 [&_svg]:h-5 [&_svg]:w-5"
+            >
+                {icon ? icon : <ArrowRight />}
+            </div>
+        );
+    }
+
+    if (type === CardActionType.SupportingText) {
+        return (
+            <div className="shrink-0 text-right">
+                {title && (
+                    <div className="card-action-title-color font-inter text-label-md">{title}</div>
+                )}
+                {subtitle && (
+                    <div className="card-action-subtitle-color font-inter text-label-sm">
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+        );
+    }
+    if (type === CardActionType.Button) {
+        return (
+            <div className="shrink-0">
+                <Button
+                    type={buttonType || ButtonType.Outlined}
+                    size={ButtonSize.Small}
+                    text={title}
+                    onClick={handleActionClick}
+                    icon={icon}
+                    iconAfterText={iconAfterText}
+                    disabled={buttonDisabled}
+                />
+            </div>
+        );
+    }
+
+    return null;
+}

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

@@ -0,0 +1,73 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import { Tooltip } from '@/components/atoms/tooltip';
+import type { TooltipPosition } from '@/components/atoms/tooltip';
+
+export type CardBodyProps = {
+    title: string;
+    subtitle?: string | ReactNode;
+    clickableAction?: React.ReactNode;
+    icon?: React.ReactNode;
+    isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
+};
+
+export function CardBody({
+    title,
+    subtitle,
+    clickableAction,
+    icon,
+    isTextTruncated,
+    tooltipText,
+    tooltipPosition,
+}: CardBodyProps) {
+    const handleActionCardBodyClick = (event: React.MouseEvent) => {
+        event?.stopPropagation();
+    };
+    return (
+        <div
+            className={cx('flex w-full flex-col', {
+                truncate: isTextTruncated,
+            })}
+        >
+            <div
+                className={cx('flex flex-row items-center gap-x-xxs', {
+                    'grow-1': isTextTruncated,
+                })}
+            >
+                <div
+                    className={cx('card-body-title-color font-inter text-title-md', {
+                        truncate: isTextTruncated,
+                    })}
+                >
+                    {title}
+                </div>
+
+                {tooltipText ? (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        {icon}
+                    </Tooltip>
+                ) : (
+                    <div className="flex items-center">{icon}</div>
+                )}
+                {clickableAction && (
+                    <div onClick={handleActionCardBodyClick} className="flex items-center">
+                        {clickableAction}
+                    </div>
+                )}
+            </div>
+            {subtitle && (
+                <div
+                    className={cx('card-body-subtitle-color font-inter text-body-md', {
+                        truncate: isTextTruncated,
+                    })}
+                >
+                    {subtitle}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,43 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { ImageType, ImageShape } from './card.enums';
+import { IMAGE_BG_CLASSES, IMAGE_VARIANT_CLASSES } from './card.classes';
+import { CardImagePlaceholder } from './CardImagePlaceholder';
+
+export interface CardImageProps {
+    type?: ImageType;
+    shape?: ImageShape;
+    url?: string;
+    children?: React.ReactNode;
+}
+
+export function CardImage({
+    type = ImageType.BgSolid,
+    shape = ImageShape.Rounded,
+    url,
+    children,
+}: CardImageProps) {
+    return (
+        <div
+            className={cx(
+                IMAGE_VARIANT_CLASSES[shape],
+                IMAGE_BG_CLASSES[type],
+                'flex shrink-0 items-center justify-center  overflow-hidden',
+            )}
+        >
+            {type === ImageType.Placeholder && !children && (
+                <CardImagePlaceholder variant={shape} />
+            )}
+            {url && !children && (
+                <img
+                    src={url}
+                    className={cx(IMAGE_VARIANT_CLASSES[shape], 'object-cover')}
+                    alt="Card Image"
+                />
+            )}
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,146 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { ImageShape } from './card.enums';
+
+export interface ImagePlaceholderProps {
+    /**
+     * The variant of the image placeholder.
+     */
+    variant?: ImageShape;
+}
+
+export function CardImagePlaceholder({ variant = ImageShape.Rounded }: ImagePlaceholderProps) {
+    if (variant === ImageShape.Rounded) {
+        return <ImagePlaceholderRounded />;
+    }
+
+    return <ImagePlaceholderSquareRounded />;
+}
+
+function ImagePlaceholderRounded() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+        >
+            <g clip-path="url(#clip0_880_55185)">
+                <path
+                    d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                    fill="#5B9CFE"
+                />
+                <path
+                    d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                    fill="url(#paint0_linear_880_55185)"
+                    fill-opacity="0.2"
+                />
+                <path
+                    d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                    fill="url(#paint1_linear_880_55185)"
+                    fill-opacity="0.2"
+                />
+                <path
+                    d="M0.5 20C0.5 9.23045 9.23045 0.5 20 0.5C30.7696 0.5 39.5 9.23045 39.5 20C39.5 30.7696 30.7696 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20Z"
+                    stroke="#002F6D"
+                    stroke-opacity="0.08"
+                />
+            </g>
+            <defs>
+                <linearGradient
+                    id="paint0_linear_880_55185"
+                    x1="20"
+                    y1="0"
+                    x2="29.5238"
+                    y2="22.381"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.990135" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+                <linearGradient
+                    id="paint1_linear_880_55185"
+                    x1="20"
+                    y1="0"
+                    x2="11.4286"
+                    y2="9.04762"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.9999" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+                <clipPath id="clip0_880_55185">
+                    <path
+                        d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                        fill="white"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+function ImagePlaceholderSquareRounded() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+        >
+            <g clip-path="url(#clip0_880_55190)">
+                <path
+                    d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
+                    fill="#5B9CFE"
+                />
+                <path
+                    d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
+                    fill="url(#paint0_linear_880_55190)"
+                    fill-opacity="0.2"
+                />
+                <path
+                    d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
+                    fill="url(#paint1_linear_880_55190)"
+                    fill-opacity="0.2"
+                />
+                <path
+                    d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8Z"
+                    stroke="#002F6D"
+                    stroke-opacity="0.08"
+                />
+            </g>
+            <defs>
+                <linearGradient
+                    id="paint0_linear_880_55190"
+                    x1="20"
+                    y1="0"
+                    x2="29.5238"
+                    y2="22.381"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.990135" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+                <linearGradient
+                    id="paint1_linear_880_55190"
+                    x1="20"
+                    y1="0"
+                    x2="11.4286"
+                    y2="9.04762"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.9999" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+                <clipPath id="clip0_880_55190">
+                    <path
+                        d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
+                        fill="white"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}

package/src/lib/components/molecules/card/card.classes.ts

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { CardType, ImageType, ImageShape } from './card.enums';
+
+export const CARD_DISABLED_CLASSES = `cursor-default opacity-40`;
+
+export const IMAGE_SIZE = 'h-10 w-10';
+
+export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
+    [ImageShape.SquareRounded]: `${IMAGE_SIZE} rounded-md`,
+    [ImageShape.Rounded]: `${IMAGE_SIZE} rounded-full`,
+};
+
+export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
+    [ImageType.Placeholder]: '',
+    [ImageType.BgSolid]: 'card-image-bg-solid',
+    [ImageType.BgWhite]: 'card-image-bg-white',
+    [ImageType.BgTransparent]: '',
+};
+
+export const CARD_TYPE_CLASSES: Record<CardType, string> = {
+    [CardType.Default]: 'border border-transparent',
+    [CardType.Outlined]:
+        'border border-shader-neutral-light-8 dark:border-shader-primary-dark-8 p-xs',
+    [CardType.Filled]: 'border border-transparent card-filled-bg p-xs',
+};

package/src/lib/components/molecules/card/card.enums.ts

@@ -0,0 +1,26 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum CardType {
+    Default = 'default',
+    Outlined = 'outlined',
+    Filled = 'filled',
+}
+
+export enum ImageType {
+    Placeholder = 'placeholder',
+    BgSolid = 'bg-solid',
+    BgWhite = 'bg-white',
+    BgTransparent = 'bg-transparent',
+}
+
+export enum ImageShape {
+    Rounded = 'rounded',
+    SquareRounded = 'square-rounded',
+}
+
+export enum CardActionType {
+    Link = 'link',
+    SupportingText = 'supporting-text',
+    Button = 'button',
+}

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Card';
+export * from './CardAction';
+export * from './CardImage';
+export * from './CardBody';
+export * from './card.enums';