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

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(
+                'table-cell-border-color h-14  border-b px-md',
+                { '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="table-cell-supporting-label-color text-body-sm">
+                    {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 = 'table-header-text-color';
+    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 table-cell-border-color group relative h-14 border-b px-md after:pointer-events-none',
+                {
+                    '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="title-main-color flex flex-row items-center gap-x-0.5">
+                        <h4 className={cx(TITLE_SIZE[size])}>{title}</h4>
+                        {tooltipText && (
+                            <Tooltip text={tooltipText} position={tooltipPosition}>
+                                <Info className="title-icon-color" />
+                            </Tooltip>
+                        )}
+                    </div>
+                    <p className="title-subtitle-color text-label-md">{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/molecules/visual-asset-card/VisualAssetCard.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonUnstyled } from '../../atoms/button';
+import { MoreHoriz } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { AssetMediaRenderer } from '../../molecules/asset-media-renderer';
+import type { AssetMediaRendererProps } from '../../molecules/asset-media-renderer';
+
+interface VisualAssetBaseProps {
+    /**
+     * The onClick event for the icon.
+     */
+    onIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The onClick event for the card.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The icon to be displayed.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title text to be displayed on hover.
+     */
+    assetTitle?: string;
+    /**
+     * Whether the card is hoverable.
+     */
+    isHoverable?: boolean;
+}
+
+interface CustomAssetDisplayProps {
+    /**
+     * The media to be displayed inside the card.
+     */
+    renderAsset?: React.ReactNode;
+}
+
+export type VisualAssetCardProps = VisualAssetBaseProps &
+    (AssetMediaRendererProps | CustomAssetDisplayProps);
+
+export function VisualAssetCard({
+    onIconClick,
+    onClick,
+    icon = <MoreHoriz />,
+    assetTitle,
+    isHoverable = true,
+    ...assetProps
+}: VisualAssetBaseProps & (AssetMediaRendererProps | CustomAssetDisplayProps)): React.JSX.Element {
+    const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onIconClick?.(event);
+        event?.stopPropagation();
+    };
+
+    const isCustomAsset = !('src' in assetProps);
+
+    return (
+        <div
+            className={cx('relative aspect-square w-full overflow-hidden rounded-xl', {
+                'group cursor-pointer': isHoverable,
+            })}
+            onClick={onClick}
+        >
+            {!isCustomAsset && <AssetMediaRenderer {...assetProps} />}
+
+            {isCustomAsset && assetProps.renderAsset}
+
+            {isHoverable && (
+                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:names:bg-shader-inverted-light-48 group-hover:dark:bg-shader-primary-dark-48" />
+            )}
+            {isHoverable && onIconClick && (
+                <ButtonUnstyled
+                    className="visual-asset-icon-color absolute right-2 top-2 z-10 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
+                    onClick={handleIconClick}
+                >
+                    {icon}
+                </ButtonUnstyled>
+            )}
+            {isHoverable && assetTitle && (
+                <div className="absolute bottom-0 w-full p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <span className="visual-asset-title-color break-words text-title-md">
+                        {assetTitle}
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/lib/components/molecules/visual-asset-card/index.ts

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

package/src/lib/components/molecules/visual-asset-card/visualAssetCard.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum VisualAssetType {
+    Image = 'image',
+    Video = 'video',
+}

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

@@ -0,0 +1,108 @@
+// 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('accordion-bg rounded-xl', {
+                'accordion-border-color border': !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 = 'accordion-icon-color 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';