@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/Table/components/TablePagination/components/ItemCountSelect/ItemCountSelect.tsx

@@ -0,0 +1,31 @@
+import { useContext, useMemo } from 'react';
+
+import { usePagination } from '../../../../../Pagination';
+import { OptionType, Select } from '../../../../../Select/Select';
+import { tableStaticsContext } from '../../../../sharedState';
+
+export const ItemCountSelect = () => {
+    const { pageSize, setPageSize } = usePagination();
+    const { pageSizeOptions } = useContext(tableStaticsContext);
+
+    const generatedOptions: OptionType[] = useMemo(() => {
+        return pageSizeOptions.map((option) => {
+            return { label: option.toString(), value: option };
+        });
+    }, [pageSizeOptions]);
+
+    return (
+        <Select
+            autoComplete="off"
+            className="w-[232px]"
+            defaultValue={pageSize}
+            isInsideLabel
+            labelText="Items per page:"
+            onChange={(event?: OptionType) => setPageSize(event?.value)}
+            options={generatedOptions}
+            small
+            usePortalMenu
+            value={{ label: pageSize, value: pageSize.toString() }}
+        />
+    );
+};

package/src/Table/components/TablePagination/components/TablePaginator/TablePaginator.tsx

@@ -0,0 +1,37 @@
+import { IconButton } from '../../../../../IconButton/IconButton';
+import { CaretLeft, CaretRight } from '../../../../../Icons';
+import { usePagination } from '../../../../../Pagination';
+import { BodyPrimary } from '../../../../../Typography/Text/Text';
+import { PageSelect } from './components/PageSelect/PageSelect';
+
+export const Pagination = () => {
+    const { goToPage, page, pageCount } = usePagination();
+
+    return (
+        <div className="flex items-center">
+            <IconButton
+                aria-label="Previous Page"
+                disabled={page === 1}
+                icon={CaretLeft}
+                onClick={() => {
+                    if (page !== 1) {
+                        goToPage(page - 1);
+                    }
+                }}
+                size="sm"
+            />
+            <PageSelect /> <BodyPrimary className="whitespace-nowrap pl-xs pr-sm">of {pageCount} pages</BodyPrimary>
+            <IconButton
+                aria-label="Next Page"
+                disabled={page === pageCount}
+                icon={CaretRight}
+                onClick={() => {
+                    if (page !== pageCount) {
+                        goToPage(page + 1);
+                    }
+                }}
+                size="sm"
+            />
+        </div>
+    );
+};

package/src/Table/components/TablePagination/components/TablePaginator/components/PageSelect/PageSelect.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+import { usePagination } from '../../../../../../../Pagination';
+import { OptionType, Select } from '../../../../../../../Select/Select';
+
+export const PageSelect = () => {
+    const { goToPage, page, pageCount } = usePagination();
+
+    const options = useMemo(
+        () =>
+            new Array(pageCount).fill(0).map((_, i) => ({
+                label: `${i + 1}`,
+                value: i + 1,
+            })),
+        [pageCount]
+    );
+
+    return (
+        <Select
+            autoComplete="off"
+            className="pl-sm"
+            defaultValue={pageCount}
+            isInsideLabel
+            labelText="Page"
+            onChange={(event?: OptionType) => goToPage(event?.value)}
+            options={options}
+            small
+            usePortalMenu
+            value={options[page - 1]}
+        />
+    );
+};

package/src/Table/components/TableRow/TableRows.tsx

