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

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

@@ -0,0 +1,146 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { Close } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import {
+    BACKGROUND_CLASSES,
+    BG_SELECTED_OUTLINE,
+    BG_SELECTED_OVERLAY,
+    BORDER_CLASSES,
+    CLOSE_ICON_INTERACTIVE,
+    FOCUS_CLASSES,
+    ROUNDED_CLASS,
+    STATE_LAYER_CLASSES,
+    TEXT_COLOR,
+    TEXT_COLOR_SELECTED_OUTLINE,
+} from './chip.classes';
+import { ChipSize, ChipType } from './chip.enums';
+
+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;
+    /**
+     * The type of the Chip
+     */
+    type?: ChipType;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
+}
+
+export function Chip({
+    label,
+    type = ChipType.Outline,
+    selected,
+    showClose,
+    onClose,
+    onClick,
+    avatar,
+    leadingElement,
+    trailingElement,
+    disabled,
+    size = ChipSize.Default,
+}: ChipProps) {
+    const isOutlineSelected = type === ChipType.Outline && selected;
+    const outlineStyle = selected
+        ? type === ChipType.Outline
+            ? 'outline-transparent names:outline-names-neutral-20'
+            : 'chip-outline-color'
+        : 'outline-transparent';
+
+    const focusOutlineStyle = cx(
+        'group-focus:chip-outline-color-active',
+        type === ChipType.Outline && 'names:group-focus:outline-transparent',
+    );
+    const selectedOverlayBg =
+        selected && !disabled && type !== ChipType.Outline ? BG_SELECTED_OVERLAY : '';
+
+    return (
+        <ButtonUnstyled
+            onClick={onClick}
+            className={cx(
+                'group border disabled:opacity-40',
+                ROUNDED_CLASS,
+                isOutlineSelected
+                    ? BG_SELECTED_OUTLINE[ChipType.Outline]
+                    : BACKGROUND_CLASSES[type],
+                selected ? 'border-transparent' : BORDER_CLASSES[type],
+            )}
+            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',
+                    showClose ? 'pr-xs' : 'pr-sm',
+                    ROUNDED_CLASS,
+                    isOutlineSelected
+                        ? TEXT_COLOR_SELECTED_OUTLINE[ChipType.Outline]
+                        : TEXT_COLOR[type],
+                    outlineStyle,
+                    !disabled && focusOutlineStyle,
+                    !disabled && STATE_LAYER_CLASSES,
+                    FOCUS_CLASSES,
+                    selectedOverlayBg,
+                )}
+            >
+                {avatar ?? leadingElement}
+                <span className={cx(size === ChipSize.Small ? 'text-label-md' : 'text-body-md')}>
+                    {label}
+                </span>
+                {trailingElement}
+                {showClose && (
+                    <div
+                        onClick={onClose}
+                        className={cx(disabled ? 'cursor-default' : 'cursor-pointer')}
+                    >
+                        <Close
+                            className={cx(
+                                'h-4 w-4 transition-opacity duration-150',
+                                disabled ? '' : selected ? 'opacity-100' : CLOSE_ICON_INTERACTIVE,
+                            )}
+                        />
+                    </div>
+                )}
+            </span>
+        </ButtonUnstyled>
+    );
+}

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

