@iota/apps-ui-kit 0.2.0 → 0.2.1

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

@@ -0,0 +1,80 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextArea } from '@/lib/components/molecules/input';
+import { useEffect, useState } from 'react';
+import { Button } from '@/lib';
+
+const meta: Meta<typeof TextArea> = {
+    component: TextArea,
+    tags: ['autodocs'],
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        caption: 'Caption',
+    },
+    argTypes: {
+        amountCounter: {
+            control: {
+                type: 'text',
+            },
+        },
+        rows: {
+            control: {
+                type: 'number',
+            },
+        },
+        maxLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        minLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        autoFocus: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    render: (props) => {
+        const { onChange, value, ...storyProps } = props;
+        const [inputValue, setInputValue] = useState(props.value ?? '');
+
+        useEffect(() => {
+            setInputValue(props.value ?? '');
+        }, [props.value]);
+
+        function onSubmit() {
+            alert(inputValue);
+        }
+
+        function handleOnChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+            setInputValue(e.target.value);
+        }
+
+        return (
+            <div className="w-[300px]">
+                <TextArea
+                    onChange={handleOnChange}
+                    value={inputValue}
+                    isVisibilityToggleEnabled
+                    {...storyProps}
+                />
+                <div className="flex w-full justify-end">
+                    <Button onClick={() => onSubmit()} text="Submit" />
+                </div>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,76 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import * as ButtonStory from '../atoms/Button.stories';
+import * as BadgeStory from '../atoms/Badge.stories';
+import { Badge, BadgeType, Button, Title, TooltipPosition } from '@/lib/components';
+
+const meta: Meta<typeof Title> = {
+    component: Title,
+    tags: ['autodocs'],
+    render: (props) => {
+        return <Title {...props} />;
+    },
+} satisfies Meta<typeof Title>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+        },
+        subtitle: {
+            control: 'text',
+        },
+        tooltipText: {
+            control: 'text',
+        },
+        tooltipPosition: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
+        },
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        tooltipText: 'Tooltip',
+        tooltipPosition: TooltipPosition.Top,
+    },
+};
+
+export const WithButton: Story = {
+    args: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+    },
+    render: (props) => {
+        return <Title {...props} trailingElement={<Button {...ButtonStory.Default.args} />} />;
+    },
+};
+
+export const WithSupportingElement: Story = {
+    args: {
+        title: 'Title',
+    },
+    render: (props) => {
+        return (
+            <Title
+                {...props}
+                supportingElement={<Badge {...BadgeStory.Default.args} type={BadgeType.Neutral} />}
+            />
+        );
+    },
+};

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

@@ -0,0 +1,70 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionHeader,
+    Badge,
+    BadgeType,
+    KeyValueInfo,
+    Title,
+} from '@/components';
+
+interface CustomStoryProps {
+    title: string;
+    badgeType: BadgeType;
+    badgeLabel: string;
+    isExpanded: boolean;
+}
+
+const Template: StoryFn<CustomStoryProps> = (args) => {
+    const [isExpanded, setIsExpanded] = useState(args.isExpanded);
+
+    const onToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    return (
+        <Accordion>
+            <AccordionHeader isExpanded={isExpanded} onToggle={onToggle}>
+                <Title
+                    title={args.title}
+                    supportingElement={<Badge type={args.badgeType} label={args.badgeLabel} />}
+                />
+            </AccordionHeader>
+            <AccordionContent isExpanded={isExpanded}>
+                <div className="flex flex-col gap-2">
+                    <KeyValueInfo keyText={'Label'} value="Value" />
+                    <KeyValueInfo keyText={'Label'} value="Value" />
+                    <KeyValueInfo keyText={'Label'} value="Value" />
+                </div>
+            </AccordionContent>
+        </Accordion>
+    );
+};
+
+const meta: Meta<CustomStoryProps> = {
+    title: 'Organisms/Accordion',
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        badgeType: { control: 'select', options: Object.values(BadgeType) },
+        badgeLabel: { control: 'text' },
+        isExpanded: { control: 'boolean' },
+    },
+} satisfies Meta<CustomStoryProps>;
+
+export default meta;
+
+export const Default: StoryObj<CustomStoryProps> = {
+    render: Template,
+    args: {
+        title: 'Default Title',
+        badgeType: BadgeType.Neutral,
+        badgeLabel: 'New',
+        isExpanded: true,
+    },
+};

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

