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

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,112 @@
+// 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 type { CardProps, CardImageProps, CardBodyProps, CardActionProps } from '@/components';
+import {
+    Card,
+    CardImage,
+    CardAction,
+    CardBody,
+    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),
+            },
+        },
+    },
+};

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