@iota/apps-ui-kit 0.0.0-dev-20251015065834

package/src/lib/tailwind/helpers.ts

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ScreenSize } from '../enums';
+
+export const pxToRem = (px: number, base: number = 16) => `${px / base}rem`;
+
+export function getTailwindScreens(
+    breakpoints: Partial<Record<ScreenSize, number>>,
+): Record<string, string> {
+    const screens: Record<string, string> = Object.entries(breakpoints).reduce(
+        (acc, [key, value]) => {
+            acc[key] = `${value}px`;
+            return acc;
+        },
+        {} as Record<string, string>,
+    );
+
+    return screens;
+}

package/src/lib/tailwind/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { default as uiKitResponsivePreset } from './responsive.presets';
+export { default as uiKitStaticPreset } from './static.presets';

package/src/lib/tailwind/plugins.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import plugin from 'tailwindcss/plugin';
+
+export const firefoxPlugin = plugin(({ addVariant }) => {
+    addVariant('firefox', '@-moz-document url-prefix()');
+});
+
+export const namesVariant = plugin(({ addVariant }) => {
+    addVariant('names', '&:is(.names *)');
+});

package/src/lib/tailwind/responsive.presets.ts

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import type { ScreenBreakpoints } from './types';
+import { ScreenSize } from '../enums';
+import { getTailwindScreens, pxToRem } from './helpers';
+import { BASE_CONFIG } from './base.presets';
+import merge from 'lodash.merge';
+
+const BREAKPOINTS: ScreenBreakpoints = {
+    [ScreenSize.Sm]: 768,
+    [ScreenSize.Md]: 1024,
+    [ScreenSize.Lg]: 1400,
+    [ScreenSize.Xl]: 1920,
+};
+
+const screens = getTailwindScreens(BREAKPOINTS);
+
+const responsivePreset: Config = merge({}, BASE_CONFIG, {
+    theme: {
+        screens,
+        container: {
+            center: true,
+            screens,
+            padding: {
+                DEFAULT: pxToRem(20),
+                md: pxToRem(48),
+                lg: pxToRem(120),
+                xl: pxToRem(240),
+            },
+        },
+    },
+});
+
+export default responsivePreset;

package/src/lib/tailwind/static.presets.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import type { ScreenBreakpoints } from './types';
+import { getTailwindScreens } from './helpers';
+import { BASE_CONFIG } from './base.presets';
+import merge from 'lodash.merge';
+
+const BREAKPOINTS: Partial<ScreenBreakpoints> & { default: number } = {
+    default: 0,
+};
+
+const screens = getTailwindScreens(BREAKPOINTS);
+
+const staticPreset: Config = merge({}, BASE_CONFIG, {
+    theme: {
+        screens,
+    },
+    corePlugins: {
+        container: false,
+    },
+});
+
+export default staticPreset;

package/src/lib/tailwind/types.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ScreenSize } from '../enums';
+
+export type ScreenBreakpoints = Record<ScreenSize, number>;

package/src/lib/utils/format.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function truncate(value: string, startLength: number = 6, endLength: number = 6): string {
+    return value.length > startLength + endLength
+        ? `${value.slice(0, startLength)}...${value.slice(-endLength)}`
+        : value;
+}

package/src/lib/utils/index.ts

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

