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

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

@@ -0,0 +1,54 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    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 NavbarItemVertical({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled
+        ? 'cursor-not-allowed opacity-60'
+        : 'state-layer-secondary cursor-pointer ';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'relative inline-flex w-full flex-row items-center justify-between rounded-full p-sm',
+                backgroundColors,
+                disabledClasses,
+            )}
+        >
+            <div className="flex items-center gap-3">
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {text && (
+                    <span className={cx('text-center text-label-lg', textClasses)}>{text}</span>
+                )}
+            </div>
+            {hasBadge && <Badge type={BadgeType.PrimarySolid} />}
+        </div>
+    );
+}

package/src/lib/components/molecules/navbar-item/index.ts

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

package/src/lib/components/molecules/navbar-item/navbarItem.classes.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const SELECTED_ICON = 'navbar-item-icon-selected-color';
+export const UNSELECTED_ICON = 'navbar-item-icon-color';
+
+export const PADDING_WITH_TEXT = 'py-xxs px-sm';
+export const PADDING_WITHOUT_TEXT = 'p-sm';
+
+export const SELECTED_BACKGROUND = 'bg-shader-primary-light-12 dark:bg-shader-primary-dark-12';
+
+export const BADGE_WITH_TEXT = '-top-3 right-3';
+export const BADGE_WITHOUT_TEXT = '-top-1 right-3';
+
+export const SELECTED_TEXT = 'navbar-item-label-selected-color';
+export const UNSELECTED_TEXT = 'navbar-item-label-color';

package/src/lib/components/molecules/navbar-item/navbarItem.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum NavbarItemType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}

package/src/lib/components/molecules/search/Search.tsx