@@ -0,0 +1,147 @@
+import { cn } from '@evolve.ui/theme-system';
+import { MouseEvent, useCallback, useContext, useMemo } from 'react';
+
+import { Checkbox } from '../../../ChoiceListItem';
+import { tableStaticsContext } from '../../sharedState';
+import { ColumnType, StaticData, TableBackgroundStyle } from '../../types';
+import { TableRowCell } from './components/TableRowCell/TableRowCell';
+
+interface Props<T extends StaticData> {
+    backgroundColor?: TableBackgroundStyle;
+    columns: ColumnType<T>[];
+    data: T[];
+    selectedRows?: Set<T['key']>;
+    zebraStripes: boolean;
+}
+
+export const TableRows = <T extends StaticData>({
+    backgroundColor = 'primary',
+    columns,
+    data,
+    selectedRows,
+    zebraStripes,
+}: Props<T>) => {
+    const { actionable, hideDividers, onSelectedRowsChange, showColumnDividers, stickyFirstColumn } =
+        useContext(tableStaticsContext);
+
+    const onRowClick = useCallback(
+        (event: MouseEvent<HTMLTableRowElement>) => {
+            if (actionable) {
+                const checkbox = event.currentTarget.querySelector('input[type="checkbox"]') as HTMLElement | undefined;
+
+                checkbox?.click();
+            }
+        },
+        [actionable]
+    );
+
+    const formattedData = useMemo(() => {
+        return data.map((item) => {
+            const renderedColumns = columns.map((column, columnIndex) => (
+                <TableRowCell
+                    backgroundColor={backgroundColor}
+                    column={column}
+                    columnIndex={columnIndex}
+                    item={item}
+                    key={`table-row-cell-${columnIndex}`}
+                />
+            ));
+
+            const isOdd = data.indexOf(item) % 2 !== 0;
+            const shouldShowZebraStripe = zebraStripes && isOdd;
+            const isSelectedNotDisabled = selectedRows && selectedRows.has(item.key) && !item.disabled;
+
+            return (
+                <tr
+                    // BASE
+                    className={cn(
+                        'group relative cursor-default bg-background-primary',
+
+                        //  BACKGROUND COLORS
+                        {
+                            'bg-background-disabled': backgroundColor === 'disabled',
+                            'bg-background-primary': backgroundColor === 'primary' && !zebraStripes,
+                            'bg-background-secondary': backgroundColor === 'secondary',
+                            'bg-background-subdued': backgroundColor === 'subdued',
+                            'bg-transparent': backgroundColor === 'transparent',
+                        },
+                        {
+                            '[&>td]:bg-background-disabled': backgroundColor === 'disabled' && shouldShowZebraStripe,
+                            '[&>td]:bg-background-inverse/[0.03]':
+                                backgroundColor === 'transparent' && shouldShowZebraStripe,
+                            '[&>td]:bg-background-secondary': backgroundColor === 'secondary' && shouldShowZebraStripe,
+                            '[&>td]:bg-background-subdued':
+                                (backgroundColor === 'primary' || backgroundColor === 'subdued') &&
+                                shouldShowZebraStripe,
+                        },
+                        {
+                            // HIGHLIGHTED - exclude sticky columns since they handle their own states
+                            '!bg-background-secondary [&>td]:bg-background-secondary': isSelectedNotDisabled,
+
+                            // DIVIDERS
+                            'border-b border-border-secondary': !hideDividers,
+                            // ACTIONABLE
+                            'cursor-pointer': actionable && !item.disabled,
+                        }
+                    )}
+                    data-disabled={item.disabled ? 'true' : undefined}
+                    key={item.key}
+                    onClick={onRowClick}
+                >
+                    {actionable && (
+                        <td
+                            className={cn(
+                                'bg-background-primary p-0',
+                                {
+                                    // COLUMN DIVIDER
+                                    'border-r border-border-secondary last:border-r-0': showColumnDividers,
+                                    // Direct hover/active states for sticky column
+                                    'group-hover:!bg-surface-200 group-active:!bg-surface-300': !item.disabled,
+                                    'sticky left-0 z-[3]': stickyFirstColumn,
+                                    'sticky-column': stickyFirstColumn,
+                                },
+                                {
+                                    // Selected state for sticky column
+                                    'bg-background-secondary':
+                                        stickyFirstColumn &&
+                                        selectedRows &&
+                                        selectedRows.has(item.key) &&
+                                        !item.disabled,
+                                }
+                            )}
+                            key="actionable"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <Checkbox.Option
+                                checked={selectedRows ? selectedRows.has(item.key) : false}
+                                className={cn('flex h-full w-xl items-center justify-center', {
+                                    'group-hover:[&>svg]:!bg-surface-200 group-active:[&>svg]:!border-border-hover':
+                                        !item.disabled,
+                                })}
+                                disabled={Boolean(item.disabled)}
+                                onChange={() => {
+                                    onSelectedRowsChange?.(item.key);
+                                }}
+                            />
+                        </td>
+                    )}
+                    {renderedColumns}
+                </tr>
+            );
+        });
+    }, [
+        actionable,
+        backgroundColor,
+        columns,
+        data,
+        hideDividers,
+        onRowClick,
+        onSelectedRowsChange,
+        selectedRows,
+        showColumnDividers,
+        stickyFirstColumn,
+        zebraStripes,
+    ]);
+
+    return <tbody>{formattedData}</tbody>;
+};

