@iota/apps-ui-kit 0.2.0 → 0.3.0

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

@@ -0,0 +1,220 @@
+// 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, SearchBarType } from '@/components';
+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;
+    /**
+     * Callback when a key is pressed.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * 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,
+    onKeyDown,
+    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
+        ? 'rounded-t-3xl border-b 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(
+                    'flex items-center overflow-hidden px-md py-sm text-neutral-10 dark:text-neutral-92 [&_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(
+                        'w-full flex-1 outline-none placeholder:text-neutral-40 placeholder:dark:text-neutral-60',
+                        backgroundColorClass,
+                    )}
+                />
+                <SearchIcon />
+            </div>
+            {showSuggestions && (
+                <div
+                    ref={suggestionsListRef}
+                    className={cx(
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden bg-neutral-100 dark:bg-neutral-10',
+                        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
+                                        ? 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16'
+                                        : '',
+                                )}
+                            >
+                                {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]: 'bg-neutral-92 dark:bg-neutral-12',
+};
+
+export const SEARCH_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]: 'border-l border-r border-t border-neutral-70 dark:border-neutral-40',
+    [SearchBarType.Filled]: 'bg-neutral-92 dark:bg-neutral-12',
+};
+
+export const SUGGESTIONS_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]:
+        'rounded-b-3xl border-b border-l border-r border-neutral-70  dark:border-neutral-40',
+    [SearchBarType.Filled]: 'rounded-b-3xl bg-neutral-92 dark:bg-neutral-12',
+};

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,34 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren } from 'react';
+import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
+import cx from 'classnames';
+import { SegmentedButtonType } from './segmentedButton.enums';
+import { ButtonSegmentType } from '../../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' : '';
+    return (
+        <div className={cx('flex flex-row flex-wrap', backgroundColors, borderColors, borderShape)}>
+            {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]: 'bg-neutral-96 dark:bg-neutral-10',
+    [SegmentedButtonType.Transparent]: 'bg-transparent',
+};
+
+export const OUTLINED_BORDER = 'border border-neutral-70 dark:border-neutral-40';

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,223 @@
+// 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, useState } from 'react';
+import { Dropdown } from '../dropdown/Dropdown';
+import { SecondaryText } from '../../atoms/secondary-text';
+import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
+import { ButtonUnstyled } from '../../atoms/button';
+import { ListItem } from '../../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 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]);
+
+        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">
+                    <ButtonUnstyled
+                        ref={ref}
+                        onClick={onSelectorClick}
+                        disabled={disabled}
+                        className={cx(
+                            'flex flex-row items-center gap-x-3 rounded-lg border border-neutral-80 py-sm hover:enabled:border-neutral-50 focus-visible:enabled:border-primary-30 active:enabled:border-primary-30 disabled:cursor-not-allowed  group-[.errored]:border-error-30 group-[.opened]:border-primary-30 dark:border-neutral-20 dark:hover:enabled:border-neutral-60 dark:group-[.errored]:border-error-80 dark:group-[.opened]:border-primary-80 [&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-30 dark:[&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-80 [&_svg]:h-5 [&_svg]:w-5',
+                            selectPadding,
+                        )}
+                    >
+                        {leadingIcon && (
+                            <span className="text-neutral-10 dark:text-neutral-92">
+                                {leadingIcon}
+                            </span>
+                        )}
+
+                        <div className="flex w-full flex-row items-baseline gap-x-3">
+                            {selectorText && (
+                                <div
+                                    className={cx(
+                                        'block w-full text-start text-neutral-10 dark:text-neutral-92',
+                                        textSize,
+                                    )}
+                                >
+                                    <OptionLabel option={selectorText} />
+                                </div>
+                            )}
+
+                            {supportingText && (
+                                <div className="ml-auto">
+                                    <SecondaryText>{supportingText}</SecondaryText>
+                                </div>
+                            )}
+                        </div>
+
+                        <TriangleDown
+                            className={cx(
+                                'text-neutral-10 transition-transform dark:text-neutral-92',
+                                {
+                                    ' rotate-180': isOpen,
+                                },
+                            )}
+                        />
+                    </ButtonUnstyled>
+
+                    {isOpen && (
+                        <div
+                            className="fixed left-0 top-0 z-[49] h-screen w-screen 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',
+}

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { Placeholder } from '../../atoms';
+
+interface TableCellBaseProps {
+    /**
+     * The label of the cell.
+     */
+    label?: string;
+    /**
+     * If the cell is the last in the row and should not have a border.
+     */
+    hasLastBorderNoneClass?: boolean;
+    /**
+     * Whether the cell content should be centered.
+     */
+    isContentCentered?: boolean;
+}
+
+export function TableCellBase({
+    children,
+    hasLastBorderNoneClass,
+    isContentCentered,
+}: PropsWithChildren<TableCellBaseProps>) {
+    return (
+        <td
+            className={cx(
+                'h-14 border-b border-shader-neutral-light-8 px-md dark:border-shader-neutral-dark-8',
+                { 'last:border-none': hasLastBorderNoneClass },
+                { 'flex items-center justify-center': isContentCentered },
+            )}
+        >
+            {children}
+        </td>
+    );
+}
+
+export interface TableCellTextProps {
+    supportingLabel?: string;
+}
+
+export function TableCellText({
+    children,
+    supportingLabel,
+}: PropsWithChildren<TableCellTextProps>) {
+    return (
+        <div className="flex flex-row items-baseline gap-1">
+            <span>{children}</span>
+            {supportingLabel && (
+                <span className="text-body-sm text-neutral-60 dark:text-neutral-40">
+                    {supportingLabel}
+                </span>
+            )}
+        </div>
+    );
+}
+
+export function TableCellPlaceholder() {
+    return <Placeholder />;
+}

package/src/lib/components/molecules/table-cell/index.ts

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