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

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

@@ -0,0 +1,58 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Header } from '@/lib/components/atoms/header';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Header> = {
+    component: Header,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col items-start gap-2">
+                <Header {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Header',
+        onBack: undefined,
+        onClose: undefined,
+    },
+    argTypes: {
+        titleCentered: {
+            control: 'boolean',
+        },
+    },
+};
+
+export const Centered: Story = {
+    args: {
+        title: 'Header',
+        titleCentered: true,
+    },
+};
+
+export const CenteredNoIcon: Story = {
+    args: {
+        title: 'Header',
+        titleCentered: true,
+        onBack: undefined,
+        onClose: undefined,
+    },
+};
+
+export const NoIcon: Story = {
+    args: {
+        title: 'Header',
+        onBack: undefined,
+        onClose: undefined,
+    },
+};

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

@@ -0,0 +1,67 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@/components';
+import { Info } from '@iota/apps-ui-icons';
+
+const meta: Meta<typeof InfoBox> = {
+    component: InfoBox,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <InfoBox {...props} />;
+    },
+} satisfies Meta<typeof InfoBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        type: InfoBoxType.Default,
+        title: 'Title',
+        supportingText: 'This is an info box',
+        style: InfoBoxStyle.Default,
+        icon: <Info />,
+    },
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(InfoBoxType),
+            },
+        },
+        title: {
+            control: {
+                type: 'text',
+            },
+        },
+        supportingText: {
+            control: {
+                type: 'text',
+            },
+        },
+        icon: {
+            control: 'none',
+        },
+        style: {
+            control: {
+                type: 'select',
+                options: Object.values(InfoBoxStyle),
+            },
+        },
+    },
+};
+
+export const WithoutIcon: Story = {
+    args: {
+        type: InfoBoxType.Default,
+        title: 'Title',
+        supportingText: 'This is an info box without an icon',
+        style: InfoBoxStyle.Default,
+    },
+    render: (props) => {
+        return <InfoBox {...props} />;
+    },
+};

package/src/storybook/stories/atoms/KeyValueInfo.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 { KeyValueInfo, TooltipPosition, ValueSize } from '@/components';
+
+const meta: Meta<typeof KeyValueInfo> = {
+    component: KeyValueInfo,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-1/2">
+                <KeyValueInfo {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof KeyValueInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        keyText: 'Label',
+        value: 'Value',
+        supportingLabel: 'IOTA',
+        size: ValueSize.Small,
+    },
+    argTypes: {
+        keyText: {
+            control: 'text',
+        },
+        value: {
+            control: 'text',
+        },
+        copyText: {
+            control: 'text',
+        },
+        tooltipText: {
+            control: 'text',
+        },
+        tooltipPosition: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
+        },
+        supportingLabel: {
+            control: 'text',
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: Object.values(ValueSize),
+            },
+        },
+    },
+};

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

@@ -0,0 +1,55 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LabelText, LabelTextSize, TooltipPosition } from '@/components';
+
+const meta: Meta<typeof LabelText> = {
+    component: LabelText,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <LabelText {...props} />;
+    },
+} satisfies Meta<typeof LabelText>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: '12,000.00',
+        label: 'Label',
+        size: LabelTextSize.Medium,
+        supportingLabel: 'IOTA',
+        isCentered: false,
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(LabelTextSize),
+        },
+        label: {
+            control: 'text',
+        },
+        isCentered: {
+            control: 'boolean',
+        },
+        supportingLabel: {
+            control: 'text',
+        },
+        text: {
+            control: 'text',
+        },
+        tooltipText: {
+            control: 'text',
+        },
+        tooltipPosition: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
+        },
+    },
+};

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ListItem } from '@/components';
+import { Seed } from '@iota/apps-ui-icons';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+    component: ListItem,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col">
+                <ListItem {...props}>
+                    <div className="flex flex-row items-center gap-2">
+                        <Seed />
+                        <div>Item 1</div>
+                    </div>
+                </ListItem>
+            </div>
+        );
+    },
+} satisfies Meta<typeof ListItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    argTypes: {
+        showRightIcon: {
+            control: 'boolean',
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+        hideBottomBorder: {
+            control: 'boolean',
+        },
+    },
+};

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

@@ -0,0 +1,32 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { LoadingIndicator } from '@/lib/components/atoms';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof LoadingIndicator> = {
+    component: LoadingIndicator,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <LoadingIndicator {...props} />;
+    },
+} satisfies Meta<typeof LoadingIndicator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+    argTypes: {
+        color: {
+            control: 'text',
+        },
+        size: {
+            control: 'text',
+        },
+        text: {
+            control: 'text',
+        },
+    },
+};

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

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Address, Panel, Title } from '@/components';
+
+const meta: Meta<typeof Panel> = {
+    component: Panel,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <Panel {...props}>
+                <div className="flex flex-col items-start gap-2">
+                    <Title title="Title" subtitle="subtitle" />
+                    <div className=" px-md--rs pb-sm--rs">
+                        <Address text="0x0d7...3f34" isCopyable />
+                        <Address text="0x0d7...3f35" isCopyable />
+                        <Address text="0x0d7...3f36" isCopyable />
+                    </div>
+                </div>
+            </Panel>
+        );
+    },
+} satisfies Meta<typeof Panel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    argTypes: {
+        hasBorder: {
+            control: 'boolean',
+        },
+    },
+};

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

