@iota/apps-ui-kit 0.2.0 → 0.2.1

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

@@ -0,0 +1,42 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Snackbar, SnackbarProps, 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/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',
+        },
+    },
+};

package/src/storybook/stories/components/VariableSpacingShowcase.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from '@/lib';
+import { Showcase } from '@/storybook/blocks';
+import { VARIABLE_GAP_CLASSES, VARIABLE_PADDING_CLASSES } from '@/storybook/constants';
+
+export function VariableSpacingShowcase() {
+    return (
+        <div className="flex flex-col gap-10">
+            <p className="text-headline-sm text-neutral-10">
+                The variable spacing changes based on the screen size.
+            </p>
+
+            <DocumentedBlock title="Gap">
+                {VARIABLE_GAP_CLASSES.map((value) => (
+                    <Showcase key={value} title={value}>
+                        <div className={`flex flex-row ${value}`}>
+                            <Button text="Button 1" />
+                            <Button text="Button 2" />
+                        </div>
+                    </Showcase>
+                ))}
+            </DocumentedBlock>
+
+            <DocumentedBlock title="Padding">
+                {VARIABLE_PADDING_CLASSES.map((value) => (
+                    <Showcase key={value} title={value}>
+                        <div className={`flex flex-row ${value}`}>
+                            <Button text="Button 1" />
+                        </div>
+                    </Showcase>
+                ))}
+            </DocumentedBlock>
+        </div>
+    );
+}
+
+function DocumentedBlock({ title, children }: React.PropsWithChildren<{ title: string }>) {
+    return (
+        <div className="flex flex-col gap-y-4">
+            <h2 className="text-headline-md text-neutral-10">{title}</h2>
+            <div className="flex flex-row flex-wrap gap-10">{children}</div>
+        </div>
+    );
+}

package/src/storybook/stories/components/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './VariableSpacingShowcase';

package/src/storybook/stories/design-tokens/colors.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import {
+    IOTA_PRIMITIVES_COLOR_PALETTE,
+    SHADER_COLOR_PALETTE,
+} from '../../../lib/constants/colors.constants';
+
+<Meta title="Design Tokens/Colors" />
+
+## Primitives
+
+<ColorPalette>
+    {Object.entries(IOTA_PRIMITIVES_COLOR_PALETTE).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={values} />;
+    })}
+</ColorPalette>
+
+## Shaders
+
+<ColorPalette>
+    {Object.entries(SHADER_COLOR_PALETTE).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={values} />;
+    })}
+</ColorPalette>

package/src/storybook/stories/design-tokens/icons.stories.mdx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+import * as Icons from '@iota/apps-ui-icons';
+
+<Meta title="Design Tokens/Icon Gallery" />
+
+# Icon Gallery
+
+<br />
+
+<IconGallery>
+    {Object.keys(Icons).map((icon) => (
+        <IconItem key={icon} name={icon}>
+            {React.createElement(Icons[icon])}
+        </IconItem>
+    ))}
+</IconGallery>

package/src/storybook/stories/design-tokens/typeset.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { TYPESETS } from '../../constants';
+import { TypeSet, TypeSetItem } from '../../blocks';
+
+<Meta title="Design Tokens/Typesets" />
+
+# Typesets
+
+<Unstyled>
+    <div className="flex flex-col gap-y-12">
+        {TYPESETS.map((typeset, typeSetIndex) => (
+            <TypeSet key={typeSetIndex} {...typeset} />
+        ))}
+    </div>
+</Unstyled>

package/src/storybook/stories/design-tokens/variable-spacing.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { VariableSpacingShowcase } from '../components';
+
+<Meta title="Design Tokens/Variable Spacing" />
+
+# Variable Spacing
+
+<Unstyled>
+   <VariableSpacingShowcase />
+</Unstyled>

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

@@ -0,0 +1,69 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Account, BadgeType } from '@/components';
+import cx from 'classnames';
+
+const meta: Meta<typeof Account> = {
+    component: Account,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-1/2">
+                <Account {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Account>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Avatar = ({ isLocked }: { isLocked?: boolean }) => {
+    const circleFillClass = isLocked ? 'fill-neutral-80 dark:fill-neutral-30' : 'fill-primary-30';
+    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={cx(circleFillClass)} />
+        </svg>
+    );
+};
+
+export const Default: Story = {
+    args: {
+        title: 'Account',
+        subtitle: '0x0d7...3f37',
+        isLocked: true,
+        avatarContent: Avatar,
+    },
+    argTypes: {
+        badgeType: {
+            control: 'select',
+            options: Object.values(BadgeType),
+        },
+        isLocked: {
+            control: 'boolean',
+        },
+        onOptionsClick: {
+            action: 'onOptionsClick',
+            control: 'none',
+        },
+        onLockAccountClick: {
+            action: 'onLockAccount',
+            control: 'none',
+        },
+        avatarContent: {
+            control: 'none',
+        },
+        badgeText: {
+            control: 'text',
+        },
+    },
+};

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

@@ -0,0 +1,39 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Address } from '@/components';
+
+const meta: Meta<typeof Address> = {
+    component: Address,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col items-start gap-2">
+                <Address {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Address>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: '0x0d7...3f37',
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+        },
+        isCopyable: {
+            control: 'boolean',
+        },
+        isExternal: {
+            control: 'boolean',
+        },
+    },
+};

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

