@iota/apps-ui-kit 0.2.0 → 0.3.0

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
   },
   "license": "Apache-2.0",
   "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "src",
     "dist"
   ],
   "exports": {
@@ -27,7 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.2.0"
+    "@iota/apps-ui-icons": "0.2.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
@@ -51,7 +54,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   },

package/src/lib/components/atoms/badge/Badge.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import { BadgeType } from './badge.enums';
+import { BACKGROUND_COLORS, BADGE_TEXT_CLASS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
+
+interface BadgeProps {
+    /**
+     * The type of the badge.
+     */
+    type: BadgeType;
+    /**
+     * The label of the badge.
+     */
+    label?: string;
+}
+
+export function Badge({ type, label }: BadgeProps): React.JSX.Element {
+    const backgroundClasses = BACKGROUND_COLORS[type];
+    const textClasses = TEXT_COLORS[type];
+    const borderClasses = BORDER_COLORS[type];
+    const labelClasses = label ? 'px-xs py-xxs' : 'h-1.5 w-1.5';
+
+    return (
+        <div
+            className={cx(
+                'inline-flex items-center space-x-2 rounded-full border disabled:opacity-30',
+                backgroundClasses,
+                borderClasses,
+                labelClasses,
+            )}
+        >
+            <span className={cx(BADGE_TEXT_CLASS, textClasses)}>{label}</span>
+        </div>
+    );
+}

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

@@ -0,0 +1,24 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { BadgeType } from './badge.enums';
+
+export const BACKGROUND_COLORS = {
+    [BadgeType.PrimarySolid]: 'bg-primary-30',
+    [BadgeType.Neutral]: 'bg-neutral-92 dark:bg-neutral-12',
+    [BadgeType.PrimarySoft]: 'bg-primary-90 dark:bg-primary-10',
+};
+
+export const TEXT_COLORS: Record<BadgeType, string> = {
+    [BadgeType.PrimarySolid]: 'text-primary-100',
+    [BadgeType.Neutral]: 'text-neutral-10 dark:text-neutral-92',
+    [BadgeType.PrimarySoft]: 'text-primary-20 dark:text-primary-90',
+};
+
+export const BORDER_COLORS: Record<BadgeType, string> = {
+    [BadgeType.PrimarySolid]: 'border-primary-30',
+    [BadgeType.Neutral]: 'border-neutral-92 dark:border-neutral-12',
+    [BadgeType.PrimarySoft]: 'border-primary-90 dark:border-primary-10',
+};
+
+export const BADGE_TEXT_CLASS = 'text-label-md';

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum BadgeType {
+    Neutral = 'neutral',
+    PrimarySolid = 'primary-solid',
+    PrimarySoft = 'primary-fill',
+}

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

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

package/src/lib/components/atoms/button/Button.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonHtmlType, ButtonSize, ButtonType } from './button.enums';
+import {
+    PADDINGS,
+    PADDINGS_ONLY_ICON,
+    BACKGROUND_COLORS,
+    TEXT_COLORS,
+    TEXT_CLASSES,
+    TEXT_COLOR_DISABLED,
+    DISABLED_BACKGROUND_COLORS,
+} from './button.classes';
+import cx from 'classnames';
+
+export interface ButtonProps {
+    /**
+     * The size of the button.
+     */
+    size?: ButtonSize;
+    /**
+     * The type of the button
+     */
+    type?: ButtonType;
+    /**
+     * The text of the button.
+     */
+    text?: string;
+    /**
+     The icon of the button
+     */
+    icon?: React.ReactNode;
+    /**
+     * Should the icon be after the text.
+     */
+    iconAfterText?: boolean;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The onClick event of the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the button should have the full width.
+     */
+    fullWidth?: boolean;
+    /**
+     * The type of the button. Available options are 'button', 'submit', 'reset'.
+     */
+    htmlType?: ButtonHtmlType;
+    /**
+     * The tab index of the button.
+     */
+    tabIndex?: number;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export function Button({
+    icon,
+    text,
+    disabled,
+    onClick,
+    fullWidth,
+    htmlType = ButtonHtmlType.Button,
+    size = ButtonSize.Medium,
+    type = ButtonType.Primary,
+    iconAfterText = false,
+    tabIndex = 0,
+    testId,
+}: ButtonProps): React.JSX.Element {
+    const paddingClasses = icon && !text ? PADDINGS_ONLY_ICON[size] : PADDINGS[size];
+    const textSizes = TEXT_CLASSES[size];
+    const backgroundColors = disabled ? DISABLED_BACKGROUND_COLORS[type] : BACKGROUND_COLORS[type];
+    const textColors = disabled ? TEXT_COLOR_DISABLED[type] : TEXT_COLORS[type];
+    return (
+        <button
+            onClick={onClick}
+            type={htmlType}
+            className={cx(
+                'state-layer relative flex items-center justify-center gap-2 rounded-full transition-all duration-150 ease-in disabled:cursor-not-allowed disabled:opacity-40',
+                paddingClasses,
+                backgroundColors,
+                fullWidth && 'w-full',
+                !iconAfterText ? 'flex-row' : 'flex-row-reverse',
+            )}
+            disabled={disabled}
+            tabIndex={tabIndex}
+            data-testid={testId}
+        >
+            {icon && <span className={cx(textColors)}>{icon}</span>}
+            {text && <span className={cx('font-inter', textColors, textSizes)}>{text}</span>}
+        </button>
+    );
+}

package/src/lib/components/atoms/button/button-variants/ButtonPill.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonHtmlType } from '../button.enums';
+import { ButtonVariantProps } from './buttonVariants.types';
+
+export function ButtonPill({
+    htmlType = ButtonHtmlType.Button,
+    children,
+    tabIndex = 0,
+    ...buttonProps
+}: Omit<ButtonVariantProps, 'className'>) {
+    return (
+        <button
+            className="flex items-center justify-center rounded-xl border border-neutral-70 px-sm text-body-md text-neutral-40 disabled:opacity-40 dark:border-neutral-40 dark:text-neutral-60"
+            type={htmlType}
+            tabIndex={tabIndex}
+            {...buttonProps}
+        >
+            {children}
+        </button>
+    );
+}

