@iota/apps-ui-kit 0.0.0-dev-20251015065834

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

@@ -0,0 +1,239 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input, InputType } from '@/lib/components/molecules/input';
+import { CheckmarkFilled, Close, Loader2, PlaceholderReplace } from '@iota/apps-ui-icons';
+import type { ComponentProps } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { ButtonPill, ButtonUnstyled } from '@/lib/components/atoms/button';
+import classNames from 'classnames';
+
+type CustomStoryProps = {
+    withLeadingIcon?: boolean;
+};
+
+function InputStory({
+    withLeadingIcon,
+    value,
+    onClearInput,
+    type,
+    ...props
+}: ComponentProps<typeof Input> & CustomStoryProps): JSX.Element {
+    const [inputValue, setInputValue] = useState(value ?? '');
+
+    useEffect(() => {
+        setInputValue(value ?? '');
+    }, [value]);
+
+    return (
+        <Input
+            {...props}
+            onChange={(e) => setInputValue(e.target.value)}
+            value={inputValue}
+            onClearInput={() => setInputValue('')}
+            leadingIcon={withLeadingIcon ? <PlaceholderReplace /> : undefined}
+            type={type}
+        />
+    );
+}
+
+const meta = {
+    component: Input,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        caption: 'Caption',
+        type: InputType.Text,
+    },
+    argTypes: {
+        amountCounter: {
+            control: {
+                type: 'text',
+            },
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(InputType),
+            },
+        },
+        onValueChange: {
+            control: {
+                type: 'none',
+            },
+        },
+    },
+    render: (props) => <InputStory {...props} />,
+};
+
+export const WithLeadingElement: Story = {
+    args: {
+        type: InputType.Text,
+        placeholder: 'Placeholder',
+        amountCounter: '10',
+        caption: 'Caption',
+    },
+    render: (props) => <InputStory {...props} withLeadingIcon />,
+};
+
+export const WithMaxTrailingButton: Story = {
+    args: {
+        type: InputType.Number,
+        placeholder: 'Send IOTAs',
+        amountCounter: 'Max 10 IOTA',
+        caption: 'Enter token amount',
+        supportingText: 'IOTA',
+        trailingElement: <PlaceholderReplace />,
+    },
+    render: ({ value, ...props }) => {
+        const [inputValue, setInputValue] = useState<string>('');
+        const [error, setError] = useState<string | undefined>();
+
+        function onMaxClick() {
+            setInputValue('10');
+            checkInputValidity(inputValue);
+        }
+
+        const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+            setInputValue(e.target.value);
+        }, []);
+
+        function checkInputValidity(value: string) {
+            if (Number(value) < 0) {
+                setError('Value must be greater than 0');
+            } else if (Number(value) > 10) {
+                setError('Value must be less than 10');
+            } else {
+                setError(undefined);
+            }
+        }
+
+        useEffect(() => {
+            checkInputValidity(inputValue);
+        }, [inputValue]);
+
+        return (
+            <Input
+                {...props}
+                required
+                label="Send Tokens"
+                value={inputValue}
+                trailingElement={<ButtonPill onClick={onMaxClick}>Max</ButtonPill>}
+                errorMessage={error}
+                onChange={onChange}
+                onClearInput={() => setInputValue('')}
+            />
+        );
+    },
+};
+
+export const NumericFormatInput: Story = {
+    args: {
+        type: InputType.NumericFormat,
+        placeholder: 'Enter the IOTA Amount',
+        amountCounter: '10',
+        caption: 'Caption',
+        suffix: ' IOTA',
+        prefix: '~ ',
+    },
+    render: (props) => {
+        const [inputValue, setInputValue] = useState<string>('');
+
+        function onMaxClick() {
+            setInputValue('10');
+        }
+
+        return (
+            <InputStory
+                {...props}
+                value={inputValue}
+                trailingElement={<ButtonPill onClick={onMaxClick}>Max</ButtonPill>}
+            />
+        );
+    },
+};
+
+export const NameResolverInput: Story = {
+    args: {
+        type: InputType.Text,
+    },
+    render: ({ type }) => {
+        const [value, setValue] = useState<string>('');
+        const { address, isLoading, error } = useNameResolver(value);
+
+        const ICON_COLORS =
+            'text-iota-primary-30 dark:text-iota-primary-70 names:text-names-primary-70';
+
+        return (
+            <Input
+                type={type}
+                placeholder="@name"
+                label="Name Resolver"
+                caption="Enter the name to resolve"
+                value={value}
+                onInput={(e) => setValue(e.currentTarget.value)}
+                supportingValue={address}
+                errorMessage={error || undefined}
+                trailingElement={
+                    <>
+                        {value.length > 0 && (
+                            <ButtonUnstyled
+                                className="input-icon-color"
+                                onClick={() => setValue('')}
+                                tabIndex={-1}
+                            >
+                                <Close className="h-5 w-5" />
+                            </ButtonUnstyled>
+                        )}
+                        {isLoading ? (
+                            <Loader2 className={classNames('h-5 w-5 animate-spin', ICON_COLORS)} />
+                        ) : address ? (
+                            <CheckmarkFilled className={classNames('h-5 w-5', ICON_COLORS)} />
+                        ) : null}
+                    </>
+                }
+            />
+        );
+    },
+};
+
+function useNameResolver(name: string) {
+    const [address, setAddress] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setAddress(null);
+        setError(null);
+
+        if (!name) {
+            setIsLoading(false);
+            return;
+        }
+
+        setIsLoading(true);
+
+        const id = setTimeout(() => {
+            if (name.includes('@')) {
+                setAddress(`0x3c14…187b`);
+            } else {
+                setError("Only names with '@' are supported");
+                setAddress(null);
+            }
+            setIsLoading(false);
+        }, 1500);
+
+        return () => clearTimeout(id);
+    }, [name]);
+
+    return { address, isLoading, error };
+}

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

