@jakubmazanec/ui 0.1.0-next.070f0f6

package/source/components/data-table/internals/DataTablePagination.tsx

@@ -0,0 +1,220 @@
+import {type Table} from '@tanstack/react-table';
+import {type ChangeEvent, memo, useCallback} from 'react';
+
+import {Button} from '../../Button.js';
+import {Container} from '../../Container.js';
+import {Icon} from '../../Icon.js';
+import {Input} from '../../Input.js';
+import {Listbox} from '../../Listbox.js';
+import {ListboxOption} from '../../ListboxOption.js';
+import {Text} from '../../Text.js';
+import {type DataTableProps} from '../DataTable.js';
+import {MAX_PAGE_BUTTONS_COUNT, PAGE_SIZES} from './constants.js';
+import {DataTablePageButton} from './DataTablePageButton.js';
+
+type PageSize = (typeof PAGE_SIZES)[number];
+
+export type DataTablePaginationProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  page: number;
+  pageSize: number;
+  pageCount: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientPagination: DataTableProps<any, any>['clientPagination'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onPagination: DataTableProps<any, any>['onPaginationChange'];
+};
+
+export const DataTablePagination = memo(
+  ({
+    table,
+    page,
+    pageSize,
+    pageCount,
+    clientPagination,
+    onPagination,
+  }: DataTablePaginationProps) => {
+    let isFirstPage = page === 1;
+    let isLastPage = page >= pageCount;
+
+    let handlePageClick = useCallback(
+      (newPage: number) => {
+        if (clientPagination) {
+          table.setPageIndex(Math.max(0, Math.min(newPage - 1, pageCount)));
+        }
+
+        if (onPagination) {
+          onPagination({
+            page: Math.max(1, Math.min(newPage, pageCount)),
+          });
+        }
+      },
+      [clientPagination, onPagination, pageCount, table],
+    );
+
+    let handleFirstPageClick = useCallback(() => {
+      if (clientPagination) {
+        table.firstPage();
+      }
+
+      if (onPagination) {
+        onPagination({
+          page: 1,
+        });
+      }
+    }, [clientPagination, onPagination, table]);
+
+    let handleLastPageClick = useCallback(() => {
+      if (clientPagination) {
+        table.lastPage();
+      }
+
+      if (onPagination) {
+        onPagination({
+          page: pageCount,
+        });
+      }
+    }, [clientPagination, onPagination, pageCount, table]);
+
+    let handlePreviousPageClick = useCallback(() => {
+      if (clientPagination) {
+        table.previousPage();
+      }
+
+      if (onPagination) {
+        onPagination({
+          page: Math.max(1, Math.min(page - 1, pageCount)),
+        });
+      }
+    }, [clientPagination, onPagination, page, pageCount, table]);
+
+    let handleNextPageClick = useCallback(() => {
+      if (clientPagination) {
+        table.nextPage();
+      }
+
+      if (onPagination) {
+        onPagination({
+          page: Math.max(1, Math.min(page + 1, pageCount)),
+        });
+      }
+    }, [clientPagination, onPagination, page, pageCount, table]);
+
+    let handlePageChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        let pageIndex = event.target.value ? Number(event.target.value) - 1 : 0;
+
+        if (clientPagination) {
+          table.setPageIndex(pageIndex);
+        }
+
+        if (onPagination) {
+          onPagination({
+            page: Math.max(1, Math.min(pageIndex + 1, pageCount)),
+          });
+        }
+      },
+      [clientPagination, onPagination, pageCount, table],
+    );
+
+    let handlePageSizeChange = useCallback(
+      (pageSize: string) => {
+        if (clientPagination) {
+          table.setPageSize(Number(pageSize));
+        }
+
+        if (onPagination) {
+          onPagination({
+            pageSize: Number(pageSize) as PageSize,
+          });
+        }
+      },
+      [clientPagination, onPagination, table],
+    );
+
+    return (
+      <Container justify="center" align="center">
+        <Container spacing="small">
+          <Button
+            variant="outline"
+            aria-label="First page"
+            disabled={isFirstPage}
+            onClick={handleFirstPageClick}
+          >
+            <Icon name="ChevronDoubleLeft" />
+          </Button>
+          <Button
+            variant="outline"
+            aria-label="Previous page"
+            disabled={isFirstPage}
+            onClick={handlePreviousPageClick}
+          >
+            <Icon name="ChevronLeft" />
+          </Button>
+
+          {pageCount <= MAX_PAGE_BUTTONS_COUNT ?
+            Array.from({length: pageCount}).map((_, index) => (
+              <DataTablePageButton
+                // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value
+                key={index}
+                page={index + 1}
+                isSelected={page === index + 1}
+                onClick={handlePageClick}
+              />
+            ))
+          : null}
+
+          <Button
+            variant="outline"
+            aria-label="Next page"
+            disabled={isLastPage}
+            onClick={handleNextPageClick}
+          >
+            <Icon name="ChevronRight" />
+          </Button>
+          <Button
+            variant="outline"
+            aria-label="Last page"
+            disabled={isLastPage}
+            onClick={handleLastPageClick}
+          >
+            <Icon name="ChevronDoubleRight" />
+          </Button>
+        </Container>
+        {pageCount > MAX_PAGE_BUTTONS_COUNT ?
+          <Container spacing="extra-small">
+            <Text>
+              Page {page} of {pageCount}
+            </Text>
+          </Container>
+        : null}
+        {pageCount > MAX_PAGE_BUTTONS_COUNT ?
+          <Container spacing="extra-small" align="center">
+            <Text>Go to page:</Text>
+            <Input
+              type="text"
+              pattern="[0-9]*"
+              className="w-12"
+              defaultValue={page}
+              onChange={handlePageChange}
+            />
+          </Container>
+        : null}
+        <Container>
+          <Listbox
+            value={String(pageSize)}
+            className="w-auto min-w-min"
+            onChange={handlePageSizeChange}
+          >
+            {PAGE_SIZES.map((pageSize) => (
+              <ListboxOption key={pageSize} value={String(pageSize)}>
+                Show {pageSize}
+              </ListboxOption>
+            ))}
+          </Listbox>
+        </Container>
+      </Container>
+    );
+  },
+);

