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

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 '@/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="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,72 @@
+// 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('font-inter text-title-md text-neutral-10 dark:text-neutral-92', {
+                        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('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>
+    );
+}

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]: 'bg-neutral-96 dark:bg-neutral-10',
+    [ImageType.BgWhite]: 'bg-white dark:bg-neutral-6',
+    [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 bg-neutral-96 dark:bg-neutral-10 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';

package/src/lib/components/molecules/chip/Chip.tsx

@@ -0,0 +1,105 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { ChipState } from './chip.enums';
+import {
+    BORDER_CLASSES,
+    BACKGROUND_CLASSES,
+    ROUNDED_CLASS,
+    STATE_LAYER_CLASSES,
+    TEXT_COLOR,
+    FOCUS_CLASSES,
+} from './chip.classes';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { Close } from '@iota/apps-ui-icons';
+
+interface ChipProps {
+    /**
+     * The label of the chip
+     */
+    label: string;
+    /**
+     * Whether to show the close icon
+     */
+    showClose?: boolean;
+    /**
+     * Whether the chip is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when the close icon is clicked
+     */
+    onClose?: () => void;
+    /**
+     * On Click handler for the chip
+     */
+    onClick?: () => void;
+    /**
+     * Avatar to show in the chip.
+     */
+    avatar?: React.JSX.Element;
+    /**
+     * Leading element to show in the chip.
+     */
+    leadingElement?: React.JSX.Element;
+    /**
+     * Trailing element to show in the chip.
+     */
+    trailingElement?: React.JSX.Element;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+}
+
+export function Chip({
+    label,
+    showClose,
+    selected,
+    onClose,
+    onClick,
+    avatar,
+    leadingElement,
+    trailingElement,
+    disabled,
+}: ChipProps) {
+    const chipState = selected ? ChipState.Selected : ChipState.Default;
+    return (
+        <ButtonUnstyled
+            onClick={onClick}
+            className={cx(
+                'border transition-all duration-500 ease-in-out disabled:opacity-40',
+                ROUNDED_CLASS,
+                BACKGROUND_CLASSES[chipState],
+                BORDER_CLASSES[chipState],
+                FOCUS_CLASSES,
+            )}
+            disabled={disabled}
+        >
+            <span
+                className={cx(
+                    'flex h-full w-full flex-row items-center gap-x-2',
+                    avatar ? 'py-xxs' : 'py-[6px]',
+                    avatar ? 'pl-xxs' : leadingElement ? 'pl-xs' : 'pl-sm',
+                    ROUNDED_CLASS,
+                    !disabled && STATE_LAYER_CLASSES,
+                    showClose ? 'pr-xs' : 'pr-sm',
+                    TEXT_COLOR[chipState],
+                )}
+            >
+                {avatar ?? leadingElement}
+                <span className="text-body-md">{label}</span>
+                {trailingElement}
+                {showClose && (
+                    <ButtonUnstyled
+                        onClick={onClose}
+                        className="cursor-pointer [&_svg]:h-4 [&_svg]:w-4"
+                    >
+                        <Close />
+                    </ButtonUnstyled>
+                )}
+            </span>
+        </ButtonUnstyled>
+    );
+}

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

@@ -0,0 +1,32 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChipState } from './chip.enums';
+
+export const ROUNDED_CLASS = 'rounded-full';
+
+export const BACKGROUND_CLASSES: Record<ChipState, string> = {
+    [ChipState.Default]: 'bg-transparent',
+    [ChipState.Selected]: 'bg-primary-90 dark:bg-primary-10',
+};
+
+const STATE_LAYER_OUTLINE =
+    'outline outline-1 outline-transparent hover:outline-shader-primary-light-8 active:outline-shader-primary-light-12 dark:hover:outline-shader-primary-dark-8 dark:active:outline-shader-primary-dark-12';
+
+const STATE_LAYER_BG_CLASSES =
+    'hover:bg-shader-primary-light-8 active:bg-shader-primary-light-12 dark:hover:bg-shader-primary-dark-8 dark:active:bg-shader-primary-dark-12 focus:bg-shader-primary-light-12 dark:focus:bg-shader-primary-dark-12';
+
+export const STATE_LAYER_CLASSES = `${STATE_LAYER_OUTLINE} ${STATE_LAYER_BG_CLASSES}`;
+
+export const BORDER_CLASSES: Record<ChipState, string> = {
+    [ChipState.Default]: 'border-neutral-70 dark:border-neutral-40',
+    [ChipState.Selected]: 'border-transparent',
+};
+
+export const TEXT_COLOR: Record<ChipState, string> = {
+    [ChipState.Default]: 'text-neutral-40 dark:text-neutral-60',
+    [ChipState.Selected]: 'text-neutral-10 dark:text-neutral-92',
+};
+
+export const FOCUS_CLASSES =
+    'focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-primary-30 focus-visible:outline-none dark:focus-visible:shadow-primary-80';

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

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ChipState {
+    Default = 'default',
+    Selected = 'selected',
+}

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

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