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

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]: '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,222 @@
+// 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 '@/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 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 type { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { Placeholder } from '@/components/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';

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -0,0 +1,140 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { Checkbox } from '@/components/atoms/checkbox';
+import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
+
+export interface TableHeaderCellProps {
+    /**
+     * The column key.
+     */
+    columnKey: string | number;
+    /**
+     * The label of the Header cell.
+     */
+    label?: string;
+    /**
+     * Action component to be rendered on the left side.
+     */
+    actionLeft?: React.ReactNode;
+    /**
+     * Action component to be rendered on the right side.
+     */
+    actionRight?: React.ReactNode;
+    /**
+     * Has Sort icon.
+     */
+    hasSort?: boolean;
+    /**
+     * On Sort icon click.
+     */
+    onSortClick?: (columnKey: string | number, sortOrder: TableHeaderCellSortOrder) => void;
+    /**
+     * Has Checkbox.
+     */
+    hasCheckbox?: boolean;
+    /**
+     * Is Checkbox checked.
+     */
+    isChecked?: boolean;
+    /**
+     * Is Checkbox indeterminate.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * On Checkbox change.
+     */
+    onCheckboxChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the cell content should be centered.
+     */
+    isContentCentered?: boolean;
+    /**
+     * Sort order when cell is initialized
+     */
+    sortOrder?: TableHeaderCellSortOrder;
+}
+
+export function TableHeaderCell({
+    label,
+    columnKey,
+    hasSort,
+    hasCheckbox,
+    isChecked,
+    isIndeterminate,
+    isContentCentered,
+    onSortClick,
+    onCheckboxChange,
+    sortOrder,
+}: TableHeaderCellProps): JSX.Element {
+    const handleSort = () => {
+        const newSortOrder =
+            sortOrder === TableHeaderCellSortOrder.Asc
+                ? TableHeaderCellSortOrder.Desc
+                : TableHeaderCellSortOrder.Asc;
+        if (onSortClick) {
+            onSortClick(columnKey, newSortOrder);
+        }
+    };
+
+    const textColorClass = 'text-neutral-10 dark:text-neutral-92';
+    const textSizeClass = 'text-label-lg';
+
+    const sortElement = (() => {
+        if (!hasSort) {
+            return null;
+        }
+
+        if (sortOrder === TableHeaderCellSortOrder.Asc) {
+            return <SortByUp className="shrink-0" />;
+        }
+
+        if (sortOrder === TableHeaderCellSortOrder.Desc) {
+            return <SortByDown className="shrink-0" />;
+        }
+
+        return <SortByUp className="invisible shrink-0 group-hover:visible" />;
+    })();
+
+    return (
+        <th
+            onClick={hasSort ? handleSort : undefined}
+            className={cx(
+                'state-layer group relative h-14 border-b border-shader-neutral-light-8 px-md after:pointer-events-none dark:border-shader-neutral-dark-8',
+                {
+                    'cursor-pointer': hasSort,
+                },
+            )}
+        >
+            <div
+                className={cx(
+                    'flex flex-row items-center gap-1 [&_svg]:h-4 [&_svg]:w-4',
+                    textColorClass,
+                    textSizeClass,
+                    {
+                        'justify-center': isContentCentered,
+                    },
+                )}
+            >
+                {hasCheckbox ? (
+                    <Checkbox
+                        isChecked={isChecked}
+                        isIndeterminate={isIndeterminate}
+                        onCheckedChange={onCheckboxChange}
+                    />
+                ) : (
+                    <span
+                        className={cx({
+                            'text-left': !isContentCentered,
+                        })}
+                    >
+                        {label}
+                    </span>
+                )}
+                {sortElement}
+            </div>
+        </th>
+    );
+}

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

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

package/src/lib/components/molecules/table-header-cell/tableHeaderCell.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum TableHeaderCellSortOrder {
+    Asc = 'asc',
+    Desc = 'desc',
+}

package/src/lib/components/molecules/title/Title.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TooltipPosition } from '@/components/atoms';
+import { Tooltip } from '@/components/atoms';
+import { Info } from '@iota/apps-ui-icons';
+import { TitleSize } from './titleSize.enums';
+import cx from 'classnames';
+import { TITLE_PADDINGS, TITLE_SIZE } from './titleClasses.constants';
+
+interface TitleProps {
+    /**
+     * The title of the component.
+     */
+    title: string;
+    /**
+     * The subtitle of the component.
+     */
+    subtitle?: string;
+    /**
+     * The trailing element.
+     */
+    trailingElement?: React.ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * Supporting Element
+     */
+    supportingElement?: React.ReactNode;
+    /**
+     * The size of the component
+     */
+    size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function Title({
+    title,
+    subtitle,
+    trailingElement,
+    tooltipText,
+    supportingElement,
+    tooltipPosition,
+    size = TitleSize.Medium,
+    testId,
+}: TitleProps) {
+    return (
+        <div
+            className={cx('flex flex-row items-center justify-between', TITLE_PADDINGS[size])}
+            data-testid={testId}
+        >
+            <div className="flex flex-row items-center gap-x-xxxs">
+                <div className="flex flex-col justify-start">
+                    <div className="flex flex-row items-center gap-x-0.5 text-neutral-10 dark:text-neutral-92">
+                        <h4 className={cx(TITLE_SIZE[size])}>{title}</h4>
+                        {tooltipText && (
+                            <Tooltip text={tooltipText} position={tooltipPosition}>
+                                <Info />
+                            </Tooltip>
+                        )}
+                    </div>
+                    <p className="text-label-md text-neutral-60 dark:text-neutral-40">{subtitle}</p>
+                </div>
+                {supportingElement}
+            </div>
+            {trailingElement}
+        </div>
+    );
+}

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

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

package/src/lib/components/molecules/title/titleClasses.constants.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TitleSize } from './titleSize.enums';
+
+export const TITLE_PADDINGS: Record<TitleSize, string> = {
+    [TitleSize.Small]: 'px-md py-sm--rs',
+    [TitleSize.Medium]: 'px-md--rs py-sm--rs',
+};
+
+export const TITLE_SIZE: Record<TitleSize, string> = {
+    [TitleSize.Small]: 'text-title-md',
+    [TitleSize.Medium]: 'text-title-lg',
+};

package/src/lib/components/molecules/title/titleSize.enums.ts

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