@@ -0,0 +1,33 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Placeholder } from '@/components';
+
+const meta: Meta<typeof Placeholder> = {
+    component: Placeholder,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <Placeholder {...props} />;
+    },
+} satisfies Meta<typeof Placeholder>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+    argTypes: {
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+        height: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,51 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RadioButton } from '@/components/atoms';
+import { useEffect, useState } from 'react';
+
+const meta: Meta<typeof RadioButton> = {
+    component: RadioButton,
+    tags: ['autodocs'],
+    render: (props) => {
+        const { isChecked } = props;
+        const [checked, setIsChecked] = useState<boolean>(isChecked ?? false);
+
+        useEffect(() => {
+            setIsChecked(isChecked ?? false);
+        }, [isChecked]);
+
+        return (
+            <RadioButton
+                {...props}
+                isChecked={checked}
+                onChange={(e) => setIsChecked(e.target.checked)}
+            />
+        );
+    },
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Radio Button',
+        isChecked: false,
+        isDisabled: false,
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        isChecked: {
+            control: 'boolean',
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+    },
+};

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

@@ -0,0 +1,33 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardImage, ImageShape, Skeleton } from '@/components';
+
+const meta: Meta<typeof Skeleton> = {
+    component: Skeleton,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SkeletonCard: Story = {
+    render: () => (
+        <Card>
+            <CardImage shape={ImageShape.SquareRounded}>
+                <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
+                <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
+            </CardImage>
+            <div className="flex flex-col gap-y-xs">
+                <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+            </div>
+            <div className="ml-auto flex flex-col gap-y-xs">
+                <Skeleton widthClass="w-20" heightClass="h-3.5" />
+                <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
+            </div>
+        </Card>
+    ),
+};

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

@@ -0,0 +1,43 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SnackbarProps } from '@/components/atoms';
+import { Snackbar, SnackbarType, Button } from '@/components/atoms';
+
+const meta: Meta<SnackbarProps> = {
+    component: Snackbar,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Snackbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        type: SnackbarType.Default,
+        text: 'Test message',
+        showClose: false,
+        duration: 2000,
+    },
+    argTypes: {},
+    render: (props) => {
+        const [isOpen, setIsOpen] = useState(false);
+
+        const onClose = () => {
+            setIsOpen(false);
+        };
+
+        return (
+            <>
+                <Button
+                    onClick={() => setIsOpen(!isOpen)}
+                    text={isOpen ? 'Close Snackbar' : 'Open Snackbar'}
+                />
+                {isOpen && <Snackbar {...props} onClose={onClose} />}
+            </>
+        );
+    },
+};

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/atoms/Tooltip.stories.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Tooltip, TooltipPosition } from '@/lib/components';
+import { Info } from '@iota/apps-ui-icons';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Tooltip> = {
+    component: Tooltip,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex h-20 items-center p-sm">
+                <Tooltip {...props}>
+                    <span className="text-neutral-10 dark:text-neutral-92">Hover me</span>
+                </Tooltip>
+            </div>
+        );
+    },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'This is a tooltip',
+    },
+    argTypes: {
+        text: {
+            control: {
+                type: 'text',
+            },
+        },
+        position: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
+        },
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        text: 'This is a tooltip',
+        position: TooltipPosition.Right,
+    },
+    render: (props) => {
+        return (
+            <Tooltip {...props}>
+                <Info className="text-neutral-10 dark:text-neutral-92" />
+            </Tooltip>
+        );
+    },
+};

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

@@ -0,0 +1,56 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { VisualAssetCard, VisualAssetType } from '@/components';
+
+const meta: Meta<typeof VisualAssetCard> = {
+    component: VisualAssetCard,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-64">
+                <VisualAssetCard {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof VisualAssetCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        assetSrc: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
+        altText: 'IOTA Logo',
+        onIconClick: () => {
+            console.log('Icon clicked');
+        },
+        onClick: () => {
+            console.log('Card clicked');
+        },
+        assetTitle: 'IOTA Logo',
+    },
+    argTypes: {
+        assetSrc: {
+            control: 'text',
+        },
+        altText: {
+            control: 'text',
+        },
+        icon: {
+            control: 'none',
+        },
+        onIconClick: {
+            control: 'none',
+        },
+        assetType: { control: 'select', options: Object.values(VisualAssetType) },
+        onClick: {
+            control: 'none',
+        },
+        assetTitle: {
+            control: 'text',
+        },
+    },
+};