@iota/apps-ui-kit 0.2.0 → 0.3.0

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

@@ -0,0 +1,174 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { ButtonUnstyled } from '../../atoms/button';
+import { Badge, BadgeType } from '../../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;
+}
+
+export function Account({
+    title,
+    subtitle,
+    badgeType,
+    badgeText,
+    isLocked,
+    avatarContent,
+    onOptionsClick,
+    onLockAccountClick,
+    onUnlockAccountClick,
+    onCopy,
+    copyText,
+    onOpen,
+    isCopyable,
+    isExternal,
+    isSelected,
+    isActive,
+    showSelected,
+}: 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 items-center space-x-3">
+                <Avatar isLocked={isLocked} />
+                <div className="flex flex-col items-start py-xs">
+                    <div className="flex items-center space-x-2">
+                        <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
+                            {title}
+                        </span>
+                        {badgeType && badgeText && <Badge type={badgeType} label={badgeText} />}
+                    </div>
+                    <Address
+                        text={subtitle}
+                        onCopySuccess={onCopy}
+                        copyText={copyText}
+                        onOpen={onOpen}
+                        isCopyable={isCopyable}
+                        isExternal={isExternal}
+                    />
+                </div>
+            </div>
+            <div className="z-10 ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
+                <div className="flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex [&_svg]:text-neutral-40 [&_svg]:dark:text-neutral-60">
+                    {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="h-5 w-5 text-primary-30 dark:text-primary-80" />
+                        ) : (
+                            <RadioOff className="h-5 w-5 text-neutral-40 dark:text-neutral-60" />
+                        )}
+                    </ButtonUnstyled>
+                )}
+            </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';

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 '../../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="group flex flex-row items-center gap-1 text-neutral-40 dark:text-neutral-60">
+            <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/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,80 @@
+// 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 '../../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="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+            >
+                {icon ? icon : <ArrowRight />}
+            </div>
+        );
+    }
+
+    if (type === CardActionType.SupportingText) {
+        return (
+            <div className="shrink-0 text-right">
+                {title && (
+                    <div className="font-inter text-label-md text-neutral-10 dark:text-neutral-92">
+                        {title}
+                    </div>
+                )}
+                {subtitle && (
+                    <div className="font-inter text-label-sm text-neutral-60 dark:text-neutral-40">
+                        {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,61 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import cx from 'classnames';
+
+import { ReactNode } from 'react';
+
+export type CardBodyProps = {
+    title: string;
+    subtitle?: string | ReactNode;
+    clickableAction?: React.ReactNode;
+    icon?: React.ReactNode;
+    isTextTruncated?: boolean;
+};
+
+export function CardBody({
+    title,
+    subtitle,
+    clickableAction,
+    icon,
+    isTextTruncated,
+}: 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('font-inter text-title-md text-neutral-10 dark:text-neutral-92', {
+                        truncate: isTextTruncated,
+                    })}
+                >
+                    {title}
+                </div>
+                {icon && <div className="flex items-center">{icon}</div>}
+                {clickableAction && (
+                    <div onClick={handleActionCardBodyClick} className="flex items-center">
+                        {clickableAction}
+                    </div>
+                )}
+            </div>
+            {subtitle && (
+                <div
+                    className={cx('font-inter text-body-md text-neutral-40 dark:text-neutral-60', {
+                        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>
+    );
+}