@iota/apps-ui-kit 0.2.0 → 0.2.1

package/src/lib/components/organisms/table/Table.tsx

@@ -0,0 +1,224 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren, ReactNode } from 'react';
+import cx from 'classnames';
+import { TableProvider, useTableContext } from './TableContext';
+import {
+    Button,
+    ButtonProps,
+    ButtonSize,
+    ButtonType,
+    Checkbox,
+    TableCellBase,
+    TableHeaderCell,
+} from '@/lib';
+import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
+
+export interface TablePaginationOptions {
+    /**
+     * On Next page button click.
+     */
+    onNext?: () => void;
+    /**
+     * On Previous page button click.
+     */
+    onPrev?: () => void;
+    /**
+     * On First page button click.
+     */
+    onFirst?: () => void;
+    /**
+     * On Last page button click.
+     */
+    onLast?: () => void;
+    /**
+     * Has Next button.
+     */
+    hasNext?: boolean;
+    /**
+     * Has Previous button.
+     */
+    hasPrev?: boolean;
+    /**
+     * Has First button.
+     */
+    hasFirst?: boolean;
+    /**
+     * Has Last button.
+     */
+    hasLast?: boolean;
+}
+
+export type TableProps = {
+    /**
+     * Options for the table pagination.
+     */
+    paginationOptions?: TablePaginationOptions;
+    /**
+     * The action component.
+     */
+    action?: ReactNode;
+    /**
+     * The supporting label of the table.
+     */
+    supportingLabel?: string;
+    /**
+     * Numeric indexes of the selected rows.
+     */
+    selectedRowIndexes?: Set<number>;
+    /**
+     * Numeric indexes of all the rows.
+     */
+    rowIndexes: number[];
+    /**
+     * The page size selector component.
+     */
+    pageSizeSelector?: ReactNode;
+};
+
+export function Table({
+    paginationOptions,
+    action,
+    supportingLabel,
+    selectedRowIndexes = new Set(),
+    rowIndexes,
+    children,
+    pageSizeSelector,
+}: PropsWithChildren<TableProps>): JSX.Element {
+    return (
+        <TableProvider selectedRowIndexes={selectedRowIndexes} rowIndexes={rowIndexes}>
+            <div className="w-full">
+                <div className="overflow-auto">
+                    <table className="w-full table-auto">{children}</table>
+                </div>
+                <div
+                    className={cx('flex w-full items-center gap-2 pt-md', {
+                        hidden: !supportingLabel && !paginationOptions && !action,
+                        'justify-between': paginationOptions,
+                        'justify-end': !paginationOptions && action,
+                    })}
+                >
+                    {(paginationOptions || action) && (
+                        <div className="flex gap-2">
+                            {paginationOptions && (
+                                <>
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowLeft />}
+                                        disabled={!paginationOptions.hasFirst}
+                                        onClick={paginationOptions.onFirst}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowLeft />}
+                                        disabled={!paginationOptions.hasPrev}
+                                        onClick={paginationOptions.onPrev}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowRight />}
+                                        disabled={!paginationOptions.hasNext}
+                                        onClick={paginationOptions.onNext}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowRight />}
+                                        disabled={!paginationOptions.hasLast}
+                                        onClick={paginationOptions.onLast}
+                                    />
+                                </>
+                            )}
+                            {action && action}
+                        </div>
+                    )}
+                    {supportingLabel || pageSizeSelector ? (
+                        <div className="flex flex-row items-center gap-x-sm">
+                            {supportingLabel && (
+                                <span className=" text-label-md text-neutral-40 dark:text-neutral-60">
+                                    {supportingLabel}
+                                </span>
+                            )}
+                            {pageSizeSelector && <div className="ml-2">{pageSizeSelector}</div>}
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+        </TableProvider>
+    );
+}
+
+export function TableActionButton(props: PropsWithChildren<ButtonProps>) {
+    return <Button type={ButtonType.Secondary} size={ButtonSize.Small} {...props} />;
+}
+
+export function TableHeader({ children }: PropsWithChildren): JSX.Element {
+    return <thead>{children}</thead>;
+}
+
+export function TableRow({
+    children,
+    leading,
+}: PropsWithChildren<{ leading?: React.ReactNode }>): JSX.Element {
+    return (
+        <tr>
+            {leading}
+            {children}
+        </tr>
+    );
+}
+
+const TEXT_COLOR_CLASS = 'text-neutral-40 dark:text-neutral-60';
+const TEXT_SIZE_CLASS = 'text-body-md';
+
+export function TableBody({ children }: PropsWithChildren): JSX.Element {
+    return <tbody className={cx(TEXT_COLOR_CLASS, TEXT_SIZE_CLASS)}>{children}</tbody>;
+}
+
+export interface TableRowCheckboxProps {
+    rowIndex: number;
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export function TableRowCheckbox({
+    rowIndex,
+    onCheckboxChange,
+}: TableRowCheckboxProps): React.JSX.Element {
+    const { selectedRowIndexes } = useTableContext();
+
+    return (
+        <TableCellBase isContentCentered>
+            <Checkbox
+                onCheckedChange={(event) => {
+                    onCheckboxChange(event.target.checked);
+                }}
+                isChecked={selectedRowIndexes.has(rowIndex)}
+            />
+        </TableCellBase>
+    );
+}
+
+export interface TableHeaderCheckboxProps {
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export function TableHeaderCheckbox({ onCheckboxChange }: TableHeaderCheckboxProps): JSX.Element {
+    const { isHeaderChecked, isHeaderIndeterminate } = useTableContext();
+
+    return (
+        <TableHeaderCell
+            isContentCentered
+            hasCheckbox
+            onCheckboxChange={(event) => {
+                onCheckboxChange(event.target.checked);
+            }}
+            isChecked={isHeaderChecked}
+            columnKey={1}
+            isIndeterminate={isHeaderIndeterminate}
+        />
+    );
+}

package/src/lib/components/organisms/table/TableContext.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+export interface TableProviderProps {
+    /**
+     * Numeric indexes of the selected rows.
+     */
+    selectedRowIndexes: Set<number>;
+    /**
+     * Numeric indexes of all the rows.
+     */
+    rowIndexes: number[];
+}
+
+type TableContextProps = {
+    isHeaderChecked: boolean;
+    selectedRowIndexes: Set<number>;
+    isHeaderIndeterminate: boolean;
+};
+
+export const TableContext = createContext<TableContextProps>({
+    isHeaderChecked: false,
+    selectedRowIndexes: new Set(),
+    isHeaderIndeterminate: false,
+});
+
+export const useTableContext = () => {
+    const context = useContext(TableContext);
+    return context;
+};
+
+export function TableProvider({
+    children,
+    selectedRowIndexes,
+    rowIndexes,
+    ...props
+}: PropsWithChildren<TableProviderProps>) {
+    const isHeaderChecked = rowIndexes.length === selectedRowIndexes.size;
+    const isHeaderIndeterminate = !isHeaderChecked && selectedRowIndexes.size > 0;
+
+    return (
+        <TableContext.Provider
+            value={{
+                ...props,
+                isHeaderChecked,
+                selectedRowIndexes,
+                isHeaderIndeterminate,
+            }}
+        >
+            {children}
+        </TableContext.Provider>
+    );
+}

package/src/lib/components/organisms/table/index.ts

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

package/src/lib/constants/colors.constants.ts

@@ -0,0 +1,127 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const IOTA_PRIMITIVES_COLOR_PALETTE = {
+    primary: {
+        '0': '#000000',
+        '10': '#061244',
+        '20': '#182b8a',
+        '30': '#3131ff',
+        '40': '#2563f5',
+        '50': '#3f80f0',
+        '60': '#5b9cfe',
+        '70': '#85b5fb',
+        '80': '#adceff',
+        '90': '#d5e8ff',
+        '100': '#ffffff',
+    },
+    secondary: {
+        '0': '#000000',
+        '10': '#051631',
+        '20': '#17345f',
+        '30': '#2d4c7a',
+        '40': '#4b648a',
+        '50': '#637ca2',
+        '60': '#7e97bd',
+        '70': '#96b3d5',
+        '80': '#b6cde8',
+        '90': '#dde9f7',
+        '100': '#ffffff',
+    },
+    tertiary: {
+        '0': '#000000',
+        '10': '#071f22',
+        '20': '#18393b',
+        '30': '#185b60',
+        '40': '#317479',
+        '50': '#498c91',
+        '60': '#64a7ac',
+        '70': '#7fc2c7',
+        '80': '#9adde2',
+        '90': '#c2f1f4',
+        '100': '#ffffff',
+    },
+    error: {
+        '0': '#000000',
+        '10': '#330009',
+        '20': '#610012',
+        '30': '#b51431',
+        '40': '#ce2d4a',
+        '50': '#e64562',
+        '60': '#ff607d',
+        '70': '#ff889e',
+        '80': '#ffb0be',
+        '90': '#ffd9e0',
+        '100': '#ffffff',
+    },
+    neutral: {
+        '0': '#000000',
+        '4': '#0a0f17',
+        '6': '#0f141c',
+        '10': '#171d26',
+        '12': '#1c212b',
+        '20': '#253041',
+        '30': '#3c4656',
+        '40': '#545e6e',
+        '50': '#6e7787',
+        '60': '#8892a1',
+        '70': '#a8b2c0',
+        '80': '#cad4e2',
+        '90': '#dde4f0',
+        '92': '#e3eaf6',
+        '96': '#eff4fa',
+        '98': '#f8fafc',
+        '100': '#ffffff',
+    },
+};
+
+export const SHADER_COLOR_PALETTE = {
+    'shader-primary-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+    },
+    'shader-inverted-dark': {
+        '0': '#002f6d00',
+        '8': '#002f6d14',
+        '12': '#002f6d1e',
+        '16': '#002f6d28',
+        '48': '#002f6d7a',
+        '72': '#002f6db7',
+    },
+    'shader-neutral-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+    },
+    'shader-primary-light': {
+        0: '#0067ee00',
+        8: '#0067ee14',
+        12: '#0067ee1e',
+        16: '#0067ee28',
+        48: '#0067ee7a',
+        72: '#0067eeb7',
+    },
+    'shader-inverted-light': {
+        0: '#bed8ff00',
+        8: '#bed8ff14',
+        12: '#bed8ff1e',
+        16: '#bed8ff28',
+        48: '#bed8ff7a',
+        72: '#bed8ffb7',
+    },
+    'shader-neutral-light': {
+        0: '#002f6d00',
+        8: '#002f6d14',
+        12: '#002f6d1e',
+        16: '#002f6d28',
+        48: '#002f6d7a',
+        72: '#002f6db7',
+    },
+};

package/src/lib/constants/index.ts

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

package/src/lib/enums/index.ts

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

package/src/lib/enums/screenSize.enums.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ScreenSize {
+    Sm = 'sm',
+    Md = 'md',
+    Lg = 'lg',
+    Xl = 'xl',
+}

package/src/lib/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './tailwind';
+export * from './components';
+export * from './constants';
+export * from './enums';
+export * from './utils';

package/src/lib/styles/fonts.css

@@ -0,0 +1,5 @@
+/* Copyright (c) 2024 IOTA Stiftung
+ SPDX-License-Identifier: Apache-2.0 */
+
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';

package/src/lib/styles/index.css

@@ -0,0 +1,136 @@
+/* Copyright (c) 2024 IOTA Stiftung
+ SPDX-License-Identifier: Apache-2.0 */
+
+@import './fonts.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .text-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm {
+        @apply font-alliance-no2;
+    }
+
+    .text-title-lg,
+    .text-title-md,
+    .text-title-sm,
+    .text-body-lg,
+    .text-body-md,
+    .text-body-sm,
+    .text-body-ds-lg,
+    .text-body-ds-md,
+    .text-body-ds-sm,
+    .text-label-lg,
+    .text-label-md,
+    .text-label-sm {
+        @apply font-inter;
+    }
+
+    .text-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm,
+    .text-body-ds-lg {
+        font-variant-alternates: 'ss02';
+    }
+
+    .text-label-md {
+        font-variant-alternates: 'ss01';
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:enabled,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+        @apply appearance-none !bg-transparent !bg-none;
+        @apply !text-neutral-92 dark:!text-neutral-10;
+        transition: background-color 5000s ease-in-out 0s;
+        -webkit-text-fill-color: theme('colors.neutral.92') !important;
+    }
+
+    :root:not(.dark) {
+        input:-webkit-autofill,
+        input:-webkit-autofill:enabled,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus {
+            -webkit-text-fill-color: theme('colors.neutral.10') !important;
+        }
+    }
+}
+
+@layer utilities {
+    .state-layer,
+    .state-layer-inverted,
+    .state-active {
+        &::after {
+            content: '';
+            border-radius: inherit;
+            @apply absolute;
+            @apply h-full w-full;
+            @apply left-0 top-0;
+            @apply transition-opacity duration-75;
+            @apply pointer-events-none;
+        }
+    }
+
+    .state-layer,
+    .state-layer-inverted {
+        &::after {
+            @apply opacity-0;
+        }
+
+        &:hover::after {
+            @apply opacity-8;
+        }
+
+        &:active::after {
+            @apply opacity-12;
+        }
+
+        &:disabled::after {
+            @apply opacity-0;
+        }
+    }
+
+    .state-active,
+    .state-layer {
+        &::after {
+            @apply bg-primary-60;
+        }
+    }
+
+    .state-layer-inverted {
+        &::after {
+            @apply bg-primary-80;
+        }
+    }
+
+    .state-active {
+        &::after {
+            @apply opacity-12;
+        }
+    }
+}
+
+@supports selector(::-webkit-scrollbar) {
+    *::-webkit-scrollbar {
+        @apply w-3.5;
+    }
+
+    *::-webkit-scrollbar-track {
+        @apply rounded-xl bg-transparent;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply shadow-[inset_0_0_10px_10px] shadow-neutral-80 dark:shadow-neutral-30;
+        @apply rounded-xl border-4 border-solid border-transparent;
+    }
+}

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

@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Config } from 'tailwindcss';
+import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
+import {
+    CUSTOM_FONT_SIZES,
+    BORDER_RADIUS,
+    CUSTOM_SPACING,
+    OPACITY,
+    generateVariableSpacing,
+} from './constants';
+
+export const BASE_CONFIG: Config = {
+    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontSize: {
+                ...CUSTOM_FONT_SIZES,
+            },
+            borderRadius: {
+                ...BORDER_RADIUS,
+            },
+            spacing: (utils) => {
+                const screens = utils.theme('screens');
+                const variableSpacing = generateVariableSpacing(screens);
+                return {
+                    ...CUSTOM_SPACING,
+                    ...variableSpacing,
+                };
+            },
+            opacity: {
+                ...OPACITY,
+                30: '0.3',
+            },
+            colors: {
+                ...IOTA_PRIMITIVES_COLOR_PALETTE,
+                ...SHADER_COLOR_PALETTE,
+            },
+            fontFamily: {
+                'alliance-no2': ['AllianceNo2', 'sans-serif'],
+                inter: ['Inter', 'sans-serif'],
+            },
+        },
+    },
+};