@iota/apps-ui-kit 0.2.0 → 0.2.1

package/src/storybook/stories/atoms/Button.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 { Button } from '@/components/atoms/button/Button';
+import { ButtonSize, ButtonType } from '@/components/atoms/button';
+
+const meta: Meta<typeof Button> = {
+    component: Button,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <Button {...props} />;
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'Button',
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonSize),
+            },
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonType),
+            },
+        },
+        disabled: {
+            control: 'boolean',
+        },
+    },
+};

package/src/storybook/stories/atoms/ButtonSegment.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 { ButtonSegment, ButtonSegmentType } from '@/components/atoms/';
+
+const meta: Meta<typeof ButtonSegment> = {
+    component: ButtonSegment,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col items-start gap-2">
+                <ButtonSegment {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof ButtonSegment>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        selected: {
+            control: 'boolean',
+        },
+        disabled: {
+            control: 'boolean',
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonSegmentType),
+            },
+        },
+    },
+};

package/src/storybook/stories/atoms/Checkbox.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 { Checkbox } from '@/components';
+
+const meta: Meta<typeof Checkbox> = {
+    component: Checkbox,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex">
+                <Checkbox {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+};
+
+export const LabelFirst: Story = {
+    args: {
+        label: 'Label',
+        isLabelFirst: true,
+    },
+};

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

@@ -0,0 +1,22 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StoryObj } from '@storybook/react';
+
+const meta = {
+    title: 'Token Showcase/Scrollbar',
+    tags: ['autodocs'],
+    render: () => {
+        return (
+            <div className="h-[300px] w-1/2 overflow-y-scroll">
+                <div className="h-[500px]"></div>
+            </div>
+        );
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Divider } from '@/components/atoms/divider';
+import { DividerType } from '@/components/atoms/divider';
+
+const meta: Meta<typeof Divider> = {
+    component: Divider,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex h-96 items-center justify-center">
+                <Divider {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        width: 'w-3/4',
+        height: 'h-3/4',
+    },
+    argTypes: {
+        width: {
+            control: 'text',
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(DividerType),
+            },
+        },
+    },
+};

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>
+    ),
+};