@iota/apps-ui-kit 0.2.0 → 0.2.1

package/src/lib/tailwind/constants/fontSizes.constants.ts

@@ -0,0 +1,201 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ThemeConfig } from 'tailwindcss/types/config';
+
+type TailwindFontSize = ThemeConfig['fontSize'];
+
+export type TailwindFontSizeConfig = Partial<{
+    lineHeight: string;
+    letterSpacing: string;
+    fontWeight: string | number;
+}>;
+
+export type TailwindCustomFonts = Record<
+    string,
+    [
+        string,
+        Partial<{
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string | number;
+        }>,
+    ]
+>;
+
+export const TEXT_LABEL_CLASSES: TailwindCustomFonts = {
+    'text-label-sm': [
+        '11px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.2px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-md': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-lg': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+} satisfies TailwindFontSize;
+
+export const TEXT_BODY_CLASSES: TailwindCustomFonts = {
+    'text-body-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_BODY_DISAMBIGUOUS_CLASSES: TailwindCustomFonts = {
+    'text-body-ds-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.2px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_TITLE_CLASSES: TailwindCustomFonts = {
+    'text-title-sm': [
+        '14px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-md': [
+        '16px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.15px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-lg': [
+        '20px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+};
+
+export const TEXT_HEADLINE_CLASSES: TailwindCustomFonts = {
+    'text-headline-sm': [
+        '24px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.2px',
+            fontWeight: 500,
+        },
+    ],
+    'text-headline-md': [
+        '28px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+    'text-headline-lg': [
+        '32px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+};
+
+export const TEXT_DISPLAY_CLASSES: TailwindCustomFonts = {
+    'text-display-sm': [
+        '36px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+    'text-display-md': [
+        '48px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+    'text-display-lg': [
+        '60px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+};
+
+const CUSTOM_TEXT_CLASSES: TailwindCustomFonts = {
+    ...TEXT_LABEL_CLASSES,
+    ...TEXT_BODY_CLASSES,
+    ...TEXT_BODY_DISAMBIGUOUS_CLASSES,
+    ...TEXT_TITLE_CLASSES,
+    ...TEXT_HEADLINE_CLASSES,
+    ...TEXT_DISPLAY_CLASSES,
+};
+
+// Remove the 'text-' prefix from the keys to match the TailwindCSS font size keys
+export const CUSTOM_FONT_SIZES: TailwindCustomFonts = Object.entries(CUSTOM_TEXT_CLASSES).reduce(
+    (acc, [className, properties]) => {
+        const key = className.startsWith('text-') ? className.replace('text-', '') : className;
+        return { ...acc, [key]: properties };
+    },
+    {},
+);

package/src/lib/tailwind/constants/index.ts

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

package/src/lib/tailwind/constants/scaling.constants.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { pxToRem } from '../helpers';
+
+type TailwindScale = Record<string, string> & { DEFAULT?: string };
+
+export const BORDER_RADIUS: TailwindScale = {
+    none: pxToRem(0),
+    sm: pxToRem(2),
+    DEFAULT: pxToRem(4),
+    md: pxToRem(6),
+    lg: pxToRem(8),
+    xl: pxToRem(12),
+    '2xl': pxToRem(16),
+    '3xl': pxToRem(24),
+    full: pxToRem(120),
+};
+
+export const CUSTOM_SPACING: TailwindScale = {
+    none: pxToRem(0),
+    xxxs: pxToRem(2),
+    xxs: pxToRem(4),
+    xs: pxToRem(8),
+    sm: pxToRem(12),
+    md: pxToRem(16),
+    lg: pxToRem(24),
+    xl: pxToRem(32),
+    '2xl': pxToRem(48),
+};
+
+export const OPACITY: TailwindScale = {
+    0: '0',
+    8: '0.08',
+    12: '0.12',
+    16: '0.16',
+    40: '0.4',
+    60: '0.6',
+    80: '0.8',
+    100: '1',
+};

package/src/lib/tailwind/constants/variableSpacing.constants.ts

@@ -0,0 +1,66 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ScreenSize } from '../../enums/screenSize.enums';
+
+enum VariableSpacingClassPrefix {
+    Xs = 'xs--rs',
+    Sm = 'sm--rs',
+    Md = 'md--rs',
+}
+
+type DefaultValue = string;
+type ScreenMdValue = string;
+type ScreenLgValue = string;
+type ScreenXlValue = string;
+
+const VARIABLE_SPACING: Record<
+    VariableSpacingClassPrefix,
+    [DefaultValue, ScreenMdValue, ScreenLgValue?, ScreenXlValue?]
+> = {
+    [VariableSpacingClassPrefix.Xs]: ['4px', '8px'],
+    [VariableSpacingClassPrefix.Sm]: ['8px', '12px'],
+    [VariableSpacingClassPrefix.Md]: ['16px', '24px'],
+};
+
+function getClampedSpacingValues(
+    key: VariableSpacingClassPrefix,
+    screens: Record<string, string>,
+): string {
+    const CUSTOM_SCREEN_SIZES: ScreenSize[] = [
+        ScreenSize.Sm,
+        ScreenSize.Md,
+        ScreenSize.Lg,
+        ScreenSize.Xl,
+    ];
+
+    const values = VARIABLE_SPACING[key];
+    // Use the first value as the default value, since it doesn't need to be clamped.
+    let clampValue = `${values[0]}`;
+    for (let i = 1; i < values.length; i++) {
+        if (values[i]) {
+            // Iterate the tailwind screens and check if desired the breakpoint exists.
+            const breakpoint = screens[CUSTOM_SCREEN_SIZES[i]];
+            if (breakpoint) {
+                // Clamp the spacing value using the screen breakpoint as reference.
+                clampValue = `clamp(${clampValue}, (100vw - ${breakpoint}) * 99, ${values[i]})`;
+            }
+        }
+    }
+
+    return clampValue;
+}
+
+export function generateVariableSpacing(tailwindScreens: Record<string, string>) {
+    const variableSpacing = Object.keys(VARIABLE_SPACING).reduce((acc, variableSpacingPrefix) => {
+        const clampedSpacing = getClampedSpacingValues(
+            variableSpacingPrefix as VariableSpacingClassPrefix,
+            tailwindScreens,
+        );
+        return {
+            ...acc,
+            [variableSpacingPrefix]: clampedSpacing,
+        };
+    }, {});
+    return variableSpacing;
+}

package/src/lib/tailwind/helpers.ts

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { 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/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(24),
+                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 { 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-neutral-96 px-xxs">{title}</code>
+            <div className="flex">
+                <div className="flex flex-row items-center justify-center rounded-xl border border-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 { TypeSetItem } from './TypeSetItem';
+import { getFontSizeLabelFromClass } from '../helpers';
+import { 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 (
+                    <>
+                        <TypeSetItem
+                            key={index}
+                            sampleText={label}
+                            fontClass={fontClass}
+                            sizeText={sizeText}
+                            {...fontConfig}
+                        />
+                        {index !== textClasses.length - 1 && <hr className="mb-sm mt-xxs" />}
+                    </>
+                );
+            })}
+        </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-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-neutral-60">|</span>
+                                    )}
+                                    <span className="text-xs text-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/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/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),
+            },
+        },
+    },
+};