@@ -0,0 +1,54 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChipType } from './chip.enums';
+
+export const ROUNDED_CLASS = 'rounded-full';
+
+export const BACKGROUND_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'bg-transparent',
+    [ChipType.Elevated]: 'chip-bg-elevated',
+    [ChipType.Success]: 'bg-success-surface',
+    [ChipType.Brand]: 'chip-bg-brand',
+    [ChipType.Error]: 'bg-error-surface',
+};
+
+export const STATE_LAYER_OUTLINE =
+    'outline outline-1 hover:chip-outline-color-hover active:chip-outline-color-active';
+
+export const STATE_LAYER_BG_CLASSES =
+    'hover:chip-bg-color-hover active:chip-bg-color-active group-focus:chip-bg-color-focus';
+
+export const STATE_LAYER_CLASSES = `${STATE_LAYER_OUTLINE} ${STATE_LAYER_BG_CLASSES}`;
+
+export const BG_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-bg-selected-outline',
+};
+
+export const BG_SELECTED_OVERLAY = 'chip-bg-selected-overlay';
+
+export const TEXT_COLOR_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-text-secondary',
+};
+
+export const BORDER_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-border-default',
+    [ChipType.Elevated]: 'border-transparent',
+    [ChipType.Success]: 'border-success-surface',
+    [ChipType.Brand]: 'chip-border-color-brand',
+    [ChipType.Error]: 'border-error-surface',
+};
+
+export const TEXT_COLOR: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-text-default',
+    [ChipType.Elevated]: 'chip-text-secondary',
+    [ChipType.Success]: 'chip-text-secondary',
+    [ChipType.Brand]: 'chip-text-brand',
+    [ChipType.Error]: 'chip-text-secondary',
+};
+
+export const FOCUS_CLASSES =
+    'focus-visible:shadow-[0_0_0_2px] focus-visible:chip-focus-ring focus-visible:outline-none';
+
+export const CLOSE_ICON_INTERACTIVE =
+    'chip-close-icon-opacity group-hover:opacity-100 group-focus:opacity-100 group-active:opacity-100';

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