package/src/storybook/blocks/Showcase.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+interface ShowcaseProps {
+    children?: React.ReactNode;
+    title: string;
+}
+
+export function Showcase({ children, title }: ShowcaseProps) {
+    return (
+        <div className="flex flex-col gap-2">
+            <code className="inline w-fit rounded-md bg-iota-neutral-96 px-xxs">{title}</code>
+            <div className="flex">
+                <div className="flex flex-row items-center justify-center rounded-xl border border-iota-neutral-70 p-md">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/storybook/blocks/TypeSet.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { TypeSetItem } from './TypeSetItem';
+import { getFontSizeLabelFromClass } from '../helpers';
+import type { TailwindCustomFonts } from '@/lib/tailwind/constants';
+
+export interface TypeSetProps {
+    typeset: TailwindCustomFonts;
+    label: string;
+}
+
+export function TypeSet({ typeset, label }: TypeSetProps) {
+    const textClasses = Object.entries(typeset);
+    return (
+        <div className="mt-4 flex flex-col gap-y-2 rounded-md border border-gray-200 px-xl py-lg shadow-md">
+            {textClasses.map(([fontClass, [_, fontConfig]], index) => {
+                const sizeText = getFontSizeLabelFromClass(fontClass);
+                return (
+                    <React.Fragment key={index}>
+                        <TypeSetItem
+                            sampleText={label}
+                            fontClass={fontClass}
+                            sizeText={sizeText}
+                            {...fontConfig}
+                        />
+                        {index !== textClasses.length - 1 && <hr className="mb-sm mt-xxs" />}
+                    </React.Fragment>
+                );
+            })}
+        </div>
+    );
+}

package/src/storybook/blocks/TypeSetItem.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Fragment, useEffect, useRef, useState } from 'react';
+
+enum FontStyleProperties {
+    FontSize = 'Font Size',
+    LetterSpacing = 'Letter Spacing',
+    FontWeight = 'Font Weight',
+    LineHeight = 'Line Height',
+    FontFamily = 'Font Family',
+}
+
+interface TypeSetItemProps {
+    sampleText: string;
+    fontClass?: string;
+    sizeText?: string;
+}
+
+type FontStyles = Record<FontStyleProperties, string>;
+
+function getComputedFontStyles(element: HTMLDivElement): FontStyles {
+    const computedStyles = getComputedStyle(element);
+    return {
+        [FontStyleProperties.FontSize]: computedStyles.fontSize,
+        [FontStyleProperties.LetterSpacing]: computedStyles.letterSpacing,
+        [FontStyleProperties.FontWeight]: computedStyles.fontWeight,
+        [FontStyleProperties.LineHeight]: computedStyles.lineHeight,
+        [FontStyleProperties.FontFamily]: computedStyles.fontFamily,
+    };
+}
+
+export function TypeSetItem({ sampleText, sizeText, fontClass }: TypeSetItemProps) {
+    const [styles, setStyles] = useState<FontStyles | undefined>();
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const computedStyles = getComputedFontStyles(ref.current);
+            setStyles(computedStyles);
+        }
+    }, [ref.current]);
+
+    return (
+        <div className="flex flex-row items-start gap-x-md">
+            {styles && (
+                <div className="text-xs text-iota-neutral-60">
+                    {styles[FontStyleProperties.FontSize]}
+                </div>
+            )}
+            <div className="flex flex-col gap-y-sm">
+                <span ref={ref} className={fontClass}>
+                    {sampleText} {sizeText}
+                </span>
+                {styles && (
+                    <div className="flex flex-row gap-x-xs">
+                        {Object.entries(styles)
+                            .filter(([key]) => key !== FontStyleProperties.FontSize)
+                            .map(([key, value], index) => (
+                                <Fragment key={index}>
+                                    {index > 0 && (
+                                        <span className="text-xs text-iota-neutral-60">|</span>
+                                    )}
+                                    <span className="text-xs text-iota-neutral-60">
+                                        {key}: {value}
+                                    </span>
+                                </Fragment>
+                            ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/storybook/blocks/index.ts

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

package/src/storybook/constants/gradients.constants.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NAMES_GRADIENTS } from '@/lib/tailwind/constants/gradients.constants';
+
+export const COLOR_GRADIENTS = {
+    names: NAMES_GRADIENTS,
+};

package/src/storybook/constants/index.ts

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

package/src/storybook/constants/typeset.constants.ts

@@ -0,0 +1,39 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    TEXT_LABEL_CLASSES,
+    TEXT_BODY_CLASSES,
+    TEXT_BODY_DISAMBIGUOUS_CLASSES,
+    TEXT_TITLE_CLASSES,
+    TEXT_HEADLINE_CLASSES,
+    TEXT_DISPLAY_CLASSES,
+} from '@/lib/tailwind/constants';
+import type { TypeSetProps } from '../blocks';
+
+export const TYPESETS: TypeSetProps[] = [
+    {
+        label: 'Label',
+        typeset: TEXT_LABEL_CLASSES,
+    },
+    {
+        label: 'Body',
+        typeset: TEXT_BODY_CLASSES,
+    },
+    {
+        label: 'Body Disambiguous',
+        typeset: TEXT_BODY_DISAMBIGUOUS_CLASSES,
+    },
+    {
+        label: 'Title',
+        typeset: TEXT_TITLE_CLASSES,
+    },
+    {
+        label: 'Headline',
+        typeset: TEXT_HEADLINE_CLASSES,
+    },
+    {
+        label: 'Display',
+        typeset: TEXT_DISPLAY_CLASSES,
+    },
+];

package/src/storybook/constants/variableSpacing.constants.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const VARIABLE_GAP_CLASSES: string[] = ['gap-xs--rs', 'gap-sm--rs', 'gap-md--rs'];
+
+export const VARIABLE_PADDING_CLASSES: string[] = ['p-xs--rs', 'p-sm--rs', 'p-md--rs'];

package/src/storybook/helpers/formatGradientNames.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function formatGradientNames(
+    title: string,
+    colors: Record<string, string>,
+): Record<string, string> {
+    const formattedColors: Record<string, string> = {};
+
+    Object.entries(colors).forEach(([key, value]) => {
+        formattedColors[key.replace(`${title}-`, '')] = value;
+    });
+
+    return formattedColors;
+}

package/src/storybook/helpers/getFontSizeLabel.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+const SIZE_TO_LABEL_MAP: Record<string, string> = {
+    sm: 'Small',
+    md: 'Medium',
+    lg: 'Large',
+};
+
+export function getFontSizeLabelFromClass(fontClass: string): string {
+    const fontClassSplit = fontClass.split('-');
+    const size = fontClassSplit[fontClassSplit.length - 1];
+    const label = SIZE_TO_LABEL_MAP[size];
+    return label;
+}

package/src/storybook/helpers/index.ts

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

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

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

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