package/source/components/data-table/internals/DataTableSearch.tsx

@@ -0,0 +1,109 @@
+import {type Table} from '@tanstack/react-table';
+import {type ChangeEvent, type FormEvent, useCallback, useState} from 'react';
+
+import {Button} from '../../Button.js';
+import {Container} from '../../Container.js';
+import {Form} from '../../Form.js';
+import {Icon} from '../../Icon.js';
+import {Input} from '../../Input.js';
+import {type DataTableProps} from '../DataTable.js';
+
+export type DataTableSearchProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientSearch: DataTableProps<any, any>['clientSearch'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  search: DataTableProps<any, any>['search'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onSearch: DataTableProps<any, any>['onSearchChange'];
+};
+
+export function DataTableSearch({
+  table,
+  clientSearch,
+  search: controlledSearch,
+  onSearch,
+}: DataTableSearchProps) {
+  let currentSearch =
+    clientSearch ?
+      (table.getState().globalFilter as string | undefined) ?? null
+    : controlledSearch ?? null;
+
+  let [search, setSearch] = useState(currentSearch ?? '');
+
+  let handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  }, []);
+
+  let handleSearchClick = useCallback(() => {
+    if (search) {
+      if (clientSearch) {
+        table.setGlobalFilter(search);
+      }
+
+      if (onSearch) {
+        onSearch(search);
+      }
+    } else {
+      if (clientSearch) {
+        table.setGlobalFilter(undefined);
+      }
+
+      if (onSearch) {
+        onSearch(null);
+      }
+    }
+  }, [clientSearch, onSearch, search, table]);
+
+  let handleSearchSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      if (search) {
+        if (clientSearch) {
+          table.setGlobalFilter(search);
+        }
+
+        if (onSearch) {
+          onSearch(search);
+        }
+      } else {
+        if (clientSearch) {
+          table.setGlobalFilter(undefined);
+        }
+
+        if (onSearch) {
+          onSearch(null);
+        }
+      }
+    },
+    [clientSearch, onSearch, search, table],
+  );
+
+  let handleResetClick = useCallback(() => {
+    setSearch('');
+
+    if (clientSearch) {
+      table.setGlobalFilter(undefined);
+    }
+
+    if (onSearch) {
+      onSearch(null);
+    }
+  }, [clientSearch, onSearch, table]);
+
+  return (
+    <Form onSubmit={handleSearchSubmit}>
+      <Container spacing="small">
+        <Input value={search} onChange={handleSearchChange} />
+        <Button variant="outline" aria-label="Filter" onClick={handleSearchClick}>
+          <Icon size="large" name="MagnifyingGlass" />
+        </Button>
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </Container>
+    </Form>
+  );
+}