@@ -0,0 +1,219 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
+import {
+    BACKGROUND_COLORS,
+    SUGGESTIONS_WRAPPER_STYLE,
+    SEARCH_WRAPPER_STYLE,
+} from './search.classes';
+
+export interface Suggestion {
+    id: string;
+    label: string;
+    supportingText?: string;
+    type?: string;
+}
+
+export interface SearchProps {
+    /**
+     * The value of the search input.
+     */
+    searchValue: string;
+    /**
+     * Callback when the search input value changes.
+     */
+    onSearchValueChange: (value: string) => void;
+    /**
+     * List of suggestions to display (optional).
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Callback when a suggestion is clicked.
+     */
+    onSuggestionClick?: (suggestion: Suggestion) => void;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder: string;
+    /**
+     * Are the suggestions loading.
+     */
+    isLoading: boolean;
+    /**
+     * The type of the search bar. Can be 'outlined' or 'filled'.
+     */
+    type?: SearchBarType;
+    /**
+     * Render suggestion.
+     */
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
+}
+
+export function Search({
+    searchValue,
+    suggestions,
+    onSearchValueChange,
+    onSuggestionClick,
+    placeholder,
+    isLoading = false,
+    type = SearchBarType.Outlined,
+    renderSuggestion,
+}: SearchProps): React.JSX.Element {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const suggestionsListRef = useRef<HTMLDivElement>(null);
+    const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(true);
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        const value = event.target.value;
+        onSearchValueChange(value);
+    }
+
+    // Hide suggestions on escape key press
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setIsSuggestionsVisible(false);
+                inputRef.current?.blur();
+            }
+        };
+
+        document.addEventListener('keydown', handler);
+
+        return () => {
+            document.removeEventListener('keydown', handler);
+        };
+    }, []);
+
+    // Hide suggestions on click outside
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            const el = inputRef?.current;
+            if (!el || el.contains(event?.target as Node)) {
+                return;
+            }
+
+            if (suggestionsListRef.current?.contains(event.target as Node)) {
+                return;
+            }
+            setIsSuggestionsVisible(false);
+        };
+
+        document.addEventListener('click', listener, true);
+        document.addEventListener('touchstart', listener, true);
+
+        return () => {
+            document.removeEventListener('click', listener, true);
+            document.removeEventListener('touchstart', listener, true);
+        };
+    }, [inputRef]);
+
+    const showSuggestions = isSuggestionsVisible && suggestions && suggestions.length > 0;
+
+    const roundedStyleWithSuggestions = showSuggestions
+        ? cx(
+              'rounded-t-3xl border-b',
+              type === SearchBarType.Outlined
+                  ? '[&:not(.dark_*,.names_*)]:border-b-transparent'
+                  : 'border-b-transparent',
+          )
+        : type === SearchBarType.Outlined
+          ? 'rounded-3xl border-b'
+          : 'rounded-full';
+    const searchTypeClass = SEARCH_WRAPPER_STYLE[type];
+    const backgroundColorClass = BACKGROUND_COLORS[type];
+    const suggestionsStyle = SUGGESTIONS_WRAPPER_STYLE[type];
+
+    const handleOnSuggestionClick = (suggestion: Suggestion) => {
+        onSuggestionClick?.(suggestion);
+        onSearchValueChange('');
+        setIsSuggestionsVisible(false);
+        setSelectedIndex(null);
+        inputRef.current?.blur();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (suggestions && suggestions?.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev >= suggestions.length - 1 ? 0 : prev + 1,
+                );
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev <= 0 ? suggestions.length - 1 : prev - 1,
+                );
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (selectedIndex !== null && suggestions[selectedIndex]) {
+                    handleOnSuggestionClick(suggestions[selectedIndex]);
+                } else if (suggestions.length === 1) {
+                    handleOnSuggestionClick(suggestions[0]);
+                }
+            }
+        }
+    };
+
+    return (
+        <div className="relative w-full">
+            <div
+                className={cx(
+                    'search-text-color flex items-center overflow-hidden px-md py-sm [&_svg]:h-6 [&_svg]:w-6',
+                    roundedStyleWithSuggestions,
+                    searchTypeClass,
+                )}
+            >
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={searchValue}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onFocus={() => setIsSuggestionsVisible(true)}
+                    placeholder={placeholder}
+                    className={cx(
+                        'search-placeholder-color w-full flex-1 outline-none',
+                        backgroundColorClass,
+                    )}
+                />
+                <SearchIcon />
+            </div>
+            {showSuggestions && renderSuggestion && (
+                <div
+                    ref={suggestionsListRef}
+                    className={cx(
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden',
+                        suggestionsStyle,
+                    )}
+                >
+                    <Divider width="w-11/12" />
+                    {isLoading ? (
+                        <div className="px-md py-sm">
+                            <Loader className="animate-spin" />
+                        </div>
+                    ) : (
+                        suggestions.map((suggestion, index) => (
+                            <div
+                                key={suggestion.id}
+                                onClick={() => handleOnSuggestionClick(suggestion)}
+                                onMouseEnter={() => setSelectedIndex(index)}
+                                className={cx(
+                                    'w-full cursor-pointer px-md py-sm',
+                                    selectedIndex === index ? 'search-selected-index-bg-color' : '',
+                                )}
+                            >
+                                {renderSuggestion(suggestion, index)}
+                            </div>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

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

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

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

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SearchBarType } from './search.enums';
+
+export const BACKGROUND_COLORS: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]: 'bg-transparent',
+    [SearchBarType.Filled]: 'search-bg-color-filled',
+};
+
+export const SEARCH_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]: 'border-l border-r border-t search-border-color',
+    [SearchBarType.Filled]: 'search-bg-color-filled',
+};
+
+export const SUGGESTIONS_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]:
+        'rounded-b-3xl border-b border-l border-r search-border-color search-suggestion-bg-color',
+    [SearchBarType.Filled]: 'rounded-b-3xl search-bg-color-filled',
+};

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

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum SearchBarType {
+    Outlined = 'outlined',
+    Filled = 'filled',
+}