package/src/Table/components/TableRow/components/TableRowCell/TableRowCell.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useContext } from 'react';
+
+import { BodySecondary } from '../../../../../Typography/Text/Text';
+import { tableStaticsContext } from '../../../../sharedState';
+import { ColumnType, StaticData } from '../../../../types';
+
+interface Props<T extends StaticData> {
+    backgroundColor: 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';
+    column: ColumnType<T>;
+    columnIndex: number;
+    item: T;
+}
+
+export const TableRowCell = <T extends StaticData>({ backgroundColor, column, columnIndex, item }: Props<T>) => {
+    const { actionable, showColumnDividers, stickyFirstColumn } = useContext(tableStaticsContext);
+    const value = item[column.key];
+
+    return (
+        <td
+            className={cn('whitespace-nowrap px-sm py-0', {
+                'bg-background-disabled': backgroundColor === 'disabled',
+                'bg-background-primary': backgroundColor === 'primary',
+                'bg-background-secondary': backgroundColor === 'secondary',
+                'bg-background-subdued': backgroundColor === 'subdued',
+                'bg-transparent': backgroundColor === 'transparent',
+                // COLUMN DIVIDER
+                'border-r border-border-secondary last:border-r-0': showColumnDividers,
+                //   HOVER
+                'group-hover:bg-surface-200 group-active:bg-surface-300': !item.disabled,
+                // Add relative positioning for sticky columns to support the background fix
+                relative: stickyFirstColumn && columnIndex === 0,
+                // For non-actionable tables, first column can be at left-0
+                'sticky left-0 z-[2]': stickyFirstColumn && columnIndex === 0 && !actionable,
+                // For actionable tables, first column should be positioned after the checkbox (48px width)
+                'sticky left-xl z-[2]': stickyFirstColumn && columnIndex === 0 && actionable,
+                'sticky-column': stickyFirstColumn && columnIndex === 0,
+                'text-left': !column.align || column.align === 'left',
+                'text-right': column.align === 'right',
+            })}
+        >
+            {Boolean(column.renderItem) ? (
+                column.renderItem?.(item, column)
+            ) : (
+                <BodySecondary color={Boolean(item.disabled) ? 'disabled' : 'primary'}>{value as string}</BodySecondary>
+            )}
+        </td>
+    );
+};

