@iota/apps-ui-kit 0.2.0 → 0.2.1

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

@@ -0,0 +1,38 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown, ListItem } from '@/components';
+import { ComponentProps } from 'react';
+
+const meta = {
+    component: Dropdown,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <Dropdown {...props} />;
+    },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+    render: (args) => {
+        const options: ComponentProps<typeof ListItem>[] = new Array(5).fill(0).map((_, index) => ({
+            children: `Option ${index + 1}`,
+            onClick: () => {
+                alert(`Option ${index + 1} clicked`);
+            },
+        }));
+
+        return (
+            <Dropdown {...args}>
+                {options.map((option, index) => (
+                    <ListItem key={index} {...option} hideBottomBorder />
+                ))}
+            </Dropdown>
+        );
+    },
+};

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

@@ -0,0 +1,161 @@
+// 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 { PlaceholderReplace } from '@iota/apps-ui-icons';
+import { ComponentProps, useCallback, useEffect, useState } from 'react';
+import { ButtonPill } from '@/lib/components/atoms/button';
+
+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>}
+            />
+        );
+    },
+};

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,100 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListItem, Search, SearchBarType, Suggestion } 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-neutral-10 dark:text-neutral-92">
+                                    {suggestion.label}
+                                </span>
+                                <span className="text-body-md text-neutral-40 dark:text-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,107 @@
+// 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 { ComponentProps, 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,102 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectOption } 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-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',
+    },
+};