@iota/apps-ui-kit 0.2.0 → 0.3.0

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { SecondaryText } from '../../atoms/secondary-text';
+import { LABEL_CLASSES } from './input.classes';
+import { createElement } from 'react';
+
+export enum LabelHtmlTag {
+    Label = 'label',
+    Div = 'div',
+}
+
+export interface InputWrapperProps {
+    /**
+     * Shows a label with the text above the input.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Is the input required
+     */
+    required?: boolean;
+    /**
+     * Is the input disabled
+     */
+    disabled?: boolean;
+    /**
+     * Use a div as a label instead of a label element
+     */
+    labelHtmlTag?: LabelHtmlTag;
+}
+
+export function InputWrapper({
+    label,
+    caption,
+    disabled,
+    errorMessage,
+    amountCounter,
+    required,
+    labelHtmlTag = LabelHtmlTag.Label,
+    children,
+}: React.PropsWithChildren<InputWrapperProps>) {
+    return (
+        <div
+            className={cx('group flex w-full flex-col gap-y-2', {
+                'cursor-not-allowed opacity-40': disabled,
+                errored: errorMessage,
+                enabled: !disabled,
+                required: required,
+            })}
+        >
+            {label ? (
+                <LabelWrapper labelHtmlTag={labelHtmlTag}>
+                    {label}
+                    {children}
+                </LabelWrapper>
+            ) : (
+                children
+            )}
+
+            {(errorMessage || caption || amountCounter) && (
+                <div
+                    className={cx(
+                        'flex flex-row items-center',
+                        caption || errorMessage ? 'justify-between' : 'justify-end',
+                    )}
+                >
+                    {(errorMessage || caption) && (
+                        <SecondaryText hasErrorStyles>{errorMessage || caption}</SecondaryText>
+                    )}
+                    {amountCounter && <SecondaryText>{amountCounter}</SecondaryText>}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function LabelWrapper({
+    labelHtmlTag,
+    children,
+}: Required<Pick<InputWrapperProps, 'labelHtmlTag'>> & {
+    children: React.ReactNode;
+}) {
+    return createElement(labelHtmlTag, { className: LABEL_CLASSES }, children);
+}

package/src/lib/components/molecules/input/TextArea.tsx

@@ -0,0 +1,149 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useEffect, useState } from 'react';
+import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import {
+    BORDER_CLASSES,
+    INPUT_CLASSES,
+    INPUT_TEXT_CLASSES,
+    INPUT_PLACEHOLDER_CLASSES,
+} from './input.classes';
+import cx from 'classnames';
+import { ButtonUnstyled } from '../../atoms/button';
+import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
+
+type TextAreaProps = Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'cols' | 'resize' | 'className'
+>;
+
+interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
+    /**
+     * Shows a label with the text above the input field.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input field.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * If true the textarea is resizable vertically
+     */
+    isResizeEnabled?: boolean;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(function TextArea(
+    {
+        label,
+        caption,
+        disabled,
+        errorMessage,
+        value,
+        amountCounter,
+        isVisibilityToggleEnabled,
+        isResizeEnabled,
+        required,
+        isContentVisible,
+        ...textareaProps
+    },
+    ref,
+) {
+    const [isInputContentVisible, setIsInputContentVisible] = useState<boolean>(
+        isContentVisible ?? true,
+    );
+
+    useEffect(() => {
+        setIsInputContentVisible(isContentVisible ?? true);
+    }, [isContentVisible]);
+
+    function onToggleButtonClick() {
+        setIsInputContentVisible((prev) => !prev);
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            caption={caption}
+            disabled={disabled || !isInputContentVisible}
+            errorMessage={errorMessage}
+            amountCounter={amountCounter}
+            required={required}
+        >
+            <div className="relative">
+                <textarea
+                    disabled={disabled || !isInputContentVisible}
+                    required={required}
+                    ref={ref}
+                    className={cx(
+                        'peer block min-h-[50px]',
+                        BORDER_CLASSES,
+                        INPUT_CLASSES,
+                        INPUT_TEXT_CLASSES,
+                        INPUT_PLACEHOLDER_CLASSES,
+                        isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
+                        !isInputContentVisible &&
+                            'not-visible select-none text-transparent dark:text-transparent',
+                    )}
+                    value={isInputContentVisible ? value : ''}
+                    {...textareaProps}
+                />
+                {!isInputContentVisible && (
+                    <div className="absolute left-0 top-0 flex h-full w-full flex-col items-stretch gap-y-2 px-md py-sm peer-[.not-visible]:select-none">
+                        <VisibilityOffBar rows={3} halfWidthRow={3} />
+                    </div>
+                )}
+
+                {isVisibilityToggleEnabled && (
+                    <span className="absolute bottom-4 right-4 flex">
+                        <ButtonUnstyled
+                            onClick={onToggleButtonClick}
+                            className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                            tabIndex={-1}
+                        >
+                            {isInputContentVisible ? <VisibilityOn /> : <VisibilityOff />}
+                        </ButtonUnstyled>
+                    </span>
+                )}
+            </div>
+        </InputWrapper>
+    );
+});
+
+interface VisibilityOffBarProps {
+    rows: number;
+    halfWidthRow?: number;
+}
+
+function VisibilityOffBar({ rows, halfWidthRow }: VisibilityOffBarProps) {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, index) => {
+                const isHalfWidth = halfWidthRow === index + 1;
+                const width = isHalfWidth ? 'w-1/2' : 'w-full';
+                return (
+                    <div
+                        key={index}
+                        className={`h-2.5 rounded bg-neutral-92/60 dark:bg-neutral-10/60 ${width}`}
+                    />
+                );
+            })}
+        </>
+    );
+}

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Input';
+export * from './TextArea';
+
+export * from './input.types';
+export * from './input.enums';