package/src/lib/components/atoms/button/button-variants/ButtonUnstyled.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonHtmlType } from '../button.enums';
+import { ButtonVariantProps } from './buttonVariants.types';
+import cx from 'classnames';
+
+export function ButtonUnstyled({
+    htmlType = ButtonHtmlType.Button,
+    children,
+    className,
+    tabIndex = 0,
+    testId,
+    ...buttonProps
+}: ButtonVariantProps): React.JSX.Element {
+    return (
+        <button
+            type={htmlType}
+            {...buttonProps}
+            className={cx('appearance-none', className)}
+            tabIndex={tabIndex}
+            data-testid={testId}
+        >
+            {children}
+        </button>
+    );
+}

package/src/lib/components/atoms/button/button-variants/buttonVariants.types.ts

@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonProps } from '../Button';
+
+type ButtonPickedProps = Pick<ButtonProps, 'htmlType' | 'testId'>;
+type PropsFromButtonElement = Omit<React.HTMLProps<HTMLButtonElement>, 'type'>;
+
+export interface ButtonVariantProps extends ButtonPickedProps, PropsFromButtonElement {
+    children: React.ReactNode;
+}

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

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

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

@@ -0,0 +1,53 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonSize, ButtonType } from './button.enums';
+
+export const PADDINGS: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'px-md py-xs',
+    [ButtonSize.Medium]: 'px-md py-sm',
+};
+
+export const PADDINGS_ONLY_ICON: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'p-xs',
+    [ButtonSize.Medium]: 'p-sm',
+};
+
+export const BACKGROUND_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'bg-primary-30',
+    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Ghost]: 'bg-transparent',
+    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
+};
+
+export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'bg-neutral-80 dark:bg-neutral-30',
+    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Ghost]: 'bg-transparent',
+    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
+    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
+};
+
+const DEFAULT_TEXT_COLORS: string = 'text-neutral-10 dark:text-neutral-92';
+
+export const TEXT_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'text-primary-100',
+    [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
+};
+
+export const TEXT_CLASSES: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'text-label-md',
+    [ButtonSize.Medium]: 'text-label-lg',
+};
+
+export const TEXT_COLOR_DISABLED: Record<ButtonType, string> = {
+    [ButtonType.Primary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
+};

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

@@ -0,0 +1,21 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ButtonSize {
+    Small = 'small',
+    Medium = 'medium',
+}
+
+export enum ButtonType {
+    Primary = 'primary',
+    Secondary = 'secondary',
+    Ghost = 'ghost',
+    Outlined = 'outlined',
+    Destructive = 'destructive',
+}
+
+export enum ButtonHtmlType {
+    Button = 'button',
+    Submit = 'submit',
+    Reset = 'reset',
+}

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

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Button';
+export * from './button-variants';
+
+export * from './button.enums';

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    BACKGROUND_COLORS,
+    BACKGROUND_COLORS_SELECTED,
+    TEXT_COLORS,
+    TEXT_COLORS_SELECTED,
+    UNDERLINED,
+    UNDERLINED_SELECTED,
+} from './buttonSegment.classes';
+import cx from 'classnames';
+import { ButtonSegmentType } from './buttonSegment.enums';
+import { ButtonUnstyled } from '../button';
+
+interface ButtonSegmentProps {
+    /**
+     * The label of the button.
+     */
+    label: string;
+    /**
+     The icon of the button
+     */
+    icon?: React.ReactNode;
+    /**
+     The selected flag of the button
+     */
+    selected?: boolean;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The onClick event of the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The type of the button.
+     */
+    type?: ButtonSegmentType;
+}
+
+export function ButtonSegment({
+    icon,
+    label,
+    selected,
+    disabled,
+    onClick,
+    type = ButtonSegmentType.Rounded,
+}: ButtonSegmentProps): React.JSX.Element {
+    const isUnderlined = type === ButtonSegmentType.Underlined;
+
+    const backgroundColors = selected
+        ? isUnderlined
+            ? 'bg-transparent'
+            : BACKGROUND_COLORS_SELECTED
+        : BACKGROUND_COLORS;
+
+    const underlined = isUnderlined ? (selected ? UNDERLINED_SELECTED : UNDERLINED) : '';
+    const textColors = selected ? TEXT_COLORS_SELECTED : TEXT_COLORS;
+    const padding = isUnderlined ? 'px-lg py-md' : 'px-sm py-[6px]';
+    const borderRadius = isUnderlined ? '' : 'rounded-full';
+    const textSize = isUnderlined ? 'text-title-md' : 'text-label-lg';
+    return (
+        <ButtonUnstyled
+            onClick={onClick}
+            className={cx(
+                'enabled:state-layer relative flex items-center disabled:opacity-40',
+                backgroundColors,
+                textColors,
+                padding,
+                borderRadius,
+                underlined,
+                {
+                    'pl-xs': !!icon && !isUnderlined,
+                },
+            )}
+            disabled={disabled}
+        >
+            <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
+                {icon && <span>{icon}</span>}
+                <span className="font-inter">{label}</span>
+            </div>
+        </ButtonUnstyled>
+    );
+}