package/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren } from 'react';
+import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
+import cx from 'classnames';
+import { SegmentedButtonType } from './segmentedButton.enums';
+import { ButtonSegmentType } from '@/components/atoms';
+
+interface SegmentedButtonProps {
+    /**
+     * The type of the button
+     */
+    type?: SegmentedButtonType;
+    /**
+     * The shape of the button
+     */
+    shape?: ButtonSegmentType;
+}
+
+export function SegmentedButton({
+    type = SegmentedButtonType.Filled,
+    children,
+    shape = ButtonSegmentType.Rounded,
+}: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element {
+    const backgroundColors = BACKGROUND_COLORS[type];
+    const borderColors = type === SegmentedButtonType.Outlined ? OUTLINED_BORDER : '';
+    const borderShape = shape === ButtonSegmentType.Rounded ? 'rounded-full gap-1 p-xxs' : '';
+    const scrollable =
+        shape === ButtonSegmentType.Rounded ? 'flex-wrap' : 'flex-nowrap overflow-x-auto';
+    return (
+        <div
+            className={cx('flex flex-row', backgroundColors, borderColors, borderShape, scrollable)}
+        >
+            {children}
+        </div>
+    );
+}

package/src/lib/components/molecules/segmented-button/index.ts

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

package/src/lib/components/molecules/segmented-button/segmentedButton.classes.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SegmentedButtonType } from './segmentedButton.enums';
+
+export const BACKGROUND_COLORS: Record<SegmentedButtonType, string> = {
+    [SegmentedButtonType.Outlined]: 'bg-transparent',
+    [SegmentedButtonType.Filled]: 'segmented-filled-bg-color',
+    [SegmentedButtonType.Transparent]: 'bg-transparent',
+};
+
+export const OUTLINED_BORDER = 'border segmented-outlined-border';

package/src/lib/components/molecules/segmented-button/segmentedButton.enums.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum SegmentedButtonType {
+    Outlined = 'outlined',
+    Filled = 'filled',
+    Transparent = 'transparent',
+}

package/src/lib/components/molecules/select/Select.tsx

