@iota/apps-ui-kit 0.3.0 → 0.5.1

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
 

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

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { forwardRef, useEffect, useState } from 'react';
-import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
 import {
     BORDER_CLASSES,
     INPUT_CLASSES,
@@ -10,7 +11,7 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
 
 type TextAreaProps = Omit<

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

@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ComponentProps } from 'react';
-import { InputType } from '.';
-import { NumericFormat } from 'react-number-format';
+import type { ComponentProps } from 'react';
+import type { InputType } from '.';
+import type { NumericFormat } from 'react-number-format';
 
 type InputElementProps = Omit<
     React.ComponentProps<'input'>,

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

@@ -13,8 +13,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemHorizontal({
     icon,

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

@@ -9,8 +9,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemVertical({
     icon,

package/src/lib/components/molecules/search/Search.tsx

@@ -4,7 +4,8 @@
 import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
-import { Divider, SearchBarType } from '@/components';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
 import {
     BACKGROUND_COLORS,
     SUGGESTIONS_WRAPPER_STYLE,
@@ -43,10 +44,6 @@ export interface SearchProps {
      * Are the suggestions loading.
      */
     isLoading: boolean;
-    /**
-     * Callback when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * The type of the search bar. Can be 'outlined' or 'filled'.
      */
@@ -54,7 +51,7 @@ export interface SearchProps {
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export function Search({
@@ -64,7 +61,6 @@ export function Search({
     onSuggestionClick,
     placeholder,
     isLoading = false,
-    onKeyDown,
     type = SearchBarType.Outlined,
     renderSuggestion,
 }: SearchProps): React.JSX.Element {
@@ -183,7 +179,7 @@ export function Search({
                 />
                 <SearchIcon />
             </div>
-            {showSuggestions && (
+            {showSuggestions && renderSuggestion && (
                 <div
                     ref={suggestionsListRef}
                     className={cx(

package/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
 import cx from 'classnames';
 import { SegmentedButtonType } from './segmentedButton.enums';
-import { ButtonSegmentType } from '../../atoms';
+import { ButtonSegmentType } from '@/components/atoms';
 
 interface SegmentedButtonProps {
     /**

package/src/lib/components/molecules/select/Select.tsx

@@ -5,10 +5,9 @@ import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
 import { forwardRef, useEffect, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
-import { ButtonUnstyled } from '../../atoms/button';
-import { ListItem } from '../../atoms';
+import { ListItem, ButtonUnstyled } from '@/components/atoms';
 import { DropdownPosition } from '../dropdown';
 import { SelectSize } from './select.enums';
 

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
-import { Placeholder } from '../../atoms';
+import { Placeholder } from '@/components/atoms';
 
 interface TableCellBaseProps {
     /**

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -3,7 +3,7 @@
 
 import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Checkbox } from '@/lib';
+import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
 export interface TableHeaderCellProps {

package/src/lib/components/molecules/title/Title.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Tooltip, TooltipPosition } from '../../atoms';
+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';
@@ -36,6 +37,10 @@ interface TitleProps {
      * The size of the component
      */
     size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export function Title({
@@ -46,9 +51,13 @@ export function Title({
     supportingElement,
     tooltipPosition,
     size = TitleSize.Medium,
+    testId,
 }: TitleProps) {
     return (
-        <div className={cx('flex flex-row items-center justify-between', TITLE_PADDINGS[size])}>
+        <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="flex flex-row items-center gap-x-0.5 text-neutral-10 dark:text-neutral-92">

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

@@ -1,10 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowDown } from '@iota/apps-ui-icons';
-import { Button, ButtonType } from '@/lib';
+import { Button, ButtonType } from '@/components/atoms';
 import { ICON_STYLE } from './accordion.classes';
 
 export interface AccordionHeaderProps {

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -9,7 +9,26 @@ import { Close } from '@iota/apps-ui-icons';
 import { useEffect, useState } from 'react';
 import { DialogPosition } from './dialog.enums';
 
-const Dialog = RadixDialog.Root;
+const Dialog = ({
+    open,
+    onOpenChange,
+    children,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => {
+    const handleOpenChange = (isOpen: boolean) => {
+        const isMouseOverToast = document.querySelector('.toast-layer:hover');
+        if (!isOpen && isMouseOverToast) {
+            return;
+        }
+        onOpenChange?.(isOpen);
+    };
+
+    return (
+        <RadixDialog.Root open={open} onOpenChange={handleOpenChange} {...props}>
+            {children}
+        </RadixDialog.Root>
+    );
+};
 const DialogTrigger = RadixDialog.Trigger;
 const DialogClose = RadixDialog.Close;
 

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -3,7 +3,8 @@
 
 import cx from 'classnames';
 import { IotaLogoMark, MenuIcon } from '@iota/apps-ui-icons';
-import { NavbarItem, NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import type { NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import { NavbarItem } from '@/components/molecules/navbar-item/NavbarItem';
 
 export type NavbarItemWithId = NavbarItemProps & { id: string };
 

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -3,8 +3,9 @@
 
 import { ArrowBack } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Button, ButtonType, NavbarItem, NavbarItemType } from '@/components';
-import { NavbarProps } from './Navbar';
+import { Button, ButtonType } from '@/components/atoms';
+import { NavbarItem, NavbarItemType } from '@/components/molecules';
+import type { NavbarProps } from './Navbar';
 
 export function NavbarSlideout({
     items,

package/src/lib/components/organisms/table/Table.tsx

@@ -1,18 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import cx from 'classnames';
 import { TableProvider, useTableContext } from './TableContext';
-import {
-    Button,
-    ButtonProps,
-    ButtonSize,
-    ButtonType,
-    Checkbox,
-    TableCellBase,
-    TableHeaderCell,
-} from '@/lib';
+import type { ButtonProps } from '@/components/atoms';
+import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
+import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
 
 export interface TablePaginationOptions {
@@ -75,6 +69,11 @@ export type TableProps = {
      * The page size selector component.
      */
     pageSizeSelector?: ReactNode;
+
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
 };
 
 export function Table({
@@ -85,12 +84,23 @@ export function Table({
     rowIndexes,
     children,
     pageSizeSelector,
+    heightFull = false,
 }: PropsWithChildren<TableProps>): JSX.Element {
     return (
         <TableProvider selectedRowIndexes={selectedRowIndexes} rowIndexes={rowIndexes}>
-            <div className="w-full">
-                <div className="overflow-auto">
-                    <table className="w-full table-auto">{children}</table>
+            <div className={cx('w-full', { 'h-full': heightFull })}>
+                <div
+                    className={cx('overflow-auto', {
+                        'h-full': heightFull,
+                    })}
+                >
+                    <table
+                        className={cx('w-full table-auto', {
+                            'h-full': heightFull,
+                        })}
+                    >
+                        {children}
+                    </table>
                 </div>
                 <div
                     className={cx('flex w-full items-center gap-2 pt-md', {

package/src/lib/components/organisms/table/TableContext.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { createContext, PropsWithChildren, useContext } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface TableProviderProps {
     /**

package/src/lib/constants/colors.constants.ts

@@ -76,6 +76,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
     warning: {
         '10': '#422C00',
         '20': '#2D1E00',
+        '60': '#BE8F32',
         '90': '#FFE3AB',
     },
 };

package/src/lib/tailwind/base.presets.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss';
 import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
 import {
     CUSTOM_FONT_SIZES,

package/src/lib/tailwind/constants/fontSizes.constants.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ThemeConfig } from 'tailwindcss/types/config';
+import type { ThemeConfig } from 'tailwindcss/types/config';
 
 type TailwindFontSize = ThemeConfig['fontSize'];
 

package/src/lib/tailwind/helpers.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ScreenSize } from '../enums';
+import type { ScreenSize } from '../enums';
 
 export const pxToRem = (px: number, base: number = 16) => `${px / base}rem`;
 

package/src/lib/tailwind/types.ts

@@ -1,6 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ScreenSize } from '../enums';
+import type { ScreenSize } from '../enums';
 
 export type ScreenBreakpoints = Record<ScreenSize, number>;

package/src/storybook/blocks/TypeSet.tsx

@@ -3,7 +3,7 @@
 
 import { TypeSetItem } from './TypeSetItem';
 import { getFontSizeLabelFromClass } from '../helpers';
-import { TailwindCustomFonts } from '@/lib/tailwind/constants';
+import type { TailwindCustomFonts } from '@/lib/tailwind/constants';
 
 export interface TypeSetProps {
     typeset: TailwindCustomFonts;

package/src/storybook/stories/atoms/Snackbar.stories.tsx

@@ -3,7 +3,8 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Snackbar, SnackbarProps, SnackbarType, Button } from '@/components/atoms';
+import type { SnackbarProps } from '@/components/atoms';
+import { Snackbar, SnackbarType, Button } from '@/components/atoms';
 
 const meta: Meta<SnackbarProps> = {
     component: Snackbar,

package/src/storybook/stories/atoms/Toggle.stories.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle, ToggleLabelPosition, ToggleSize } from '@/components';
+import { useState } from 'react';
+
+const meta: Meta<typeof Toggle> = {
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+        isToggled: {
+            control: { type: 'boolean' },
+        },
+        label: {
+            control: { type: 'text' },
+        },
+        labelPosition: {
+            control: { type: 'select' },
+            options: Object.values(ToggleLabelPosition),
+        },
+        isDisabled: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(ToggleSize),
+        },
+        onChange: {
+            action: 'changed',
+        },
+    },
+    args: {
+        isToggled: false,
+        isDisabled: false,
+        size: ToggleSize.Default,
+        labelPosition: ToggleLabelPosition.Right,
+    },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+    render: (args) => {
+        const [isToggled, setIsToggled] = useState(args.isToggled);
+
+        const handleToggleChange = (newState: boolean) => {
+            console.log('Toggle state changed:', newState);
+            setIsToggled(newState);
+        };
+
+        return <Toggle {...args} isToggled={isToggled} onChange={handleToggleChange} />;
+    },
+};

package/src/storybook/stories/molecules/Card.stories.tsx

@@ -3,15 +3,12 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { IotaLogoSmall } from '@iota/apps-ui-icons';
+import type { CardProps, CardImageProps, CardBodyProps, CardActionProps } from '@/components';
 import {
     Card,
-    CardProps,
     CardImage,
-    CardImageProps,
     CardAction,
     CardBody,
-    CardBodyProps,
-    CardActionProps,
     CardActionType,
     CardType,
     ImageType,

package/src/storybook/stories/molecules/Dropdown.stories.tsx

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dropdown, ListItem } from '@/components';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 const meta = {
     component: Dropdown,

package/src/storybook/stories/molecules/Input.stories.tsx

@@ -5,7 +5,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Input, InputType } from '@/lib/components/molecules/input';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
-import { ComponentProps, useCallback, useEffect, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ButtonPill } from '@/lib/components/atoms/button';
 
 type CustomStoryProps = {

package/src/storybook/stories/molecules/Search.stories.tsx

@@ -3,7 +3,8 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ListItem, Search, SearchBarType, Suggestion } from '@/components';
+import type { Suggestion } from '@/components';
+import { ListItem, Search, SearchBarType } from '@/components';
 import cx from 'classnames';
 
 const meta: Meta<typeof Search> = {

package/src/storybook/stories/molecules/SegmentedButton.stories.tsx

@@ -9,7 +9,8 @@ import {
     SegmentedButton,
     SegmentedButtonType,
 } from '@/components';
-import { ComponentProps, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useState } from 'react';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
 
 const meta: Meta<typeof SegmentedButton> = {

package/src/storybook/stories/molecules/Select.stories.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select, SelectOption } from '@/components/molecules/select/Select';
+import type { SelectOption } from '@/components/molecules/select/Select';
+import { Select } from '@/components/molecules/select/Select';
 import { useState } from 'react';
 import { IotaLogoMark, PlaceholderReplace } from '@iota/apps-ui-icons';
 

package/src/storybook/stories/organisms/Navbar.stories.tsx

@@ -3,7 +3,8 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Activity, Apps, Assets, Home } from '@iota/apps-ui-icons';
-import { Navbar, NavbarSlideout, NavbarItemWithId, NavbarProps } from '@/components';
+import type { NavbarItemWithId, NavbarProps } from '@/components';
+import { Navbar, NavbarSlideout } from '@/components';
 import { useState } from 'react';
 
 const NAVBAR_ITEMS: NavbarItemWithId[] = [