package/src/lib/components/molecules/input/input.classes.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const INPUT_CLASSES =
+    'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
+export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
+export const INPUT_PLACEHOLDER_CLASSES =
+    'enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
+export const BORDER_CLASSES =
+    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50 dark:border-neutral-20 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:!border-primary-30 [&:has(input:focus)]:dark:!border-primary-80';
+export const INPUT_NUMBER_CLASSES =
+    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
+export const LABEL_CLASSES =
+    'flex flex-col gap-y-2 text-label-lg text-neutral-40 dark:text-neutral-60';

package/src/lib/components/molecules/input/input.enums.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum InputType {
+    Text = 'text',
+    Password = 'password',
+    Number = 'number',
+    NumericFormat = 'numericFormat',
+}
+
+export enum Resize {
+    None = 'none',
+    Vertical = 'vertical',
+}

package/src/lib/components/molecules/input/input.types.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ComponentProps } from 'react';
+import { InputType } from '.';
+import { NumericFormat } from 'react-number-format';
+
+type InputElementProps = Omit<
+    React.ComponentProps<'input'>,
+    'type' | 'className' | 'ref' | 'value' | 'defaultValue'
+>;
+
+type GenericInputProps = {
+    type: InputType.Text | InputType.Password | InputType.Number;
+};
+
+type NumericFormatProps = ComponentProps<typeof NumericFormat>;
+
+export type NumericFormatInputProps = {
+    type: InputType.NumericFormat;
+    suffix?: NumericFormatProps['suffix'];
+    prefix?: NumericFormatProps['prefix'];
+    decimalScale?: NumericFormatProps['decimalScale'];
+    allowNegative?: NumericFormatProps['allowNegative'];
+    thousandSeparator?: NumericFormatProps['thousandSeparator'];
+    onValueChange?: NumericFormatProps['onValueChange'];
+};
+
+export type InputPropsByType = InputElementProps & (NumericFormatInputProps | GenericInputProps);

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NavbarItemHorizontal } from './NavbarItemHorizontal';
+import { NavbarItemVertical } from './NavbarItemVertical';
+import { NavbarItemType } from './navbarItem.enums';
+
+export interface NavbarItemProps {
+    /**
+     * The type of the navbar item.
+     */
+    type?: NavbarItemType;
+
+    /**
+     * The icon of the navbar item.
+     */
+    icon: React.ReactNode;
+    /**
+     * The text of the navbar item.
+     */
+    text?: string;
+    /**
+     * Indicates if the navbar item is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates if the navbar item has a badge.
+     */
+    hasBadge?: boolean;
+    /**
+     * The onClick event of the navbar item.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Indicates if the navbar item is disabled.
+     */
+    isDisabled?: boolean;
+}
+
+export function NavbarItem(props: NavbarItemProps): React.JSX.Element {
+    const { type, text } = props;
+
+    if (type === NavbarItemType.Vertical && !!text) {
+        return <NavbarItemVertical {...props} />;
+    }
+
+    return <NavbarItemHorizontal {...props} />;
+}

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    BADGE_WITH_TEXT,
+    BADGE_WITHOUT_TEXT,
+    PADDING_WITH_TEXT,
+    PADDING_WITHOUT_TEXT,
+    SELECTED_BACKGROUND,
+    SELECTED_ICON,
+    SELECTED_TEXT,
+    UNSELECTED_ICON,
+    UNSELECTED_TEXT,
+} from './navbarItem.classes';
+import { Badge, BadgeType } from '../../atoms';
+import { NavbarItemProps } from './NavbarItem';
+
+export function NavbarItemHorizontal({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const paddingClasses = text ? PADDING_WITH_TEXT : PADDING_WITHOUT_TEXT;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const badgePositionClasses = text ? BADGE_WITH_TEXT : BADGE_WITHOUT_TEXT;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'inline-flex cursor-pointer flex-col items-center justify-center space-y-1',
+            )}
+        >
+            <div
+                className={cx(
+                    'relative inline-flex rounded-full',
+                    paddingClasses,
+                    backgroundColors,
+                    disabledClasses,
+                )}
+            >
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {hasBadge && (
+                    <div className={cx('absolute', badgePositionClasses)}>
+                        <Badge type={BadgeType.PrimarySolid} />
+                    </div>
+                )}
+            </div>
+            {text && <span className={cx('text-center text-label-md', textClasses)}>{text}</span>}
+        </div>
+    );
+}

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    SELECTED_BACKGROUND,
+    SELECTED_ICON,
+    SELECTED_TEXT,
+    UNSELECTED_ICON,
+    UNSELECTED_TEXT,
+} from './navbarItem.classes';
+import { Badge, BadgeType } from '../../atoms';
+import { NavbarItemProps } from './NavbarItem';
+
+export function NavbarItemVertical({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled
+        ? 'cursor-not-allowed opacity-60'
+        : 'state-layer cursor-pointer ';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'relative inline-flex w-full flex-row items-center justify-between rounded-full p-sm',
+                backgroundColors,
+                disabledClasses,
+            )}
+        >
+            <div className="flex items-center gap-3">
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {text && (
+                    <span className={cx('text-center text-label-lg', textClasses)}>{text}</span>
+                )}
+            </div>
+            {hasBadge && <Badge type={BadgeType.PrimarySolid} />}
+        </div>
+    );
+}

package/src/lib/components/molecules/navbar-item/index.ts

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

package/src/lib/components/molecules/navbar-item/navbarItem.classes.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const SELECTED_ICON = 'text-neutral-10 dark:text-neutral-92';
+export const UNSELECTED_ICON = 'text-neutral-40 dark:text-neutral-60';
+
+export const PADDING_WITH_TEXT = 'py-xxs px-sm';
+export const PADDING_WITHOUT_TEXT = 'p-sm';
+
+export const SELECTED_BACKGROUND = 'bg-shader-primary-light-12 dark:bg-shader-primary-dark-12';
+
+export const BADGE_WITH_TEXT = '-top-3 right-3';
+export const BADGE_WITHOUT_TEXT = '-top-1 right-3';
+
+export const SELECTED_TEXT = 'text-neutral-10 dark:text-neutral-92';
+export const UNSELECTED_TEXT = 'text-neutral-60 dark:text-neutral-40';

package/src/lib/components/molecules/navbar-item/navbarItem.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum NavbarItemType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}