package/src/Table/components/TableShadow/TableShadow.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@evolve.ui/theme-system';
+import { atom, useAtomValue } from 'jotai';
+import { useContext } from 'react';
+
+import { tableStaticsContext } from '../../sharedState';
+import { actionableWidth } from '../../sharedStyles';
+
+export const showLeftStickyShadowAtom = atom<boolean>(false);
+export const leftStickyShadowWidthAtom = atom<number>(0);
+
+/**
+ * This component adds the left hand shadow to the table element for the sticky first column.
+ */
+export const TableShadow = () => {
+    const { actionable, stickyFirstColumn } = useContext(tableStaticsContext);
+    const width = useAtomValue(leftStickyShadowWidthAtom);
+    const showLeftStickyShadow = useAtomValue(showLeftStickyShadowAtom);
+
+    return (
+        <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            <div
+                className={cn(
+                    'pointer-events-none absolute bottom-0 left-0 top-0 opacity-100 shadow-04 transition-opacity duration-300',
+                    {
+                        'opacity-0': !stickyFirstColumn || !showLeftStickyShadow,
+                    }
+                )}
+                style={{ width: `${actionable ? width + actionableWidth : width}px` }}
+            />
+        </div>
+    );
+};
+
+export const observeFirstColumnWidth = (setLeftShadowWidth: (width: number) => void) => (ref: HTMLElement | null) => {
+    if (ref) {
+        // Add a resize observer to the first column to determine the width of the left shadow.
+        const resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0].contentRect.width;
+            setLeftShadowWidth(width);
+        });
+
+        resizeObserver.observe(ref);
+
+        setLeftShadowWidth(ref.getBoundingClientRect().width);
+    }
+};

package/src/Table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export * from './types';

package/src/Table/sharedState.ts

@@ -0,0 +1,30 @@
+import { atom } from 'jotai';
+import { createContext } from 'react';
+
+type TableStatics = {
+    actionable: boolean;
+    backgroundColor: string | undefined;
+    hideDividers: boolean;
+    onSelectedRowsChange?: (selectedRows: string) => void;
+    pageSizeOptions: number[];
+    showColumnDividers: boolean;
+    stickyFirstColumn: boolean;
+};
+
+export const emptyTableStatics: TableStatics = {
+    actionable: false,
+    backgroundColor: undefined,
+    hideDividers: false,
+    pageSizeOptions: [],
+    showColumnDividers: false,
+    stickyFirstColumn: false,
+};
+
+export const tableStaticsContext = createContext<TableStatics>(emptyTableStatics);
+
+/**
+ * This should be the manually sorted column key.
+ *
+ * It is not guaranteed to match the true sorting of the table.
+ */
+export const sortedColumnKey = atom<string | undefined>(undefined);

package/src/Table/sharedStyles.ts

@@ -0,0 +1 @@
+export const actionableWidth = 48;

package/src/Table/types.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+
+/**
+ * Background color style for a Table.
+ *
+ * Localized into Table (was `src/types` in hammer) — this repo keeps types
+ * per-component rather than in a central types module.
+ */
+export type TableBackgroundStyle = 'primary' | 'secondary' | 'subdued' | 'disabled' | 'transparent';
+
+export type SortType = 'ascending' | 'descending';
+
+export type StaticData = {
+    disabled?: boolean;
+    key: string;
+};
+
+export type ColumnType<T> = {
+    /**
+     * How to align the text in this column.
+     *
+     * Generally:
+     * - right for numeric data
+     * - left for textual data
+     *
+     * @default 'left'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Header text for this column.
+     */
+    header?: string;
+    /**
+     * The key of the data item that this column is responsible for.
+     *
+     * Corresponds to the key in the array of data objects.
+     */
+    key: keyof T;
+    /**
+     * The render function for customizing the cell.
+     *
+     * If ommitted, standard table text will be rendered based on the key's corresponding value.
+     *
+     * @param cellData The data item for the column in this particular row.
+     * @param columnConfig The column's configuration
+     * @returns The ReactNode to render in the cell.
+     */
+    renderItem?: (cellData: T, columnConfig: ColumnType<T>) => ReactNode;
+    /**
+     * Whether or not this column is sortable.
+     */
+    sortable?: boolean;
+};
+
+export type TableRowDensity = 'sm' | 'md' | 'lg';