@iota/apps-ui-kit 0.2.0 → 0.3.0

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 '@/lib';
+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,69 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Tooltip, TooltipPosition } from '../../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;
+}
+
+export function Title({
+    title,
+    subtitle,
+    trailingElement,
+    tooltipText,
+    supportingElement,
+    tooltipPosition,
+    size = TitleSize.Medium,
+}: TitleProps) {
+    return (
+        <div className={cx('flex flex-row items-center justify-between', TITLE_PADDINGS[size])}>
+            <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',
+}

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

@@ -0,0 +1,109 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowDown } from '@iota/apps-ui-icons';
+import { Button, ButtonType } from '@/lib';
+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,123 @@
+// 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 = 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,100 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { IotaLogoMark, MenuIcon } from '@iota/apps-ui-icons';
+import { NavbarItem, NavbarItemProps } 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,58 @@
+// 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, NavbarItem, NavbarItemType } from '@/components';
+import { 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';