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

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

@@ -0,0 +1,261 @@
+// 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.ReactNode;
+    /**
+     * 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.ReactNode;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * Value of the input
+     */
+    value?: string | number;
+    /**
+     * Text that is shown below the value of the input.
+     */
+    supportingValue?: string | null;
+    /**
+     * 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,
+        supportingValue,
+        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(
+                    'input-container relative flex flex-row items-center gap-x-3',
+                    BORDER_CLASSES,
+                )}
+                onClick={focusOnInput}
+                ref={inputWrapperRef}
+            >
+                {leadingIcon && <span className="input-icon-color">{leadingIcon}</span>}
+                <div className="flex flex-1 flex-col items-start">
+                    <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,
+                        )}
+                    />
+                    {supportingValue && (
+                        <span className="text-label-md text-iota-neutral-60 names:text-iota-neutral-60 dark:text-iota-neutral-40">
+                            {supportingValue}
+                        </span>
+                    )}
+                </div>
+
+                {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="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
+                onClick={onClearInput}
+                tabIndex={-1}
+            >
+                <Close />
+            </ButtonUnstyled>
+        );
+    } else if (showPasswordToggle) {
+        return (
+            <ButtonUnstyled
+                onClick={onToggleButtonClick}
+                className="input-icon-color [&_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 gap-md' : '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);
+}

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

@@ -0,0 +1,148 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useEffect, useState } from 'react';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
+import {
+    BORDER_CLASSES,
+    INPUT_CLASSES,
+    INPUT_TEXT_CLASSES,
+    INPUT_PLACEHOLDER_CLASSES,
+} from './input.classes';
+import cx from 'classnames';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
+
+type TextAreaProps = Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'cols' | 'resize' | 'className'
+>;
+
+interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
+    /**
+     * Shows a label with the text above the input field.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input field.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * If true the textarea is resizable vertically
+     */
+    isResizeEnabled?: boolean;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(function TextArea(
+    {
+        label,
+        caption,
+        disabled,
+        errorMessage,
+        value,
+        amountCounter,
+        isVisibilityToggleEnabled,
+        isResizeEnabled,
+        required,
+        isContentVisible,
+        defaultValue,
+        ...textareaProps
+    },
+    ref,
+) {
+    const [isInputContentVisible, setIsInputContentVisible] = useState<boolean>(
+        isContentVisible ?? true,
+    );
+
+    useEffect(() => {
+        setIsInputContentVisible(isContentVisible ?? true);
+    }, [isContentVisible]);
+
+    function onToggleButtonClick() {
+        setIsInputContentVisible((prev) => !prev);
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            caption={caption}
+            disabled={disabled || !isInputContentVisible}
+            errorMessage={errorMessage}
+            amountCounter={amountCounter}
+            required={required}
+        >
+            <div className="relative">
+                <textarea
+                    disabled={disabled || !isInputContentVisible}
+                    required={required}
+                    ref={ref}
+                    className={cx(
+                        'text-area-container peer block min-h-[50px]',
+                        BORDER_CLASSES,
+                        INPUT_CLASSES,
+                        INPUT_TEXT_CLASSES,
+                        INPUT_PLACEHOLDER_CLASSES,
+                        isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
+                        !isInputContentVisible && 'not-visible select-none text-transparent',
+                    )}
+                    defaultValue={isInputContentVisible && defaultValue ? defaultValue : undefined}
+                    value={isInputContentVisible && value ? value : undefined}
+                    {...textareaProps}
+                />
+                {!isInputContentVisible && (
+                    <div className="absolute left-0 top-0 flex h-full w-full flex-col items-stretch gap-y-2 px-md py-sm peer-[.not-visible]:select-none">
+                        <VisibilityOffBar rows={3} halfWidthRow={3} />
+                    </div>
+                )}
+
+                {isVisibilityToggleEnabled && (
+                    <span className="absolute bottom-4 right-4 flex">
+                        <ButtonUnstyled
+                            onClick={onToggleButtonClick}
+                            className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
+                            tabIndex={-1}
+                        >
+                            {isInputContentVisible ? <VisibilityOn /> : <VisibilityOff />}
+                        </ButtonUnstyled>
+                    </span>
+                )}
+            </div>
+        </InputWrapper>
+    );
+});
+
+interface VisibilityOffBarProps {
+    rows: number;
+    halfWidthRow?: number;
+}
+
+function VisibilityOffBar({ rows, halfWidthRow }: VisibilityOffBarProps) {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, index) => {
+                const isHalfWidth = halfWidthRow === index + 1;
+                const width = isHalfWidth ? 'w-1/2' : 'w-full';
+                return (
+                    <div key={index} className={`input-visibility-bar h-2.5 rounded ${width}`} />
+                );
+            })}
+        </>
+    );
+}

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Input';
+export * from './TextArea';
+
+export * from './input.types';
+export * from './input.enums';

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