@@ -0,0 +1,45 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavbarItem, NavbarItemType } from '@/components';
+import { Home } from '@iota/apps-ui-icons';
+
+const meta: Meta<typeof NavbarItem> = {
+    component: NavbarItem,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <NavbarItem {...props} />;
+    },
+} satisfies Meta<typeof NavbarItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        icon: <Home />,
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+        },
+        icon: {
+            control: 'none',
+        },
+        hasBadge: {
+            control: 'boolean',
+        },
+        isSelected: {
+            control: 'boolean',
+        },
+        type: {
+            control: 'select',
+            options: Object.values(NavbarItemType),
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+    },
+};

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

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { Suggestion } from '@/components';
+import { ListItem, Search, SearchBarType } from '@/components';
+import cx from 'classnames';
+
+const meta: Meta<typeof Search> = {
+    component: Search,
+    tags: ['autodocs'],
+    render: (props) => {
+        const [searchValue, setSearchValue] = useState<string>('');
+        const [filteredSuggestions, setFilteredSuggestions] = useState<Suggestion[]>([]);
+
+        const handleSearchValueChange = (value: string) => {
+            setSearchValue(value);
+            const filtered =
+                props.suggestions?.filter((suggestion) =>
+                    suggestion.label.toLowerCase().includes(value.toLowerCase()),
+                ) || [];
+            setFilteredSuggestions(filtered);
+        };
+
+        const handleSuggestionClick = (suggestion: Suggestion) => {
+            setSearchValue(suggestion.label);
+            setFilteredSuggestions([]);
+        };
+
+        return (
+            <div className="h-60">
+                <Search
+                    {...props}
+                    searchValue={searchValue}
+                    suggestions={filteredSuggestions}
+                    onSearchValueChange={handleSearchValueChange}
+                    onSuggestionClick={handleSuggestionClick}
+                    renderSuggestion={(suggestion) => (
+                        <ListItem
+                            key={suggestion.id}
+                            showRightIcon={false}
+                            onClick={() => handleSuggestionClick(suggestion)}
+                            hideBottomBorder
+                        >
+                            <div
+                                className={cx(
+                                    'flex w-full flex-row items-center gap-xs',
+                                    suggestion.supportingText ? 'justify-between' : 'justify-start',
+                                )}
+                            >
+                                <span className="text-body-lg text-iota-neutral-10 names:text-names-neutral-92 dark:text-iota-neutral-92">
+                                    {suggestion.label}
+                                </span>
+                                <span className="text-body-md text-iota-neutral-40 names:text-names-neutral-60 dark:text-iota-neutral-60">
+                                    {suggestion.supportingText}
+                                </span>
+                            </div>
+                        </ListItem>
+                    )}
+                />
+            </div>
+        );
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        suggestions: [
+            { id: '1', label: 'Dashboard', supportingText: 'Caption' },
+            { id: '2', label: 'Wallet' },
+            { id: '3', label: 'Explorer' },
+            { id: '4', label: 'SDK' },
+        ],
+        placeholder: 'Search for tooling apps',
+    },
+    argTypes: {
+        suggestions: {
+            control: 'object',
+        },
+        onSuggestionClick: {
+            action: 'suggestionClicked',
+        },
+        placeholder: {
+            control: 'text',
+        },
+        onSearchValueChange: {
+            action: 'searchValueChanged',
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(SearchBarType),
+            },
+        },
+    },
+};

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