package/source/components/data-table/internals/addFilter.ts

@@ -0,0 +1,42 @@
+import {type DataTableProps} from '../DataTable.js';
+
+export function addFilter(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'],
+  column: string,
+  newFilter: unknown,
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  let newFilters: DataTableProps<any, any>['filters'] = [];
+
+  if (filters) {
+    let wasUpdated = false;
+
+    for (let filter of filters) {
+      if (filter.column === column) {
+        newFilters.push({
+          column,
+          filter: newFilter as string | [number, number],
+        });
+
+        wasUpdated = true;
+      } else {
+        newFilters.push(filter);
+      }
+    }
+
+    if (!wasUpdated) {
+      newFilters.push({
+        column,
+        filter: newFilter as string | [number, number],
+      });
+    }
+  } else {
+    newFilters.push({
+      column,
+      filter: newFilter as string | [number, number],
+    });
+  }
+
+  return newFilters;
+}

package/source/components/data-table/internals/constants.ts

@@ -0,0 +1,3 @@
+export const MAX_PAGE_BUTTONS_COUNT = 10;
+export const PAGE_SIZES = [10, 25, 50, 75, 100] as const;
+export const DEFAULT_PAGE_SIZE = 50;

package/source/components/data-table/internals/fromPinningState.ts

@@ -0,0 +1,17 @@
+import {type ColumnPinningState} from '@tanstack/react-table';
+
+import {type DataTableColumnPinning} from '../DataTableColumnPinning.js';
+
+export function fromPinningState(pinning: ColumnPinningState) {
+  let result: DataTableColumnPinning = {};
+
+  for (let left of pinning.left ?? []) {
+    result[left] = 'left';
+  }
+
+  for (let right of pinning.right ?? []) {
+    result[right] = 'right';
+  }
+
+  return result;
+}

package/source/components/data-table/internals/fuzzyFilter.ts