package/src/lib/components/atoms/button-segment/buttonSegment.classes.ts

@@ -0,0 +1,45 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const BACKGROUND_COLORS = 'bg-transparent';
+export const BACKGROUND_COLORS_SELECTED = 'bg-primary-100 dark:bg-neutral-6';
+
+const TEXT_COLOR = 'text-neutral-60 dark:text-neutral-40';
+const TEXT_COLOR_HOVER = 'enabled:hover:text-neutral-40 enabled:dark:hover:text-neutral-60';
+const TEXT_COLOR_FOCUSED = 'enabled:focused:text-neutral-40 enabled:dark:focused:text-neutral-60';
+
+export const TEXT_COLORS = `${TEXT_COLOR} ${TEXT_COLOR_HOVER} ${TEXT_COLOR_FOCUSED}`;
+export const TEXT_COLORS_SELECTED = 'text-neutral-10 dark:text-neutral-92';
+
+export const UNDERLINED_SELECTED = `
+    relative
+    before:content-['']
+    border-b
+    border-shader-neutral-light-8
+    dark:border-shader-neutral-dark-8
+    before:block
+    before:w-full
+    before:border-b
+    before:absolute
+    before:bottom-[-0.8px]
+    before:left-0
+    enabled:before:w-[calc(100%-16px)]
+    enabled:before:left-2
+    enabled:before:border-primary-30
+    enabled:before:dark:border-primary-80`;
+
+export const UNDERLINED = `
+    relative
+    before:content-['']
+    before:block
+    before:w-full
+    before:border-b
+    before:border-shader-neutral-light-8
+    before:dark:border-shader-neutral-dark-8
+    before:absolute
+    before:bottom-0
+    before:left-0
+    hover:before:w-[calc(100%-16px)]
+    hover:before:left-2
+    hover:before:border-neutral-70
+    hover:before:dark:border-neutral-40`;