@@ -0,0 +1,108 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+    ButtonSegment,
+    ButtonSegmentType,
+    SegmentedButton,
+    SegmentedButtonType,
+} from '@/components';
+import type { ComponentProps } from 'react';
+import { useState } from 'react';
+import { PlaceholderReplace } from '@iota/apps-ui-icons';
+
+const meta: Meta<typeof SegmentedButton> = {
+    component: SegmentedButton,
+    tags: ['autodocs'],
+    render: (props) => {
+        const [elements, setElements] = useState<ComponentProps<typeof ButtonSegment>[]>([
+            { label: 'Label 1', selected: true },
+            { label: 'Label 2', icon: <PlaceholderReplace /> },
+            { label: 'Label 3', disabled: true },
+            { label: 'Label 4' },
+        ]);
+
+        const handleElementClick = (clickedIndex: number) => {
+            const updatedElements = elements.map((element, index) => ({
+                ...element,
+                selected: index === clickedIndex,
+            }));
+            setElements(updatedElements);
+        };
+
+        return (
+            <div className="flex flex-col items-start">
+                <SegmentedButton type={props.type} shape={props.shape}>
+                    {elements.map((element, index) => (
+                        <ButtonSegment
+                            key={element.label}
+                            type={props.shape}
+                            onClick={() => handleElementClick(index)}
+                            {...element}
+                        />
+                    ))}
+                </SegmentedButton>
+            </div>
+        );
+    },
+} satisfies Meta<typeof SegmentedButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(SegmentedButtonType),
+            },
+        },
+        shape: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonSegmentType),
+            },
+        },
+    },
+};
+
+export const Underlined: Story = {
+    args: {
+        type: SegmentedButtonType.Transparent,
+        shape: ButtonSegmentType.Underlined,
+    },
+    render: (props) => {
+        const [elements, setElements] = useState<ComponentProps<typeof ButtonSegment>[]>([
+            { label: 'Label 1', selected: true, type: ButtonSegmentType.Underlined },
+            { label: 'Label 2', icon: <PlaceholderReplace />, type: ButtonSegmentType.Underlined },
+            { label: 'Label 3', type: ButtonSegmentType.Underlined },
+            { label: 'Label 4', disabled: true, type: ButtonSegmentType.Underlined },
+        ]);
+
+        const handleElementClick = (clickedIndex: number) => {
+            const updatedElements = elements.map((element, index) => ({
+                ...element,
+                selected: index === clickedIndex,
+            }));
+            setElements(updatedElements);
+        };
+
+        return (
+            <div className="flex flex-col items-start">
+                <SegmentedButton type={props.type} shape={props.shape}>
+                    {elements.map((element, index) => (
+                        <ButtonSegment
+                            key={element.label}
+                            onClick={() => handleElementClick(index)}
+                            {...element}
+                        />
+                    ))}
+                </SegmentedButton>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,103 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+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';
+
+const meta: Meta<typeof Select> = {
+    component: Select,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const dropdownOptions: SelectOption[] = ['Option 1', 'Option 2', 'Option 3', 'Invalid Option'];
+
+export const Default: Story = {
+    args: {
+        label: 'Select Input',
+        supportingText: 'Info',
+        caption: 'Caption',
+        placeholder: 'Placeholder',
+        options: dropdownOptions,
+    },
+    argTypes: {
+        placeholder: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+    render: (args) => {
+        const [selected, setSelected] = useState('Option 1');
+        const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+
+        const onChange = (id: string) => {
+            if (id === 'Invalid Option') {
+                setErrorMessage('Invalid Option Selected');
+            } else {
+                setSelected(id);
+                setErrorMessage(undefined);
+            }
+        };
+
+        return (
+            <div className="h-60">
+                <Select
+                    {...args}
+                    value={selected}
+                    onValueChange={onChange}
+                    errorMessage={errorMessage}
+                />
+            </div>
+        );
+    },
+};
+
+export const CustomOptions: Story = {
+    args: {
+        label: 'Send Coins',
+        placeholder: 'Select a coin',
+        options: [],
+    },
+    render: ({ options, ...args }) => {
+        const [selected, setSelected] = useState('iota');
+
+        const customOptions: SelectOption[] = [
+            {
+                id: 'iota',
+                renderLabel: () => (
+                    <div className="flex items-center gap-2">
+                        <IotaLogoMark />
+                        IOTA
+                    </div>
+                ),
+            },
+            {
+                id: 'other coin',
+                renderLabel: () => (
+                    <div className="flex items-center gap-2">
+                        <PlaceholderReplace />
+                        Other Coin
+                    </div>
+                ),
+            },
+        ];
+
+        return (
+            <div className="h-60">
+                <Select
+                    {...args}
+                    value={selected}
+                    onValueChange={setSelected}
+                    options={customOptions}
+                />
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,46 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableCellBase, TableCellText } from '@/components';
+
+const meta = {
+    component: TableCellText,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <table>
+                <thead>
+                    <tr>
+                        <TableCellBase>
+                            <Avatar />
+                        </TableCellBase>
+                        <TableCellBase>
+                            <TableCellText>Mr. Crab</TableCellText>
+                        </TableCellBase>
+                    </tr>
+                </thead>
+            </table>
+        );
+    },
+} satisfies Meta<typeof TableCellText>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Avatar = () => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="33"
+            height="32"
+            viewBox="0 0 33 32"
+            fill="none"
+        >
+            <circle cx="16.5" cy="16" r="16" className="fill-iota-primary-40" />
+        </svg>
+    );
+};
+
+export const Default: Story = {};

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

@@ -0,0 +1,34 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableHeaderCell } from '@/components';
+
+const meta = {
+    component: TableHeaderCell,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-56">
+                <table>
+                    <thead>
+                        <tr>
+                            <TableHeaderCell {...props} />
+                        </tr>
+                    </thead>
+                </table>
+            </div>
+        );
+    },
+} satisfies Meta<typeof TableHeaderCell>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        columnKey: '1',
+    },
+};