@iota/apps-ui-kit 0.2.0 → 0.3.0

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

@@ -0,0 +1,26 @@
+// 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.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,25 @@
+// 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',
+    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 '../../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';

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

@@ -0,0 +1,104 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ReactNode } from 'react';
+import { Tooltip, TooltipPosition } from '../../atoms';
+import { 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;
+}
+
+export function DisplayStats({
+    label,
+    tooltipPosition,
+    tooltipText,
+    value,
+    supportingLabel,
+    type = DisplayStatsType.Default,
+    size = DisplayStatsSize.Default,
+    icon,
+}: 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];
+
+    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>
+                )}
+            </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,245 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { InputWrapper, InputWrapperProps } 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 '../../atoms/secondary-text';
+import { Close, VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '../../atoms/button';
+import { 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>;
+    }
+}