@@ -0,0 +1,115 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { IotaLogoSmall } from '@iota/apps-ui-icons';
+import {
+    Card,
+    CardProps,
+    CardImage,
+    CardImageProps,
+    CardAction,
+    CardBody,
+    CardBodyProps,
+    CardActionProps,
+    CardActionType,
+    CardType,
+    ImageType,
+    ImageShape,
+} from '@/components';
+
+type CardCustomProps = CardProps & {
+    imageType: CardImageProps['type'];
+    imageUrl: CardImageProps['url'];
+    imageVariant: CardImageProps['shape'];
+    textTitle: CardBodyProps['title'];
+    textSubtitle: CardBodyProps['subtitle'];
+    actionTitle: CardActionProps['title'];
+    actionSubtitle: CardActionProps['subtitle'];
+    actionType: CardActionProps['type'];
+};
+
+const meta: Meta<CardCustomProps> = {
+    component: Card,
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const COMMON_ARG_TYPES = {
+    imageType: {
+        control: 'select',
+        options: Object.values(ImageType),
+    },
+    imageVariant: {
+        control: 'select',
+        options: Object.values(ImageShape),
+    },
+    actionType: {
+        control: 'select',
+        options: Object.values(CardActionType),
+    },
+    onClick: {
+        action: 'clicked',
+    },
+};
+
+const COMMON_ARGS = {
+    textTitle: 'Card Title',
+    textSubtitle: 'Card Subtitle',
+    actionTitle: 'Action title',
+    actionSubtitle: 'Action subtitle',
+    actionType: CardActionType.Link,
+    variant: CardType.Default,
+    isDisabled: false,
+    imageVariant: ImageShape.Rounded,
+};
+
+export const Default: Story = {
+    args: {
+        ...COMMON_ARGS,
+        imageType: ImageType.Placeholder,
+        imageUrl: 'https://via.placeholder.com/150.png',
+    },
+    argTypes: COMMON_ARG_TYPES,
+    render: (args) => {
+        return (
+            <Card isDisabled={args.isDisabled} type={args.type} onClick={args.onClick}>
+                <CardImage type={args.imageType} shape={args.imageVariant} url={args.imageUrl} />
+                <CardBody title={args.textTitle} subtitle={args.textSubtitle} />
+                <CardAction
+                    title={args.actionTitle}
+                    subtitle={args.actionSubtitle}
+                    type={args.actionType}
+                    onClick={args.onClick}
+                />
+            </Card>
+        );
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        ...COMMON_ARGS,
+        imageType: ImageType.BgSolid,
+    },
+    argTypes: COMMON_ARG_TYPES,
+    render: (args) => {
+        return (
+            <Card isDisabled={args.isDisabled} type={args.type} onClick={args.onClick}>
+                <CardImage type={args.imageType} shape={args.imageVariant} url={args.imageUrl}>
+                    <IotaLogoSmall />
+                </CardImage>
+                <CardBody title={args.textTitle} subtitle={args.textSubtitle} />
+                <CardAction
+                    title={args.actionTitle}
+                    subtitle={args.actionSubtitle}
+                    type={args.actionType}
+                    onClick={args.onClick}
+                />
+            </Card>
+        );
+    },
+};

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

@@ -0,0 +1,122 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Chip } from '@/components/molecules/chip/Chip';
+import { PlaceholderReplace } from '@iota/apps-ui-icons';
+
+const meta: Meta<typeof Chip> = {
+    component: Chip,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex">
+                <Chip {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        showClose: {
+            control: 'boolean',
+        },
+        selected: {
+            control: 'boolean',
+        },
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        label: 'Label',
+        leadingElement: <PlaceholderReplace />,
+    },
+    render: (props) => {
+        return (
+            <div className="flex flex-row gap-x-4">
+                <Chip {...props} />
+                <Chip {...props} showClose />
+            </div>
+        );
+    },
+};
+
+export const WithAvatar: Story = {
+    args: {
+        label: 'Label',
+        avatar: <Avatar />,
+    },
+    render: (props) => {
+        return (
+            <div className="flex flex-row gap-x-4">
+                <Chip {...props} />
+                <Chip {...props} showClose />
+            </div>
+        );
+    },
+};
+
+function Avatar() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+        >
+            <circle cx="12" cy="12" r="12" fill="#0101FF" />
+            <circle
+                cx="12"
+                cy="12"
+                r="12"
+                fill="url(#paint0_linear_288_11913)"
+                fill-opacity="0.2"
+            />
+            <circle
+                cx="12"
+                cy="12"
+                r="12"
+                fill="url(#paint1_linear_288_11913)"
+                fill-opacity="0.2"
+            />
+            <defs>
+                <linearGradient
+                    id="paint0_linear_288_11913"
+                    x1="12"
+                    y1="0"
+                    x2="17.7143"
+                    y2="13.4286"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.990135" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+                <linearGradient
+                    id="paint1_linear_288_11913"
+                    x1="12"
+                    y1="0"
+                    x2="6.85714"
+                    y2="5.42857"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop offset="0.9999" stop-opacity="0" />
+                    <stop offset="1" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+}

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

@@ -0,0 +1,63 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { DisplayStats, TooltipPosition, DisplayStatsType, DisplayStatsSize } from '@/components';
+
+const meta: Meta<typeof DisplayStats> = {
+    component: DisplayStats,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-1/3">
+                <DisplayStats {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof DisplayStats>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        supportingLabel: 'IOTA',
+        tooltipText: 'Tooltip',
+        type: DisplayStatsType.Default,
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        tooltipText: {
+            control: 'text',
+        },
+        tooltipPosition: {
+            control: {
+                type: 'select',
+                options: Object.values(TooltipPosition),
+            },
+        },
+        value: {
+            control: 'text',
+        },
+        supportingLabel: {
+            control: 'text',
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(DisplayStatsType),
+            },
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: Object.values(DisplayStatsSize),
+            },
+        },
+    },
+};