@@ -0,0 +1,15 @@
+import {rankItem} from '@tanstack/match-sorter-utils';
+import {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';
+
+export function fuzzyFilter<TData extends RowData>(
+  row: Row<TData>,
+  columnId: string,
+  value: unknown,
+  addMeta: (meta: FilterMeta) => void,
+) {
+  let itemRank = rankItem(row.getValue(columnId), value as string, {});
+
+  addMeta({itemRank});
+
+  return itemRank.passed;
+}

package/source/components/data-table/internals/getCommonPinningClasses.ts

@@ -0,0 +1,19 @@
+import {type Column} from '@tanstack/react-table';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export function getCommonPinningClasses(column: Column<any>): string {
+  let isPinned = column.getIsPinned();
+  let isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  let isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+
+  let borderClassName =
+    isLastLeftPinnedColumn ? 'border-r-2 border-neutral-100'
+    : isFirstRightPinnedColumn ? 'border-l-2 border-neutral-100'
+    : undefined;
+  let opacityClassName = isPinned ? 'opacity-90' : 'opacity-100';
+  let positionClassName = isPinned ? 'sticky' : 'relative';
+  let zIndexClassName = isPinned ? 'z-10' : 'z-0';
+  let bgClassName = isPinned ? 'bg-white' : 'bg-transparent';
+
+  return `${bgClassName} ${borderClassName} ${opacityClassName} ${positionClassName} ${zIndexClassName} min-w-16`;
+}

package/source/components/data-table/internals/getCommonPinningStyles.ts

@@ -0,0 +1,13 @@
+import {type Column} from '@tanstack/react-table';
+import {type CSSProperties} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export function getCommonPinningStyles(column: Column<any>): CSSProperties {
+  let isPinned = column.getIsPinned();
+
+  return {
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    width: column.getSize(),
+  };
+}

package/source/components/data-table/internals/normalizeFilter.ts

@@ -0,0 +1,33 @@
+import {type Column} from '@tanstack/react-table';
+
+import {type DataTableProps} from '../DataTable.js';
+
+export function normalizeFilter(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  column: Column<any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  controlledFilters?: DataTableProps<any, any>['filters'],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+): NonNullable<DataTableProps<any, any>['filters']>[number]['filter'] | null {
+  if (controlledFilters === undefined) {
+    let filter = column.getFilterValue();
+
+    if (!filter) {
+      return null;
+    }
+
+    return filter as string;
+  }
+
+  if (!controlledFilters) {
+    return null;
+  }
+
+  let filter = controlledFilters.find((filter) => filter.column === column.id);
+
+  if (!filter) {
+    return null;
+  }
+
+  return filter.filter;
+}

package/source/components/data-table/internals/normalizeFilters.ts

@@ -0,0 +1,31 @@
+import {type Table} from '@tanstack/react-table';
+
+import {type DataTableProps} from '../DataTable.js';
+
+export function normalizeFilters(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  controlledFilters?: DataTableProps<any, any>['filters'],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+): DataTableProps<any, any>['filters'] {
+  if (controlledFilters === undefined) {
+    let filters = table.getState().columnFilters;
+
+    if (!filters.length) {
+      return null;
+    }
+
+    return filters.map((filter) => ({column: filter.id, filter: filter.value as string}));
+  }
+
+  if (!controlledFilters) {
+    return null;
+  }
+
+  if (!controlledFilters.length) {
+    return null;
+  }
+
+  return controlledFilters;
+}

package/source/components/data-table/internals/normalizeSorting.ts

@@ -0,0 +1,40 @@
+import {type Header} from '@tanstack/react-table';
+
+import {type DataTableProps} from '../DataTable.js';
+import {type DataTableSorting} from '../DataTableSorting.js';
+
+export function normalizeSorting(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  header: Header<any, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  controlledSorting?: DataTableProps<any, any>['sorting'],
+): DataTableSorting {
+  if (controlledSorting === undefined) {
+    let column = header.column.id;
+    let isSorted = header.column.getIsSorted();
+
+    if (!isSorted) {
+      return null;
+    }
+
+    return {
+      column,
+      direction: isSorted === 'asc' ? 'ascending' : 'descending',
+    };
+  }
+
+  let column = header.column.id;
+
+  if (!controlledSorting) {
+    return null;
+  }
+
+  if (controlledSorting.column !== column) {
+    return null;
+  }
+
+  return {
+    column,
+    direction: controlledSorting.direction,
+  };
+}

package/source/components/data-table/internals/removeFilter.ts

@@ -0,0 +1,26 @@
+import {type DataTableProps} from '../DataTable.js';
+
+export function removeFilter(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'],
+  column: string,
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  let newFilters: DataTableProps<any, any>['filters'] = [];
+
+  if (filters) {
+    for (let filter of filters) {
+      if (filter.column !== column) {
+        newFilters.push(filter);
+      }
+    }
+  } else {
+    return null;
+  }
+
+  if (!newFilters.length) {
+    return null;
+  }
+
+  return newFilters;
+}

package/source/components/data-table/internals.ts

@@ -0,0 +1,16 @@
+export * from './internals/addFilter.js';
+export * from './internals/constants.js';
+export * from './internals/DataTableHeader.js';
+export * from './internals/DataTableHeaderColumnCheckbox.js';
+export * from './internals/DataTableHeaderFilter.js';
+export * from './internals/DataTablePageButton.js';
+export * from './internals/DataTablePagination.js';
+export * from './internals/DataTableSearch.js';
+export * from './internals/fromPinningState.js';
+export * from './internals/fuzzyFilter.js';
+export * from './internals/getCommonPinningClasses.js';
+export * from './internals/getCommonPinningStyles.js';
+export * from './internals/normalizeFilter.js';
+export * from './internals/normalizeFilters.js';
+export * from './internals/normalizeSorting.js';
+export * from './internals/removeFilter.js';

package/source/components/data-table.ts

@@ -0,0 +1,9 @@
+export * from './data-table/DataTable.js';
+export * from './data-table/DataTableColumnOrder.js';
+export * from './data-table/DataTableColumnPinning.js';
+export * from './data-table/DataTableColumnVisibility.js';
+export * from './data-table/DataTableFaceting.js';
+export * from './data-table/DataTableFilters.js';
+export * from './data-table/DataTablePagination.js';
+export * from './data-table/DataTableSearch.js';
+export * from './data-table/DataTableSorting.js';

package/source/components/internals/fieldContext.ts

@@ -0,0 +1,4 @@
+import {type FieldMetadata} from '@conform-to/react';
+import {createContext} from 'react';
+
+export const fieldContext = createContext<FieldMetadata | undefined>(undefined);

package/source/components/internals/fieldNameContext.ts

@@ -0,0 +1,5 @@
+import {type FieldName} from '@conform-to/react';
+import {createContext} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+export const fieldNameContext = createContext<FieldName<any> | undefined>(undefined);

package/source/components/internals/filterProps.ts

@@ -0,0 +1,12 @@
+import {type ElementType, Fragment} from 'react';
+
+export function filterProps<
+  const T extends Record<string, unknown> & {as?: ElementType | undefined},
+>(props: T): T {
+  if (props.as === Fragment) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive
+    return {} as T;
+  }
+
+  return props;
+}

