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

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="text-neutral-10 dark:text-neutral-92">{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="text-neutral-60 dark:text-neutral-40" />
+                        </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]: 'bg-neutral-96 dark:bg-neutral-10',
+    [DisplayStatsType.Highlight]: 'bg-primary-30 dark:bg-primary-80',
+    [DisplayStatsType.Secondary]: 'bg-secondary-90 dark:bg-secondary-10',
+};
+
+export const TEXT_CLASSES: Record<DisplayStatsType, string> = {
+    [DisplayStatsType.Default]: 'text-neutral-10 dark:text-neutral-92',
+    [DisplayStatsType.Highlight]: 'text-neutral-100 dark:text-primary-10',
+    [DisplayStatsType.Secondary]: 'text-neutral-10 dark:text-neutral-92',
+};
+
+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="list-none rounded-lg border border-neutral-80 bg-neutral-100 py-xs dark:border-neutral-20 dark:bg-neutral-6">
+            {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,17 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './address';
+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';

package/src/lib/components/molecules/input/Input.tsx

@@ -0,0 +1,246 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
+import {
+    BORDER_CLASSES,
+    INPUT_CLASSES,
+    INPUT_TEXT_CLASSES,
+    INPUT_NUMBER_CLASSES,
+    INPUT_PLACEHOLDER_CLASSES,
+} from './input.classes';
+import { InputType } from './input.enums';
+import { SecondaryText } from '@/components/atoms/secondary-text';
+import { Close, VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import type { InputPropsByType, NumericFormatInputProps } from './input.types';
+import { NumericFormat } from 'react-number-format';
+
+export interface BaseInputProps extends InputWrapperProps {
+    /**
+     * A leading icon that is shown before the input
+     */
+    leadingIcon?: React.JSX.Element;
+    /**
+     * Supporting text that is shown at the end of the input component.
+     */
+    supportingText?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Trailing element that is shown after the input
+     */
+    trailingElement?: React.JSX.Element;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * Value of the input
+     */
+    value?: string | number;
+    /**
+     * Default value of the input
+     */
+    defaultValue?: string | number;
+    /**
+     * onClearInput function that is called when the clear button is clicked
+     */
+    onClearInput?: () => void;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+}
+
+export type InputProps = BaseInputProps & InputPropsByType;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComponent(
+    {
+        label,
+        caption,
+        disabled,
+        errorMessage,
+        leadingIcon,
+        supportingText,
+        amountCounter,
+        trailingElement,
+        isContentVisible,
+        value,
+        defaultValue,
+        onClearInput,
+        isVisibilityToggleEnabled,
+        type,
+        ...inputProps
+    },
+    forwardRef,
+) {
+    isVisibilityToggleEnabled ??= type === InputType.Password;
+    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
+
+    const [isInputContentVisible, setIsInputContentVisible] = useState<boolean>(
+        isContentVisible ?? type !== InputType.Password,
+    );
+
+    useEffect(() => {
+        setIsInputContentVisible(isContentVisible ?? type !== InputType.Password);
+    }, [type, isContentVisible]);
+
+    function onToggleButtonClick() {
+        setIsInputContentVisible((prev) => !prev);
+    }
+
+    function focusOnInput() {
+        if (inputWrapperRef.current) {
+            inputWrapperRef.current.querySelector('input')?.focus();
+        }
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            caption={caption}
+            disabled={disabled}
+            errorMessage={errorMessage}
+            amountCounter={amountCounter}
+            required={inputProps.required}
+        >
+            <div
+                className={cx('relative flex flex-row items-center gap-x-3', BORDER_CLASSES)}
+                onClick={focusOnInput}
+                ref={inputWrapperRef}
+            >
+                {leadingIcon && (
+                    <span className="text-neutral-10 dark:text-neutral-92">{leadingIcon}</span>
+                )}
+                <InputElement
+                    {...inputProps}
+                    inputRef={forwardRef}
+                    value={value}
+                    type={
+                        type === InputType.Password && isInputContentVisible ? InputType.Text : type
+                    }
+                    disabled={disabled}
+                    className={cx(
+                        INPUT_CLASSES,
+                        INPUT_TEXT_CLASSES,
+                        INPUT_PLACEHOLDER_CLASSES,
+                        INPUT_NUMBER_CLASSES,
+                    )}
+                />
+
+                {supportingText && <SecondaryText>{supportingText}</SecondaryText>}
+                <InputTrailingElement
+                    value={value}
+                    type={type}
+                    onClearInput={onClearInput}
+                    isContentVisible={isInputContentVisible}
+                    trailingElement={trailingElement}
+                    isVisibilityToggleEnabled={isVisibilityToggleEnabled}
+                    onToggleButtonClick={onToggleButtonClick}
+                />
+            </div>
+        </InputWrapper>
+    );
+});
+
+function InputElement({
+    type,
+    inputRef,
+    ...inputProps
+}: InputProps & {
+    inputRef: React.ForwardedRef<HTMLInputElement>;
+    className: string;
+}) {
+    function preventScrollInputChange(e: React.WheelEvent<HTMLInputElement>) {
+        if (type === InputType.Number) {
+            const input = e.currentTarget;
+
+            input.blur();
+            e.stopPropagation();
+            setTimeout(() => {
+                input.focus({ preventScroll: true });
+            }, 0);
+        }
+    }
+    return type === InputType.NumericFormat ? (
+        <NumericFormatInput inputRef={inputRef} {...inputProps} type={type} />
+    ) : (
+        <input
+            ref={inputRef}
+            {...inputProps}
+            type={type}
+            onWheel={(e) => {
+                preventScrollInputChange(e);
+                inputProps.onWheel?.(e);
+            }}
+        />
+    );
+}
+
+function NumericFormatInput({
+    inputRef,
+    className,
+    type,
+    ...inputProps
+}: NumericFormatInputProps &
+    InputProps & {
+        inputRef: React.ForwardedRef<HTMLInputElement>;
+        className: string;
+        value?: string | number;
+    }) {
+    return (
+        <NumericFormat
+            className={className}
+            valueIsNumericString
+            getInputRef={inputRef}
+            {...inputProps}
+        />
+    );
+}
+
+function InputTrailingElement({
+    value,
+    type,
+    onClearInput,
+    isContentVisible,
+    trailingElement,
+    onToggleButtonClick,
+    isVisibilityToggleEnabled,
+}: BaseInputProps & {
+    onToggleButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    type: InputPropsByType['type'];
+}) {
+    const showClearInput = Boolean(type === InputType.Text && value && onClearInput);
+    const showPasswordToggle = Boolean(type === InputType.Password && isVisibilityToggleEnabled);
+    const showTrailingElement = Boolean(trailingElement && !showClearInput && !showPasswordToggle);
+
+    if (showClearInput) {
+        return (
+            <ButtonUnstyled
+                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                onClick={onClearInput}
+                tabIndex={-1}
+            >
+                <Close />
+            </ButtonUnstyled>
+        );
+    } else if (showPasswordToggle) {
+        return (
+            <ButtonUnstyled
+                onClick={onToggleButtonClick}
+                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                tabIndex={-1}
+            >
+                {isContentVisible ? <VisibilityOn /> : <VisibilityOff />}
+            </ButtonUnstyled>
+        );
+    } else if (showTrailingElement) {
+        return <Fragment>{trailingElement}</Fragment>;
+    }
+}

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { SecondaryText } from '@/components/atoms/secondary-text';
+import { LABEL_CLASSES } from './input.classes';
+import { createElement } from 'react';
+
+export enum LabelHtmlTag {
+    Label = 'label',
+    Div = 'div',
+}
+
+export interface InputWrapperProps {
+    /**
+     * Shows a label with the text above the input.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Is the input required
+     */
+    required?: boolean;
+    /**
+     * Is the input disabled
+     */
+    disabled?: boolean;
+    /**
+     * Use a div as a label instead of a label element
+     */
+    labelHtmlTag?: LabelHtmlTag;
+}
+
+export function InputWrapper({
+    label,
+    caption,
+    disabled,
+    errorMessage,
+    amountCounter,
+    required,
+    labelHtmlTag = LabelHtmlTag.Label,
+    children,
+}: React.PropsWithChildren<InputWrapperProps>) {
+    return (
+        <div
+            className={cx('group flex w-full flex-col gap-y-2', {
+                'cursor-not-allowed opacity-40': disabled,
+                errored: errorMessage,
+                enabled: !disabled,
+                required: required,
+            })}
+        >
+            {label ? (
+                <LabelWrapper labelHtmlTag={labelHtmlTag}>
+                    {label}
+                    {children}
+                </LabelWrapper>
+            ) : (
+                children
+            )}
+
+            {(errorMessage || caption || amountCounter) && (
+                <div
+                    className={cx(
+                        'flex flex-row items-center',
+                        caption || errorMessage ? 'justify-between' : 'justify-end',
+                    )}
+                >
+                    {(errorMessage || caption) && (
+                        <SecondaryText hasErrorStyles>{errorMessage || caption}</SecondaryText>
+                    )}
+                    {amountCounter && <SecondaryText>{amountCounter}</SecondaryText>}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function LabelWrapper({
+    labelHtmlTag,
+    children,
+}: Required<Pick<InputWrapperProps, 'labelHtmlTag'>> & {
+    children: React.ReactNode;
+}) {
+    return createElement(labelHtmlTag, { className: LABEL_CLASSES }, children);
+}