@@ -0,0 +1,15 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ChipType {
+    Outline = 'outline',
+    Elevated = 'elevated',
+    Success = 'success',
+    Brand = 'brand',
+    Error = 'error',
+}
+
+export enum ChipSize {
+    Small = 'small',
+    Default = 'default',
+}

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

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

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -0,0 +1,142 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from 'react';
+import type { TooltipPosition } from '@/components/atoms';
+import { ButtonUnstyled, Tooltip } from '@/components/atoms';
+import { Copy, Info } from '@iota/apps-ui-icons';
+import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
+import cx from 'classnames';
+import {
+    BACKGROUND_CLASSES,
+    SIZE_CLASSES,
+    TEXT_CLASSES,
+    VALUE_TEXT_CLASSES,
+    SUPPORTING_LABEL_TEXT_CLASSES,
+    LABEL_TEXT_CLASSES,
+} from './displayStats.classes';
+
+interface DisplayStatsProps {
+    /**
+     * The label of the stats.
+     */
+    label: ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * The value of the stats.
+     */
+    value: ReactNode;
+    /**
+     * The supporting label of the stats (optional).
+     */
+    supportingLabel?: string;
+    /**
+     * The background color of the stats.
+     */
+    type?: DisplayStatsType;
+    /**
+     * The size of the stats.
+     */
+    size?: DisplayStatsSize;
+    /**
+     * Add icon to the right of the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * 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;
+}
+
+export function DisplayStats({
+    label,
+    tooltipPosition,
+    tooltipText,
+    value,
+    supportingLabel,
+    type = DisplayStatsType.Default,
+    size = DisplayStatsSize.Default,
+    icon,
+    copyText,
+    onCopySuccess,
+    onCopyError,
+}: DisplayStatsProps): React.JSX.Element {
+    const backgroundClass = BACKGROUND_CLASSES[type];
+    const sizeClass = SIZE_CLASSES[size];
+    const textClass = TEXT_CLASSES[type];
+    const valueClass = VALUE_TEXT_CLASSES[size];
+    const labelClass = LABEL_TEXT_CLASSES[size];
+    const supportingLabelTextClass = SUPPORTING_LABEL_TEXT_CLASSES[size];
+
+    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 h-full w-full flex-col justify-between rounded-2xl p-md--rs',
+                backgroundClass,
+                sizeClass,
+                textClass,
+            )}
+        >
+            <div
+                className={cx('flex flex-row items-center', {
+                    'w-full justify-between': icon,
+                })}
+            >
+                <div className="flex flex-row items-center gap-xxs">
+                    <span className={cx(labelClass, 'whitespace-pre-line')}>{label}</span>
+                    {tooltipText && (
+                        <Tooltip text={tooltipText} position={tooltipPosition}>
+                            <Info className="opacity-40" />
+                        </Tooltip>
+                    )}
+                </div>
+                {icon && <span className="display-stats-icon-color">{icon}</span>}
+            </div>
+            <div className="flex w-full flex-row items-baseline gap-xxs">
+                <span className={cx('break-all', valueClass)}>{value}</span>
+                {supportingLabel && (
+                    <span className={cx('opacity-40', supportingLabelTextClass)}>
+                        {supportingLabel}
+                    </span>
+                )}
+                {copyText && (
+                    <div className="self-center">
+                        <ButtonUnstyled onClick={handleCopyClick}>
+                            <Copy className="display-stats-copy-icon-color" />
+                        </ButtonUnstyled>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/molecules/display-stats/displayStats.classes.ts

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
+
+export const BACKGROUND_CLASSES: Record<DisplayStatsType, string> = {
+    [DisplayStatsType.Default]: 'display-stats-bg-default',
+    [DisplayStatsType.Highlight]: 'display-stats-bg-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-bg-secondary',
+};
+
+export const TEXT_CLASSES: Record<DisplayStatsType, string> = {
+    [DisplayStatsType.Default]: 'display-stats-text-default',
+    [DisplayStatsType.Highlight]: 'display-stats-text-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-text-secondary',
+};
+
+export const SIZE_CLASSES: Record<DisplayStatsSize, string> = {
+    [DisplayStatsSize.Default]: 'gap-y-sm',
+    [DisplayStatsSize.Large]: 'gap-y-md',
+};
+
+export const VALUE_TEXT_CLASSES: Record<DisplayStatsSize, string> = {
+    [DisplayStatsSize.Default]: 'text-title-md',
+    [DisplayStatsSize.Large]: 'text-headline-sm',
+};
+
+export const SUPPORTING_LABEL_TEXT_CLASSES: Record<DisplayStatsSize, string> = {
+    [DisplayStatsSize.Default]: 'text-label-md',
+    [DisplayStatsSize.Large]: 'text-label-lg',
+};
+
+export const LABEL_TEXT_CLASSES: Record<DisplayStatsSize, string> = {
+    [DisplayStatsSize.Default]: 'text-label-sm',
+    [DisplayStatsSize.Large]: 'text-label-md',
+};

package/src/lib/components/molecules/display-stats/displayStats.enums.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum DisplayStatsType {
+    Default = 'default',
+    Highlight = 'highlight',
+    Secondary = 'secondary',
+}
+
+export enum DisplayStatsSize {
+    Default = 'default',
+    Large = 'large',
+}

package/src/lib/components/molecules/display-stats/index.ts

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

package/src/lib/components/molecules/dropdown/Dropdown.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function Dropdown({ children }: React.PropsWithChildren): React.JSX.Element {
+    return (
+        <ul className="dropdown-bg dropdown-border-color list-none rounded-lg border py-xs">
+            {children}
+        </ul>
+    );
+}

package/src/lib/components/molecules/dropdown/dropdownPosition.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum DropdownPosition {
+    Top = 'top',
+    Bottom = 'bottom',
+}

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

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

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

@@ -0,0 +1,19 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './address';
+export * from './asset-media-renderer';
+export * from './chip';
+export * from './segmented-button';
+export * from './title';
+export * from './input';
+export * from './navbar-item';
+export * from './account';
+export * from './dropdown';
+export * from './table-cell';
+export * from './select';
+export * from './table-header-cell';
+export * from './search';
+export * from './card';
+export * from './display-stats';
+export * from './visual-asset-card';