package/source/components/internals/formIdContext.ts

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const formIdContext = createContext<string | undefined>(undefined);

package/source/components/internals/forwardRef.ts

@@ -0,0 +1,7 @@
+import {forwardRef as baseForwardRef, type ForwardRefRenderFunction, type Ref} from 'react';
+
+export function forwardRef<T, P>(
+  component: (props: P, ref: Ref<T>) => React.ReactNode,
+): (props: P & {ref?: Ref<T>}) => React.ReactNode {
+  return baseForwardRef(component as unknown as ForwardRefRenderFunction<unknown, unknown>);
+}

package/source/components/internals/useFormId.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {formIdContext} from './formIdContext.js';
+
+export function useFormId() {
+  return useContext(formIdContext);
+}

package/source/components/internals.ts

@@ -0,0 +1,6 @@
+export * from './internals/fieldContext.js';
+export * from './internals/fieldNameContext.js';
+export * from './internals/filterProps.js';
+export * from './internals/formIdContext.js';
+export * from './internals/forwardRef.js';
+export * from './internals/useFormId.js';

package/source/components/useField.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {fieldContext} from './internals.js';
+
+export function useField() {
+  return useContext(fieldContext);
+}

package/source/components/useFieldName.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {fieldNameContext} from './internals.js';
+
+export function useFieldName() {
+  return useContext(fieldNameContext);
+}