@@ -0,0 +1,13 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const INPUT_CLASSES =
+    'w-full input-caret-color bg-transparent text-body-lg caret-input-caret-color focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
+export const INPUT_TEXT_CLASSES = 'input-text-color';
+export const INPUT_PLACEHOLDER_CLASSES = 'input-placeholder-color';
+export const INPUT_NUMBER_CLASSES =
+    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
+export const BORDER_CLASSES =
+    'px-md py-sm rounded-lg border input-border-color input-border-color-disabled group-[.enabled]:cursor-text input-border-error-color hover:group-[.enabled]:input-border-color-hover input-border-color-focus';
+
+export const LABEL_CLASSES = 'flex flex-col gap-y-2 text-label-lg input-label-color';

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

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum InputType {
+    Text = 'text',
+    Password = 'password',
+    Number = 'number',
+    NumericFormat = 'numericFormat',
+}
+
+export enum Resize {
+    None = 'none',
+    Vertical = 'vertical',
+}

package/src/lib/components/molecules/input/input.types.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+import type { InputType } from '.';
+import type { NumericFormat } from 'react-number-format';
+
+type InputElementProps = Omit<
+    React.ComponentProps<'input'>,
+    'type' | 'className' | 'ref' | 'value' | 'defaultValue'
+>;
+
+type GenericInputProps = {
+    type: InputType.Text | InputType.Password | InputType.Number;
+};
+
+type NumericFormatProps = ComponentProps<typeof NumericFormat>;
+
+export type NumericFormatInputProps = {
+    type: InputType.NumericFormat;
+    suffix?: NumericFormatProps['suffix'];
+    prefix?: NumericFormatProps['prefix'];
+    decimalScale?: NumericFormatProps['decimalScale'];
+    allowNegative?: NumericFormatProps['allowNegative'];
+    thousandSeparator?: NumericFormatProps['thousandSeparator'];
+    onValueChange?: NumericFormatProps['onValueChange'];
+};
+
+export type InputPropsByType = InputElementProps & (NumericFormatInputProps | GenericInputProps);

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NavbarItemHorizontal } from './NavbarItemHorizontal';
+import { NavbarItemVertical } from './NavbarItemVertical';
+import { NavbarItemType } from './navbarItem.enums';
+
+export interface NavbarItemProps {
+    /**
+     * The type of the navbar item.
+     */
+    type?: NavbarItemType;
+    /**
+     * The icon of the navbar item.
+     */
+    icon: React.ReactNode;
+    /**
+     * The text of the navbar item.
+     */
+    text?: string;
+    /**
+     * Indicates if the navbar item is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates if the navbar item has a badge.
+     */
+    hasBadge?: boolean;
+    /**
+     * The onClick event of the navbar item.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Indicates if the navbar item is disabled.
+     */
+    isDisabled?: boolean;
+}
+
+export function NavbarItem(props: NavbarItemProps): React.JSX.Element {
+    const { type, text } = props;
+
+    if (type === NavbarItemType.Vertical && !!text) {
+        return <NavbarItemVertical {...props} />;
+    }
+
+    return <NavbarItemHorizontal {...props} />;
+}

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    BADGE_WITH_TEXT,
+    BADGE_WITHOUT_TEXT,
+    PADDING_WITH_TEXT,
+    PADDING_WITHOUT_TEXT,
+    SELECTED_BACKGROUND,
+    SELECTED_ICON,
+    SELECTED_TEXT,
+    UNSELECTED_ICON,
+    UNSELECTED_TEXT,
+} from './navbarItem.classes';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
+
+export function NavbarItemHorizontal({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const paddingClasses = text ? PADDING_WITH_TEXT : PADDING_WITHOUT_TEXT;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const badgePositionClasses = text ? BADGE_WITH_TEXT : BADGE_WITHOUT_TEXT;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer-secondary';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'inline-flex cursor-pointer flex-col items-center justify-center space-y-1',
+            )}
+        >
+            <div
+                className={cx(
+                    'relative inline-flex rounded-full',
+                    paddingClasses,
+                    backgroundColors,
+                    disabledClasses,
+                )}
+            >
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {hasBadge && (
+                    <div className={cx('absolute', badgePositionClasses)}>
+                        <Badge type={BadgeType.PrimarySolid} />
+                    </div>
+                )}
+            </div>
+            {text && <span className={cx('text-center text-label-md', textClasses)}>{text}</span>}
+        </div>
+    );
+}