@iota/apps-ui-kit 0.0.0-experimental-20250613144451

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@iota/apps-ui-kit",
+  "version": "0.0.0-experimental-20250613144451",
+  "repository": {
+    "type": "git",
+    "url": "github.com:iotaledger/iota.git"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/style.css"
+  },
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@fontsource/inter": "^5.0.17",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "classnames": "^2.5.1",
+    "lodash.merge": "^4.6.2",
+    "react-number-format": "^5.2.2",
+    "@iota/apps-ui-icons": "0.0.0-experimental-20250613144451"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "@chromatic-com/storybook": "^1.6.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/blocks": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-vite": "^7.1.0",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.19",
+    "cross-env": "^7.0.3",
+    "memfs": "^4.11.1",
+    "postcss": "^8.4.31",
+    "storybook": "^7.1.0",
+    "storybook-dark-mode": "^4.0.2",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.12",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "scripts": {
+    "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
+    "prettier:fix": "prettier -w --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
+    "eslint:check": "eslint --max-warnings=0 .",
+    "eslint:fix": "pnpm run eslint:check --fix",
+    "lint": "pnpm run eslint:check && pnpm run prettier:check",
+    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-package": "tsc --project tsconfig.package.json && vite build",
+    "build": "cross-env BUILD_ENV=package pnpm run build-package",
+    "dev": "pnpm run storybook"
+  }
+}

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 type { 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,33 @@
+// 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',
+    [BadgeType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [BadgeType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [BadgeType.Error]: 'bg-error-90 dark:bg-error-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',
+    [BadgeType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [BadgeType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [BadgeType.Error]: 'text-error-20 dark:text-error-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',
+    [BadgeType.Success]: 'border-tertiary-90 dark:border-tertiary-10',
+    [BadgeType.Warning]: 'border-warning-90 dark:border-warning-20',
+    [BadgeType.Error]: 'border-error-90 dark:border-error-10',
+};
+
+export const BADGE_TEXT_CLASS = 'text-label-md';

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

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

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 type { 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 type { 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 type { 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,98 @@
+// 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;
+    /**
+     * If the button is nested inside a parent button.
+     */
+    isNested?: boolean;
+}
+
+export function ButtonSegment({
+    icon,
+    label,
+    selected,
+    disabled,
+    onClick,
+    type = ButtonSegmentType.Rounded,
+    isNested = false,
+}: 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 ? (isNested ? 'px-md py-sm' : 'px-lg py-md') : 'px-sm py-[6px]';
+    const borderRadius = isUnderlined ? '' : 'rounded-full';
+    const textSize = isNested
+        ? isUnderlined
+            ? 'text-title-sm'
+            : 'text-label-md'
+        : 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="shrink-0 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';