@@ -0,0 +1,235 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TriangleDown } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Dropdown } from '../dropdown/Dropdown';
+import { SecondaryText } from '@/components/atoms/secondary-text';
+import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
+import { ListItem, ButtonUnstyled } from '@/components/atoms';
+import { DropdownPosition } from '../dropdown';
+import { SelectSize } from './select.enums';
+
+export type SelectOption =
+    | string
+    | { id: string; renderLabel: () => React.JSX.Element }
+    | { id: string; label: React.ReactNode };
+
+interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'> {
+    /**
+     * The selected option value.
+     */
+    value?: string;
+    /**
+     * The field label.
+     */
+    label?: string;
+    /**
+     * The field caption.
+     */
+    caption?: string;
+    /**
+     * The dropdown elements to render.
+     */
+    options: SelectOption[];
+    /**
+     * The icon to show on the left of the field.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * The supporting text to shown at the end of the selector.
+     */
+    supportingText?: string;
+    /**
+     * The error message to show under the field.
+     */
+    errorMessage?: string;
+    /**
+     * Placeholder for the selector
+     */
+    placeholder?: SelectOption;
+    /**
+     * The callback to call when the value changes.
+     */
+    onValueChange?: (id: string) => void;
+    /**
+     * The callback to call when the option is clicked.
+     */
+    onOptionClick?: (id: string) => void;
+    /**
+     * The dropdown position
+     */
+    dropdownPosition?: DropdownPosition;
+    /**
+     * The size of the select.
+     */
+    size?: SelectSize;
+}
+
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(
+    (
+        {
+            disabled,
+            label,
+            leadingIcon,
+            supportingText,
+            errorMessage,
+            caption,
+            options,
+            placeholder,
+            onValueChange,
+            onOptionClick,
+            value,
+            dropdownPosition = DropdownPosition.Bottom,
+            size = SelectSize.Default,
+        },
+        ref,
+    ) => {
+        const [isOpen, setIsOpen] = useState<boolean>(false);
+        const selectedValue = findValueByProps(value, options);
+        const wrapperRef = useRef<HTMLDivElement>(null);
+
+        const selectorText = selectedValue || placeholder;
+        const selectPadding = size === SelectSize.Small ? 'px-sm' : 'px-md';
+        const textSize = size === SelectSize.Small ? 'text-body-md' : 'text-body-lg';
+
+        useEffect(() => {
+            if (disabled && isOpen) {
+                closeDropdown();
+            }
+        }, [disabled, isOpen]);
+
+        useEffect(() => {
+            if (!isOpen) return;
+
+            const handleClickOutside = (e: MouseEvent) => {
+                const target = e.target as Node;
+                if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+                    closeDropdown();
+                }
+            };
+
+            document.addEventListener('mousedown', handleClickOutside);
+
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [isOpen]);
+
+        function findValueByProps(value: SelectProps['value'], options: SelectOption[] = []) {
+            return (
+                options.find((option) =>
+                    typeof option === 'string' ? option === value : option.id === value,
+                ) ?? options[0]
+            );
+        }
+
+        function onSelectorClick() {
+            setIsOpen((prev) => !prev);
+        }
+
+        function handleOptionClick(option: SelectOption) {
+            closeDropdown();
+            const clickedOption = typeof option === 'string' ? option : option.id;
+            onOptionClick?.(clickedOption);
+
+            if (option !== selectedValue) {
+                onValueChange?.(clickedOption);
+            }
+        }
+
+        function closeDropdown() {
+            setIsOpen(false);
+        }
+
+        return (
+            <InputWrapper
+                label={label}
+                caption={caption}
+                disabled={disabled}
+                errorMessage={errorMessage}
+                labelHtmlTag={LabelHtmlTag.Div}
+            >
+                <div className="relative flex w-full flex-col" ref={wrapperRef}>
+                    <ButtonUnstyled
+                        ref={ref}
+                        onClick={onSelectorClick}
+                        disabled={disabled}
+                        className={cx(
+                            'select-container select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
+                            selectPadding,
+                        )}
+                    >
+                        {leadingIcon && <span className="select-icon-color">{leadingIcon}</span>}
+
+                        <div className="flex w-full flex-row items-baseline gap-x-3">
+                            {selectorText && (
+                                <div
+                                    className={cx(
+                                        'select-label-color block w-full text-start',
+                                        textSize,
+                                    )}
+                                >
+                                    <OptionLabel option={selectorText} />
+                                </div>
+                            )}
+
+                            {supportingText && (
+                                <div className="ml-auto">
+                                    <SecondaryText>{supportingText}</SecondaryText>
+                                </div>
+                            )}
+                        </div>
+
+                        <TriangleDown
+                            className={cx('select-icon-color transition-transform', {
+                                ' rotate-180': isOpen,
+                            })}
+                        />
+                    </ButtonUnstyled>
+
+                    {isOpen && (
+                        <div
+                            className="fixed left-0 top-0 z-[49] bg-transparent"
+                            onClick={closeDropdown}
+                        />
+                    )}
+                    <div
+                        className={cx('absolute z-50 min-w-full', {
+                            hidden: !isOpen,
+                            'top-full':
+                                !dropdownPosition || dropdownPosition === DropdownPosition.Bottom,
+                            'bottom-full': dropdownPosition === DropdownPosition.Top,
+                        })}
+                    >
+                        <Dropdown>
+                            {options.map((option) => {
+                                const optionIsString = typeof option === 'string';
+                                return (
+                                    <ListItem
+                                        onClick={() => handleOptionClick(option)}
+                                        hideBottomBorder
+                                        key={optionIsString ? option : option.id}
+                                    >
+                                        <OptionLabel option={option} />
+                                    </ListItem>
+                                );
+                            })}
+                        </Dropdown>
+                    </div>
+                </div>
+            </InputWrapper>
+        );
+    },
+);
+
+function OptionLabel({ option }: { option: SelectOption }) {
+    if (typeof option === 'string') {
+        return option;
+    } else if ('renderLabel' in option) {
+        return option.renderLabel();
+    } else {
+        return option.label;
+    }
+}

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

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

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

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