package/src/lib/components/atoms/button-segment/buttonSegment.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ButtonSegmentType {
+    Rounded = 'rounded',
+    Underlined = 'underlined',
+}

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

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

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -0,0 +1,114 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useEffect, useRef } from 'react';
+import cx from 'classnames';
+import { Dash, Checkmark } from '@iota/apps-ui-icons';
+
+interface CheckboxProps {
+    /**
+     * The label of the checkbox.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the checkbox.
+     */
+    isChecked?: boolean;
+    /**
+     * If true the checkbox will override the styles to show an indeterminate state.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the label should be placed before the checkbox.
+     */
+    isLabelFirst?: boolean;
+    /**
+     * If true the checkbox will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the checkbox is clicked.
+     */
+    onCheckedChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name of the checkbox.
+     */
+    name?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    (
+        {
+            isChecked,
+            isIndeterminate,
+            label,
+            isLabelFirst,
+            isDisabled,
+            onCheckedChange,
+            name,
+        }: CheckboxProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        useEffect(() => {
+            if (inputRef.current) {
+                inputRef.current.indeterminate = isIndeterminate ?? false;
+            }
+        }, [isIndeterminate, inputRef]);
+
+        const CheckmarkIcon = isIndeterminate ? Dash : Checkmark;
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        return (
+            <div
+                className={cx('group inline-flex', isLabelFirst ? 'flex-row-reverse' : 'flex-row', {
+                    disabled: isDisabled,
+                    'gap-x-2': label,
+                })}
+            >
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="peer hidden appearance-none"
+                    checked={isChecked}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={(e) => {
+                        onCheckedChange?.(e);
+                    }}
+                />
+                <span
+                    onClick={() => inputRef.current?.click()}
+                    className="peer-enabled:state-layer relative inset-0 flex h-5 w-5 items-center justify-center rounded border border-neutral-80 text-neutral-40 group-[.disabled]:cursor-not-allowed peer-disabled:text-neutral-70 peer-disabled:text-opacity-40 peer-disabled:opacity-40 peer-[&:is(:checked,:indeterminate)]:border-primary-30 peer-[&:is(:checked,:indeterminate)]:bg-primary-30 peer-[&:is(:checked,:indeterminate)]:text-white peer-[&:not(:checked,:indeterminate)]:text-opacity-40 disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-70 dark:border-neutral-20 dark:text-neutral-60 dark:peer-disabled:text-neutral-30 dark:peer-disabled:text-opacity-40 dark:peer-disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-30 dark:peer-disabled:peer-[&:is(:checked,:indeterminate)]:bg-neutral-40 peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-60 peer-disabled:[&:is(:checked,:indeterminate)]:bg-neutral-60 dark:peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-40 [&_svg]:h-4 [&_svg]:w-4 peer-[&:not(:checked,:indeterminate)]:[&_svg]:hidden"
+                >
+                    <CheckmarkIcon />
+                </span>
+
+                <LabelText label={label} name={name} />
+            </div>
+        );
+    },
+);
+
+function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
+    return (
+        <label
+            htmlFor={name}
+            className="text-label-lg text-neutral-40 group-[.disabled]:cursor-not-allowed group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40"
+        >
+            {label}
+        </label>
+    );
+}

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

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