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

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -0,0 +1,109 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowDown } from '@iota/apps-ui-icons';
+import { Button, ButtonType } from '@/components/atoms';
+import { ICON_STYLE } from './accordion.classes';
+
+export interface AccordionHeaderProps {
+    /**
+     * Flag for show/hide content
+     */
+    isExpanded: boolean;
+
+    /**
+     * Action on toggle show/hide content
+     */
+    onToggle: () => void;
+
+    /**
+     * The type of the badge.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Flag for hiding arrow.
+     */
+    hideArrow?: boolean;
+    /**
+     * Flag for hiding border.
+     */
+    hideBorder?: boolean;
+}
+
+interface AccordionContentProps {
+    /**
+     * Flag for show/hide content
+     */
+    isExpanded: boolean;
+}
+
+export function AccordionHeader({
+    onToggle,
+    children,
+    isExpanded,
+    hideArrow,
+}: PropsWithChildren<AccordionHeaderProps>) {
+    return (
+        <div
+            onClick={onToggle}
+            className={cx(
+                'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
+                {
+                    'pr-md--rs': !hideArrow,
+                },
+            )}
+        >
+            {children}
+            {!hideArrow && (
+                <div className="[&_svg]:h-5 [&_svg]:w-5">
+                    <Button
+                        type={ButtonType.Ghost}
+                        icon={
+                            <ArrowDown
+                                className={cx(ICON_STYLE, {
+                                    'rotate-180': isExpanded,
+                                })}
+                            />
+                        }
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function AccordionContent({
+    isExpanded,
+    children,
+}: PropsWithChildren<AccordionContentProps>) {
+    return (
+        <div
+            className={cx({
+                hidden: !isExpanded,
+            })}
+        >
+            {children}
+        </div>
+    );
+}
+
+export function Accordion({
+    children,
+    hideBorder,
+}: {
+    children: React.ReactNode;
+    hideBorder?: boolean;
+}): React.JSX.Element {
+    return (
+        <div
+            className={cx('rounded-xl bg-neutral-100 dark:bg-neutral-6', {
+                'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
+                    !hideBorder,
+            })}
+        >
+            {children}
+        </div>
+    );
+}

package/src/lib/components/organisms/accordion/accordion.classes.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const ICON_STYLE = 'text-neutral-10 dark:text-neutral-92 transition-transform ease-linear';

package/src/lib/components/organisms/accordion/index.ts

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

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -0,0 +1,142 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import cx from 'classnames';
+import * as React from 'react';
+import { Close } from '@iota/apps-ui-icons';
+import { useEffect, useState } from 'react';
+import { DialogPosition } from './dialog.enums';
+
+const Dialog = ({
+    open,
+    onOpenChange,
+    children,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => {
+    const handleOpenChange = (isOpen: boolean) => {
+        const isMouseOverToast = document.querySelector('.toast-layer:hover');
+        if (!isOpen && isMouseOverToast) {
+            return;
+        }
+        onOpenChange?.(isOpen);
+    };
+
+    return (
+        <RadixDialog.Root open={open} onOpenChange={handleOpenChange} {...props}>
+            {children}
+        </RadixDialog.Root>
+    );
+};
+const DialogTrigger = RadixDialog.Trigger;
+const DialogClose = RadixDialog.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof RadixDialog.Overlay>,
+    React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay> & {
+        showCloseIcon?: boolean;
+        position?: DialogPosition;
+    }
+>(({ showCloseIcon, position, ...props }, ref) => (
+    <RadixDialog.Overlay
+        ref={ref}
+        className={cx('inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md', {
+            fixed: position === DialogPosition.Right,
+            absolute: position === DialogPosition.Center,
+        })}
+        {...props}
+    >
+        <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
+            <Close />
+        </DialogClose>
+    </RadixDialog.Overlay>
+));
+DialogOverlay.displayName = RadixDialog.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof RadixDialog.Content>,
+    React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & {
+        containerId?: string;
+        showCloseOnOverlay?: boolean;
+        position?: DialogPosition;
+        customWidth?: string;
+    }
+>(
+    (
+        {
+            className,
+            containerId,
+            showCloseOnOverlay,
+            children,
+            position = DialogPosition.Center,
+            customWidth = 'w-80 max-w-[85vw] md:w-96',
+            ...props
+        },
+        ref,
+    ) => {
+        const [containerElement, setContainerElement] = useState<HTMLElement | undefined>(
+            undefined,
+        );
+
+        useEffect(() => {
+            // This ensures document.getElementById is called in the client-side environment only.
+            // note. containerElement cant be null
+            const element = containerId ? document.getElementById(containerId) : undefined;
+            setContainerElement(element ?? undefined);
+        }, [containerId]);
+        const positionClass =
+            position === DialogPosition.Right
+                ? 'overflow-hidden right-0 h-screen top-0 w-full'
+                : 'overflow-y-auto overflow-x-hidden left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl';
+        const widthClass =
+            position === DialogPosition.Right ? 'md:w-96 max-w-[500px]' : customWidth;
+        const heightClass = position === DialogPosition.Right ? 'h-screen' : 'max-h-[80vh] h-full';
+        return (
+            <RadixDialog.Portal container={containerElement}>
+                <DialogOverlay showCloseIcon={showCloseOnOverlay} position={position} />
+                <RadixDialog.Content
+                    ref={ref}
+                    className={cx(
+                        'fixed z-[99999] flex flex-col justify-center bg-primary-100 dark:bg-neutral-6',
+                        positionClass,
+                        widthClass,
+                    )}
+                    {...props}
+                >
+                    <VisuallyHidden.Root>
+                        <RadixDialog.Title />
+                        <RadixDialog.Description />
+                    </VisuallyHidden.Root>
+                    <div className={cx('flex flex-1 flex-col', heightClass)}>{children}</div>
+                </RadixDialog.Content>
+            </RadixDialog.Portal>
+        );
+    },
+);
+DialogContent.displayName = RadixDialog.Content.displayName;
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof RadixDialog.Title>,
+    React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>((props, ref) => (
+    <RadixDialog.Title
+        ref={ref}
+        className="font-inter text-title-lg text-neutral-10 dark:text-neutral-92"
+        {...props}
+    />
+));
+DialogTitle.displayName = RadixDialog.Title.displayName;
+
+const DialogBody = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+    (props, ref) => (
+        <div
+            ref={ref}
+            className="flex-1 overflow-y-auto p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
+            {...props}
+        />
+    ),
+);
+DialogBody.displayName = 'DialogBody';
+
+export { Dialog, DialogClose, DialogTrigger, DialogContent, DialogTitle, DialogBody };

package/src/lib/components/organisms/dialog/dialog.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum DialogPosition {
+    Center = 'center',
+    Right = 'right',
+}

package/src/lib/components/organisms/dialog/index.ts

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

package/src/lib/components/organisms/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './dialog';
+export * from './table';
+export * from './navbar';
+export * from './accordion';

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { IotaLogoMark, MenuIcon } from '@iota/apps-ui-icons';
+import type { NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import { NavbarItem } from '@/components/molecules/navbar-item/NavbarItem';
+
+export type NavbarItemWithId = NavbarItemProps & { id: string };
+
+export interface NavbarProps {
+    /**
+     * If this flag is true we need to leave only the icon and collapsible button
+     */
+    isCollapsible?: boolean;
+
+    /**
+     * List of elements to be displayed in the navbar.
+     */
+    items: NavbarItemWithId[];
+
+    /**
+     * The id of the active element.
+     */
+    activeId: string;
+
+    /**
+     * Callback when an element is clicked.
+     */
+    onClickItem: (id: string) => void;
+
+    /**
+     * If the navbar is collapsible, this flag indicates if it is open or not.
+     */
+    isOpen?: boolean;
+
+    /**
+     * Callback when the navbar is toggled.
+     */
+    onToggleNavbar?: () => void;
+}
+
+export function Navbar({
+    items,
+    activeId,
+    onClickItem,
+    isCollapsible = false,
+    onToggleNavbar,
+}: NavbarProps) {
+    return (
+        <div
+            className={cx('flex h-fit w-full', {
+                'flex-col px-md py-xs sm:h-full sm:w-auto sm:px-none sm:py-xl': isCollapsible,
+            })}
+        >
+            {isCollapsible && (
+                <div className="flex w-full items-center justify-between sm:mb-[48px] sm:flex-col">
+                    <div className="flex justify-center [&_svg]:h-[38px] [&_svg]:w-[38px]">
+                        <IotaLogoMark className="text-neutral-10 dark:text-neutral-92" />
+                    </div>
+                    <div
+                        className="state-layer relative rounded-full p-xs hover:cursor-pointer dark:text-neutral-92 sm:hidden [&_svg]:h-6 [&_svg]:w-6"
+                        onClick={onToggleNavbar}
+                    >
+                        <MenuIcon />
+                    </div>
+                </div>
+            )}
+            <div
+                className={cx({
+                    'flex w-full justify-between px-sm py-xxs': !isCollapsible,
+                    'hidden sm:flex sm:flex-col sm:gap-2': isCollapsible,
+                })}
+            >
+                {items.map((item) => (
+                    <div
+                        key={item.id}
+                        className={cx('flex items-center', {
+                            'px-xs py-xxs': !isCollapsible,
+                            'py-xxs pl-xs pr-sm': isCollapsible,
+                        })}
+                        data-testid={`nav-${item.id}`}
+                    >
+                        <NavbarItem
+                            {...item}
+                            isSelected={item.id === activeId}
+                            onClick={(e) => {
+                                if (item.onClick) {
+                                    item.onClick(e);
+                                }
+                                if (!item.isDisabled) {
+                                    onClickItem(item.id);
+                                }
+                            }}
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ArrowBack } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { Button, ButtonType } from '@/components/atoms';
+import { NavbarItem, NavbarItemType } from '@/components/molecules';
+import type { NavbarProps } from './Navbar';
+
+export function NavbarSlideout({
+    items,
+    activeId,
+    onClickItem,
+    isOpen,
+    onToggleNavbar,
+}: NavbarProps) {
+    return (
+        <>
+            <div
+                onClick={onToggleNavbar}
+                className={cx('duration-800 transition-opacity ease-out', {
+                    'opacity-1 fixed left-0 top-0 h-full w-full bg-shader-neutral-light-72': isOpen,
+                    '-translate-x-full opacity-0': !isOpen,
+                })}
+            />
+            <div
+                className={cx(
+                    'z-999 rounded-tb-3xl fixed left-0 top-0 h-full w-11/12 rounded-tr-3xl bg-white px-lg py-lg transition-transform duration-300 ease-out dark:bg-neutral-6',
+                    {
+                        'translate-x-0': isOpen,
+                        '-translate-x-full': !isOpen,
+                    },
+                )}
+            >
+                <div className="flex flex-col gap-2">
+                    <div className="[&_svg]:h-5 [&_svg]:w-5">
+                        <Button
+                            type={ButtonType.Ghost}
+                            onClick={onToggleNavbar}
+                            icon={<ArrowBack />}
+                        />
+                    </div>
+                    {items.map((item) => (
+                        <NavbarItem
+                            key={item.id}
+                            {...item}
+                            type={NavbarItemType.Vertical}
+                            isSelected={item.id === activeId}
+                            onClick={() => {
+                                onClickItem(item.id);
+                                onToggleNavbar && onToggleNavbar();
+                            }}
+                        />
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+}

package/src/lib/components/organisms/navbar/index.ts

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

package/src/lib/components/organisms/table/Table.tsx

@@ -0,0 +1,234 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren, ReactNode } from 'react';
+import cx from 'classnames';
+import { TableProvider, useTableContext } from './TableContext';
+import type { ButtonProps } from '@/components/atoms';
+import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
+import { TableCellBase, TableHeaderCell } from '@/components/molecules';
+import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
+
+export interface TablePaginationOptions {
+    /**
+     * On Next page button click.
+     */
+    onNext?: () => void;
+    /**
+     * On Previous page button click.
+     */
+    onPrev?: () => void;
+    /**
+     * On First page button click.
+     */
+    onFirst?: () => void;
+    /**
+     * On Last page button click.
+     */
+    onLast?: () => void;
+    /**
+     * Has Next button.
+     */
+    hasNext?: boolean;
+    /**
+     * Has Previous button.
+     */
+    hasPrev?: boolean;
+    /**
+     * Has First button.
+     */
+    hasFirst?: boolean;
+    /**
+     * Has Last button.
+     */
+    hasLast?: boolean;
+}
+
+export type TableProps = {
+    /**
+     * Options for the table pagination.
+     */
+    paginationOptions?: TablePaginationOptions;
+    /**
+     * The action component.
+     */
+    action?: ReactNode;
+    /**
+     * The supporting label of the table.
+     */
+    supportingLabel?: string;
+    /**
+     * Numeric indexes of the selected rows.
+     */
+    selectedRowIndexes?: Set<number>;
+    /**
+     * Numeric indexes of all the rows.
+     */
+    rowIndexes: number[];
+    /**
+     * The page size selector component.
+     */
+    pageSizeSelector?: ReactNode;
+
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
+};
+
+export function Table({
+    paginationOptions,
+    action,
+    supportingLabel,
+    selectedRowIndexes = new Set(),
+    rowIndexes,
+    children,
+    pageSizeSelector,
+    heightFull = false,
+}: PropsWithChildren<TableProps>): JSX.Element {
+    return (
+        <TableProvider selectedRowIndexes={selectedRowIndexes} rowIndexes={rowIndexes}>
+            <div className={cx('w-full', { 'h-full': heightFull })}>
+                <div
+                    className={cx('overflow-auto', {
+                        'h-full': heightFull,
+                    })}
+                >
+                    <table
+                        className={cx('w-full table-auto', {
+                            'h-full': heightFull,
+                        })}
+                    >
+                        {children}
+                    </table>
+                </div>
+                <div
+                    className={cx('flex w-full items-center gap-sm pt-md', {
+                        hidden: !supportingLabel && !paginationOptions && !action,
+                        'flex-col justify-between sm:flex-row': paginationOptions,
+                        'justify-end': !paginationOptions && action,
+                    })}
+                >
+                    {(paginationOptions || action) && (
+                        <div className="flex gap-2">
+                            {paginationOptions && (
+                                <>
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowLeft />}
+                                        disabled={!paginationOptions.hasFirst}
+                                        onClick={paginationOptions.onFirst}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowLeft />}
+                                        disabled={!paginationOptions.hasPrev}
+                                        onClick={paginationOptions.onPrev}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowRight />}
+                                        disabled={!paginationOptions.hasNext}
+                                        onClick={paginationOptions.onNext}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowRight />}
+                                        disabled={!paginationOptions.hasLast}
+                                        onClick={paginationOptions.onLast}
+                                    />
+                                </>
+                            )}
+                            {action && action}
+                        </div>
+                    )}
+                    {supportingLabel || pageSizeSelector ? (
+                        <div className="flex flex-row items-center gap-x-sm">
+                            {supportingLabel && (
+                                <span className=" text-label-md text-neutral-40 dark:text-neutral-60">
+                                    {supportingLabel}
+                                </span>
+                            )}
+                            {pageSizeSelector && <div className="ml-2">{pageSizeSelector}</div>}
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+        </TableProvider>
+    );
+}
+
+export function TableActionButton(props: PropsWithChildren<ButtonProps>) {
+    return <Button type={ButtonType.Secondary} size={ButtonSize.Small} {...props} />;
+}
+
+export function TableHeader({ children }: PropsWithChildren): JSX.Element {
+    return <thead>{children}</thead>;
+}
+
+export function TableRow({
+    children,
+    leading,
+}: PropsWithChildren<{ leading?: React.ReactNode }>): JSX.Element {
+    return (
+        <tr>
+            {leading}
+            {children}
+        </tr>
+    );
+}
+
+const TEXT_COLOR_CLASS = 'text-neutral-40 dark:text-neutral-60';
+const TEXT_SIZE_CLASS = 'text-body-md';
+
+export function TableBody({ children }: PropsWithChildren): JSX.Element {
+    return <tbody className={cx(TEXT_COLOR_CLASS, TEXT_SIZE_CLASS)}>{children}</tbody>;
+}
+
+export interface TableRowCheckboxProps {
+    rowIndex: number;
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export function TableRowCheckbox({
+    rowIndex,
+    onCheckboxChange,
+}: TableRowCheckboxProps): React.JSX.Element {
+    const { selectedRowIndexes } = useTableContext();
+
+    return (
+        <TableCellBase isContentCentered>
+            <Checkbox
+                onCheckedChange={(event) => {
+                    onCheckboxChange(event.target.checked);
+                }}
+                isChecked={selectedRowIndexes.has(rowIndex)}
+            />
+        </TableCellBase>
+    );
+}
+
+export interface TableHeaderCheckboxProps {
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export function TableHeaderCheckbox({ onCheckboxChange }: TableHeaderCheckboxProps): JSX.Element {
+    const { isHeaderChecked, isHeaderIndeterminate } = useTableContext();
+
+    return (
+        <TableHeaderCell
+            isContentCentered
+            hasCheckbox
+            onCheckboxChange={(event) => {
+                onCheckboxChange(event.target.checked);
+            }}
+            isChecked={isHeaderChecked}
+            columnKey={1}
+            isIndeterminate={isHeaderIndeterminate}
+        />
+    );
+}