@@ -0,0 +1,103 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { ButtonSize, DialogPosition } from '@/lib/components';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button, ButtonType, Header, Dialog, DialogContent, DialogBody } from '@/components';
+import { useState } from 'react';
+
+const meta = {
+    component: Dialog,
+    tags: ['autodocs'],
+    render: () => {
+        const [open, setOpen] = useState(false);
+        return (
+            <div className="flex">
+                <Button size={ButtonSize.Small} text="Open Dialog" onClick={() => setOpen(true)} />
+                <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogContent showCloseOnOverlay>
+                        <Header
+                            title="Connect Ledger Wallet"
+                            titleCentered
+                            onClose={() => setOpen(false)}
+                            onBack={() => setOpen(false)}
+                        />
+                        <DialogBody>
+                            <div className="flex flex-col items-center gap-2">
+                                <div className="mt-4.5">Logo</div>
+                                <div className="mt-4.5 break-words text-center">
+                                    Connect your ledger to your computer, unlock it, and launch the
+                                    IOTA app. Click Continue when done.
+                                </div>
+                                <div className="mt-4.5"> Need more help? View tutorial.</div>
+                            </div>
+                        </DialogBody>
+                        <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                            <Button
+                                size={ButtonSize.Small}
+                                type={ButtonType.Outlined}
+                                text="Cancel"
+                                onClick={() => setOpen(false)}
+                            />
+                            <Button size={ButtonSize.Small} text="Connect" />
+                        </div>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        );
+    },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const RightDialog: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+        return (
+            <div className="flex">
+                <Button size={ButtonSize.Small} text="Open Dialog" onClick={() => setOpen(true)} />
+                <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogContent showCloseOnOverlay position={DialogPosition.Right}>
+                        <div className="h-full w-full">
+                            <Header
+                                title="Connect Ledger Wallet"
+                                titleCentered
+                                onClose={() => setOpen(false)}
+                                onBack={() => setOpen(false)}
+                            />
+                            <div className="flex h-full w-full flex-col items-center justify-center">
+                                <DialogBody>
+                                    <div className="flex flex-col items-center gap-2">
+                                        <div className="mt-4.5">Logo</div>
+                                        <div className="mt-4.5 break-words text-center">
+                                            Connect your ledger to your computer, unlock it, and
+                                            launch the IOTA app. Click Continue when done.
+                                        </div>
+                                        <div className="mt-4.5">
+                                            {' '}
+                                            Need more help? View tutorial.
+                                        </div>
+                                    </div>
+                                </DialogBody>
+                                <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                                    <Button
+                                        size={ButtonSize.Small}
+                                        type={ButtonType.Outlined}
+                                        text="Cancel"
+                                        onClick={() => setOpen(false)}
+                                    />
+                                    <Button size={ButtonSize.Small} text="Connect" />
+                                </div>
+                            </div>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,77 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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 { useState } from 'react';
+
+const NAVBAR_ITEMS: NavbarItemWithId[] = [
+    { id: 'home', icon: <Home /> },
+    { id: 'assets', icon: <Assets /> },
+    { id: 'apps', icon: <Apps /> },
+    { id: 'activity', icon: <Activity /> },
+];
+const NAVBAR_ITEMS_WITH_TEXT: NavbarItemWithId[] = [
+    { id: 'home', icon: <Home />, text: 'Home' },
+    { id: 'assets', icon: <Assets />, text: 'Assets' },
+    { id: 'apps', icon: <Apps />, text: 'Apps' },
+    { id: 'activity', icon: <Activity />, text: 'Activity' },
+];
+
+type NavbarCustomProps = NavbarProps & {
+    isOpen: boolean;
+};
+
+const meta: Meta<NavbarCustomProps> = {
+    component: Navbar,
+    tags: ['autodocs'],
+    render: () => {
+        const [activeId, setActiveId] = useState<string>(NAVBAR_ITEMS[0].id);
+
+        return (
+            <div className="flex">
+                <Navbar
+                    items={NAVBAR_ITEMS}
+                    activeId={activeId}
+                    onClickItem={(id) => setActiveId(id)}
+                />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Collapsable: Story = {
+    args: {},
+    argTypes: {},
+    render: (args) => {
+        const [activeId, setActiveId] = useState<string>(NAVBAR_ITEMS[0].id);
+        const [isOpen, setIsOpen] = useState<boolean>(false);
+
+        return (
+            <div className="flex h-96">
+                <Navbar
+                    isCollapsable
+                    items={NAVBAR_ITEMS}
+                    activeId={activeId}
+                    onClickItem={(id) => setActiveId(id)}
+                    isOpen={isOpen}
+                    onToggleNavbar={() => setIsOpen(!isOpen)}
+                />
+                <NavbarSlideout
+                    items={NAVBAR_ITEMS_WITH_TEXT}
+                    activeId={activeId}
+                    onClickItem={(id) => setActiveId(id)}
+                    isOpen={isOpen}
+                    onToggleNavbar={() => setIsOpen(!isOpen)}
+                />
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,154 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+    TableHeaderCell,
+    Table,
+    TableBody,
+    TableHeader,
+    TableRow,
+    TableRowCheckbox,
+    TableCellText,
+    TableActionButton,
+    TableHeaderCheckbox,
+} from '@/lib';
+import { useState } from 'react';
+
+const HEADERS = [
+    {
+        label: 'Name',
+        columnKey: 2,
+        hasSort: true,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+    {
+        label: 'Age',
+        columnKey: 3,
+        hasSort: true,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+    {
+        label: 'Occupation',
+        columnKey: 4,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+    {
+        label: 'Email',
+        columnKey: 5,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+    {
+        label: 'Start Date',
+        columnKey: 6,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+    {
+        label: 'End Date',
+        columnKey: 7,
+        cell: ({ text }: { text: string }) => <TableCellText>{text}</TableCellText>,
+    },
+];
+
+const DATA = [
+    {
+        name: 'Jon Doe',
+        age: 30,
+        occupation: 'Software Engineer',
+        email: 'test@acme.com',
+        startDate: '10.04.2016',
+        endDate: '12.03.2019',
+    },
+];
+
+const meta = {
+    component: Table,
+    tags: ['autodocs'],
+    render: (props) => {
+        const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+        return (
+            <div className="container mx-auto p-4">
+                <Table {...props} selectedRowIndexes={selectedRows}>
+                    <TableHeader>
+                        <TableRow
+                            leading={
+                                <TableHeaderCheckbox
+                                    onCheckboxChange={(checked) => {
+                                        if (checked) {
+                                            setSelectedRows(new Set(props.rowIndexes));
+                                        } else {
+                                            setSelectedRows(new Set());
+                                        }
+                                    }}
+                                />
+                            }
+                        >
+                            {HEADERS.map((header, index) => (
+                                <TableHeaderCell key={index} {...header} />
+                            ))}
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {DATA.map((row, rowIndex) => (
+                            <TableRow
+                                key={rowIndex}
+                                leading={
+                                    <TableRowCheckbox
+                                        rowIndex={rowIndex}
+                                        onCheckboxChange={(checked) => {
+                                            setSelectedRows((selectedRows) => {
+                                                if (checked) {
+                                                    selectedRows.add(rowIndex);
+                                                } else {
+                                                    selectedRows.delete(rowIndex);
+                                                }
+
+                                                console.log(
+                                                    'Checked checkbox at index:',
+                                                    rowIndex,
+                                                    'with value:',
+                                                    checked,
+                                                    'table values:',
+                                                    selectedRows,
+                                                );
+
+                                                return new Set(selectedRows);
+                                            });
+                                        }}
+                                    />
+                                }
+                            >
+                                {Object.entries(row).map((cell, columnIndex) => {
+                                    const Cell = HEADERS[columnIndex].cell;
+                                    return (
+                                        <td key={columnIndex}>
+                                            <Cell text={cell[1].toString()} />
+                                        </td>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        supportingLabel: '10.7k records',
+        paginationOptions: {
+            onFirst: () => console.log('First'),
+            onNext: () => console.log('Next'),
+            hasFirst: true,
+            hasNext: false,
+        },
+        action: <TableActionButton text="Action" />,
+        rowIndexes: [0, 1, 2],
+    },
+};