@iota/apps-ui-kit 0.2.0 → 0.3.0

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { ArrowRight } from '@iota/apps-ui-icons';
+import { Button, ButtonSize, ButtonType } from '@/components';
+
+export interface ListItemProps {
+    /**
+     * Has right icon (optional).
+     */
+    showRightIcon?: boolean;
+    /**
+     * Hide bottom border (optional).
+     */
+    hideBottomBorder?: boolean;
+    /**
+     * On click handler (optional).
+     */
+    onClick?: () => void;
+    /**
+     * The list item is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list item is highlighted.
+     */
+    isHighlighted?: boolean;
+}
+
+export function ListItem({
+    showRightIcon,
+    hideBottomBorder,
+    onClick,
+    isDisabled,
+    children,
+    isHighlighted,
+}: PropsWithChildren<ListItemProps>): React.JSX.Element {
+    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+        if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    function handleClick() {
+        if (!isDisabled && onClick) {
+            onClick();
+        }
+    }
+
+    return (
+        <div
+            className={cx(
+                'w-full',
+                {
+                    'border-b border-shader-neutral-light-8 pb-xs dark:border-shader-neutral-dark-8':
+                        !hideBottomBorder,
+                },
+                { 'opacity-40': isDisabled },
+            )}
+        >
+            <div
+                onClick={handleClick}
+                role="button"
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+                className={cx(
+                    'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92',
+                    !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
+                    {
+                        'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted,
+                        'state-layer': !isDisabled,
+                    },
+                )}
+            >
+                {children}
+                {showRightIcon && (
+                    <Button
+                        size={ButtonSize.Small}
+                        type={ButtonType.Ghost}
+                        disabled={isDisabled}
+                        icon={<ArrowRight />}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/list-item/index.ts

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

package/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { Loader } from '@iota/apps-ui-icons';
+
+export interface LoadingIndicatorProps {
+    /**
+     * The color of the loading indicator.
+     */
+    color?: string;
+    /**
+     * The size of the loading indicator.
+     */
+    size?: string;
+    /**
+     * The text to display next to the loading indicator.
+     */
+    text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function LoadingIndicator({
+    color = 'text-primary-30 dark:text-primary-80',
+    size = 'w-5 h-5',
+    text,
+    testId,
+}: LoadingIndicatorProps): React.JSX.Element {
+    return (
+        <div className="flex items-center justify-center gap-xs">
+            <Loader className={cx('animate-spin', color, size)} data-testid={testId} />
+            {text && <span className={cx('text-body-sm', color)}>{text}</span>}
+        </div>
+    );
+}

package/src/lib/components/atoms/loading-indicator/index.ts

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

package/src/lib/components/atoms/panel/Panel.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface PanelProps {
+    /**
+     * Show or hide border around the panel.
+     */
+    hasBorder?: boolean;
+    /**
+     * Background color of the panel.
+     */
+    bgColor?: string;
+}
+
+export function Panel({
+    children,
+    hasBorder,
+    bgColor = 'bg-neutral-100 dark:bg-neutral-6',
+}: React.PropsWithChildren<PanelProps>): React.JSX.Element {
+    const borderClass = hasBorder
+        ? 'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8'
+        : 'border border-transparent';
+    return (
+        <div className={cx('flex w-full flex-col rounded-xl', bgColor, borderClass)}>
+            {children}
+        </div>
+    );
+}

package/src/lib/components/atoms/panel/index.ts

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

package/src/lib/components/atoms/placeholder/Placeholder.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface PlaceholderProps {
+    /**
+     * The width of the placeholder.
+     */
+    width?: string;
+    /**
+     * The height of the placeholder.
+     */
+    height?: string;
+}
+
+export function Placeholder({ width = 'w-full', height = 'h-4' }: PlaceholderProps) {
+    return (
+        <div
+            className={cx(
+                'animate-pulse rounded-md bg-gradient-to-r from-shader-primary-light-8 bg-[length:1000px_100%] dark:from-shader-primary-dark-8',
+                width,
+                height,
+            )}
+        />
+    );
+}

package/src/lib/components/atoms/placeholder/index.ts

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

package/src/lib/components/atoms/radio-button/RadioButton.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { RadioOn, RadioOff } from '@iota/apps-ui-icons';
+
+interface RadioButtonProps {
+    /**
+     * The label of the radio button.
+     */
+    label: string;
+    /**
+     * The state of the radio button.
+     */
+    isChecked?: boolean;
+    /**
+     * If radio button disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the radio button is clicked.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function RadioButton({
+    label,
+    isChecked,
+    isDisabled,
+    onChange,
+}: RadioButtonProps): React.JSX.Element {
+    const RadioIcon = isChecked ? RadioOn : RadioOff;
+
+    return (
+        <label
+            className={cx('group flex flex-row gap-x-1 text-center', {
+                disabled: isDisabled,
+                'cursor-pointer': !isDisabled,
+            })}
+        >
+            <div
+                className={cx('relative flex h-10 w-10 items-center justify-center rounded-full', {
+                    'state-layer': !isDisabled,
+                })}
+            >
+                <input
+                    type="radio"
+                    checked={isChecked}
+                    onChange={onChange}
+                    disabled={isDisabled}
+                    className={cx('peer appearance-none disabled:opacity-40')}
+                />
+                <span
+                    className="absolute
+                    text-neutral-40 peer-checked:text-primary-30 peer-disabled:opacity-40 peer-checked:peer-disabled:text-neutral-40 dark:text-neutral-60 dark:peer-checked:peer-disabled:text-neutral-40 [&_svg]:h-6 [&_svg]:w-6
+                "
+                >
+                    <RadioIcon />
+                </span>
+            </div>
+            <span className="inline-flex items-center justify-center text-label-lg text-neutral-40 group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40">
+                {label}
+            </span>
+        </label>
+    );
+}
+
+export { RadioButton };

package/src/lib/components/atoms/radio-button/index.ts

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

package/src/lib/components/atoms/secondary-text/SecondaryText.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface SecondaryTextProps {
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Should the text have error styles.
+     */
+    hasErrorStyles?: boolean;
+}
+
+export function SecondaryText({ children, hasErrorStyles }: SecondaryTextProps) {
+    const ERROR_STYLES = 'group-[.errored]:text-error-30 dark:group-[.errored]:text-error-80';
+    return (
+        <p
+            className={cx('text-label-lg text-neutral-40  dark:text-neutral-60 ', {
+                [ERROR_STYLES]: hasErrorStyles,
+            })}
+        >
+            {children}
+        </p>
+    );
+}

package/src/lib/components/atoms/secondary-text/index.ts

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

package/src/lib/components/atoms/skeleton/Skeleton.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface SkeletonLoaderProps {
+    /**
+     * Width class for the skeleton div.
+     */
+    widthClass?: string;
+    /**
+     * Height class for the skeleton div.
+     */
+    heightClass?: string;
+    /**
+     * If true, the skeleton will use darker neutral colors.
+     */
+    hasSecondaryColors?: boolean;
+    /**
+     * Whether the class `rounded-full` should be applied. Defaults to true.
+     */
+    isRounded?: boolean;
+}
+
+export function Skeleton({
+    children,
+    widthClass = 'w-full',
+    heightClass = 'h-3',
+    hasSecondaryColors,
+    isRounded = true,
+}: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
+    return (
+        <div
+            className={cx(
+                'animate-pulse rounded-full',
+                widthClass,
+                heightClass,
+                isRounded && 'rounded-full',
+                hasSecondaryColors
+                    ? 'bg-neutral-80 dark:bg-neutral-10'
+                    : 'bg-neutral-90 dark:bg-neutral-12',
+            )}
+        >
+            {children}
+        </div>
+    );
+}

package/src/lib/components/atoms/skeleton/index.ts

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

package/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from 'react';
+import cx from 'classnames';
+import { Close } from '@iota/apps-ui-icons';
+import { SnackbarType } from './snackbar.enums';
+import { BACKGROUND_COLOR, TEXT_COLOR } from '@/components/atoms/snackbar/snackbar.classes';
+
+type Renderable = JSX.Element | string | null;
+export interface SnackbarProps {
+    /**
+     * The message to display in the snackbar.
+     */
+    text: Renderable;
+    /**
+     * Type of the snackbar.
+     */
+    type: SnackbarType;
+
+    /**
+     * Duration in milliseconds for the snackbar to auto close. `0` will make the component not close automatically.
+     */
+    duration?: number;
+
+    /**
+     * Callback to close the snackbar.
+     */
+    onClose: () => void;
+
+    /**
+     * Show the close button.
+     */
+    showClose?: boolean;
+}
+
+export function Snackbar({
+    text,
+    duration = 2000,
+    onClose,
+    showClose,
+    type = SnackbarType.Default,
+}: SnackbarProps) {
+    useEffect(() => {
+        if (duration) {
+            const timer = setTimeout(onClose, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, onClose]);
+
+    return (
+        <div
+            className={cx(
+                'transition-all duration-300 ease-out',
+                'z-99 bottom-0',
+                'flex w-full items-center justify-between gap-xxs rounded-md py-sm pl-md pr-sm',
+                BACKGROUND_COLOR[type],
+            )}
+        >
+            <div className={cx('w-full text-left text-body-md', TEXT_COLOR[type])}>{text}</div>
+            {showClose && (
+                <Close
+                    className={cx('h-5 w-5 cursor-pointer', TEXT_COLOR[type])}
+                    onClick={onClose}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/atoms/snackbar/index.ts

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

package/src/lib/components/atoms/snackbar/snackbar.classes.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SnackbarType } from './snackbar.enums';
+
+export const TEXT_COLOR: Record<SnackbarType, string> = {
+    [SnackbarType.Default]: 'text-neutral-10 dark:text-neutral-92',
+    [SnackbarType.Error]: 'text-error-20 dark:text-error-90',
+    [SnackbarType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [SnackbarType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+};
+
+export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
+    [SnackbarType.Default]: 'bg-primary-90 dark:bg-primary-10',
+    [SnackbarType.Error]: 'bg-error-90 dark:bg-error-10',
+    [SnackbarType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [SnackbarType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+};

package/src/lib/components/atoms/snackbar/snackbar.enums.tsx

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum SnackbarType {
+    Default = 'default',
+    Error = 'error',
+    Warning = 'warning',
+    Success = 'success',
+}

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { TooltipPosition } from './tooltip.enums';
+import { TOOLTIP_POSITION } from './tooltip.classes';
+
+interface TooltipProps {
+    text: string;
+    position?: TooltipPosition;
+    maxWidth?: string;
+}
+
+export function Tooltip({
+    text,
+    position = TooltipPosition.Top,
+    maxWidth = 'max-w-[200px]',
+    children,
+}: PropsWithChildren<TooltipProps>): React.JSX.Element {
+    const tooltipPositionClass = TOOLTIP_POSITION[position];
+    return (
+        <div className="group relative inline-block">
+            {children}
+            <div
+                className={cx(
+                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    tooltipPositionClass,
+                    maxWidth,
+                )}
+                role="tooltip"
+            >
+                <p className="w-full break-words">{text}</p>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/atoms/tooltip/index.ts

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

package/src/lib/components/atoms/tooltip/tooltip.classes.ts

@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TooltipPosition } from './tooltip.enums';
+
+export const TOOLTIP_POSITION: Record<TooltipPosition, string> = {
+    [TooltipPosition.Top]: 'bottom-full left-1/2 transform -translate-x-1/2 mb-1',
+    [TooltipPosition.Bottom]: 'top-full left-1/2 transform -translate-x-1/2 mt-1',
+    [TooltipPosition.Left]: 'top-1/2 right-full transform -translate-y-1/2 mr-1',
+    [TooltipPosition.Right]: 'top-1/2 left-full transform -translate-y-1/2 ml-1',
+};

package/src/lib/components/atoms/tooltip/tooltip.enums.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum TooltipPosition {
+    Top = 'top',
+    Bottom = 'bottom',
+    Left = 'left',
+    Right = 'right',
+}

package/src/lib/components/atoms/visual-asset-card/VisualAssetCard.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { VisualAssetType } from './visualAssetCard.enums';
+import { ButtonUnstyled } from '../button';
+import { MoreHoriz, PlaceholderReplace } from '@iota/apps-ui-icons';
+import cx from 'classnames';
+import { useState } from 'react';
+
+export interface VisualAssetCardProps {
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType?: VisualAssetType;
+    /**
+     * The source of the image to be displayed.
+     */
+    assetSrc: string;
+    /**
+     * Alt text for the image.
+     */
+    altText: string;
+    /**
+     * 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;
+}
+
+export function VisualAssetCard({
+    assetType = VisualAssetType.Image,
+    assetSrc,
+    altText,
+    onIconClick,
+    onClick,
+    icon = <MoreHoriz />,
+    assetTitle,
+    isHoverable = true,
+}: VisualAssetCardProps): React.JSX.Element {
+    const [imageError, setImageError] = useState(false);
+
+    const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onIconClick?.(event);
+        event?.stopPropagation();
+    };
+
+    return (
+        <div
+            className={cx('relative aspect-square w-full overflow-hidden rounded-xl', {
+                'group cursor-pointer': isHoverable,
+            })}
+            onClick={onClick}
+        >
+            {assetType === VisualAssetType.Video ? (
+                <video src={assetSrc} className="h-full w-full object-cover" autoPlay loop muted />
+            ) : imageError ? (
+                <div className="flex h-full w-full items-center justify-center bg-neutral-96 dark:bg-neutral-10">
+                    <PlaceholderReplace className="h-4 w-4 text-neutral-40 dark:text-neutral-60" />
+                </div>
+            ) : (
+                <img
+                    src={assetSrc}
+                    alt={altText}
+                    className="h-full w-full object-cover"
+                    onError={() => setImageError(true)}
+                />
+            )}
+            {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:dark:bg-shader-primary-dark-48" />
+            )}
+            {isHoverable && onIconClick && (
+                <ButtonUnstyled
+                    className="absolute right-2 top-2 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 [&_svg]:text-primary-100"
+                    onClick={handleIconClick}
+                >
+                    {icon}
+                </ButtonUnstyled>
+            )}
+            {isHoverable && assetTitle && (
+                <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <span className="text-title-md text-neutral-100">{assetTitle}</span>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/lib/components/atoms/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/atoms/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/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import '../styles/index.css';
+
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';