@jakubmazanec/ui 0.1.0-next.86bf251

package/source/components/Textarea.tsx

@@ -0,0 +1,104 @@
+import {getTextareaProps} from '@conform-to/react';
+import {Textarea as HeadlessTextarea} from '@headlessui/react';
+import {type ComponentPropsWithoutRef, type ComponentType, type ElementType, type Ref} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {forwardRef} from './internals.js';
+import {useField} from './useField.js';
+import {useFieldName} from './useFieldName.js';
+
+export const useTextareaTheme = createComponentTheme('Textarea', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'textarea', 'icon'],
+});
+
+const TEXTAREA_ELEMENT = 'textarea';
+
+export type TextareaProps<T extends ElementType> = ComponentProps<typeof useTextareaTheme> &
+  ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    icon?: ComponentType<object> | undefined;
+  };
+
+export const Textarea = forwardRef(
+  <T extends ElementType = typeof TEXTAREA_ELEMENT>(
+    {
+      disabled = false,
+      as = TEXTAREA_ELEMENT as T,
+      name,
+      className,
+      icon: Icon,
+      ...rest
+    }: TextareaProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTextareaTheme({disabled});
+    let fieldName = useFieldName();
+    let field = useField();
+
+    let rootProps: Record<string, unknown> = {
+      className: theme.root('relative', className),
+      'data-component': 'textarea',
+    };
+    let textareaProps: Record<string, unknown> = {
+      ref,
+      disabled,
+      name: field?.name ?? fieldName ?? name,
+      className: theme.textarea(null, className),
+      ...rest,
+    };
+    let iconProps: Record<string, unknown> = {
+      className: theme.icon('absolute'),
+    };
+
+    if (Icon) {
+      rootProps['data-icon'] = '';
+    }
+
+    if (field) {
+      let {key, ...restProps} = getTextareaProps(field);
+
+      textareaProps = {...restProps, ...textareaProps};
+    }
+
+    return (
+      <span {...rootProps}>
+        <HeadlessTextarea {...textareaProps} />
+        {Icon ?
+          <Icon {...iconProps} />
+        : null}
+      </span>
+    );
+  },
+);
+
+export const textareaTheme: ComponentTheme<typeof useTextareaTheme> = {
+  classNames: {
+    root: 'group flex w-full items-center rounded border-2 border-neutral-100 hover:border-neutral-200 py-2 px-2.5 min-h-19 bg-white shadow-inner transition-colors',
+    textarea:
+      'min-h-15 p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 bg-transparent font-sans text-sm',
+    icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',
+        textarea: '',
+        icon: '',
+      },
+      false: {
+        root: '',
+        textarea: '',
+        icon: '',
+      },
+    },
+  },
+};

package/source/components/data-table/DataTable.tsx

@@ -0,0 +1,377 @@
+// TODO: fix
+/* eslint-disable complexity -- TODO */
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {restrictToHorizontalAxis} from '@dnd-kit/modifiers';
+import {arrayMove, horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type ColumnOrderState,
+  type ColumnPinningState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type PaginationState,
+  type RowData,
+  type SortingState,
+  type Updater,
+  useReactTable,
+  type VisibilityState,
+} from '@tanstack/react-table';
+import {useCallback, useId, useState} from 'react';
+
+import {Table} from '../Table.js';
+import {TableBody} from '../TableBody.js';
+import {TableCell} from '../TableCell.js';
+import {TableFoot} from '../TableFoot.js';
+import {TableHead} from '../TableHead.js';
+import {TableHeader} from '../TableHeader.js';
+import {TableRow} from '../TableRow.js';
+import {type DataTableColumnOrder} from './DataTableColumnOrder.js';
+import {type DataTableColumnPinning} from './DataTableColumnPinning.js';
+import {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';
+import {type DataTableFaceting} from './DataTableFaceting.js';
+import {type DataTableFilters} from './DataTableFilters.js';
+import {type DataTablePagination} from './DataTablePagination.js';
+import {type DataTableSearch} from './DataTableSearch.js';
+import {type DataTableSorting} from './DataTableSorting.js';
+import {
+  DataTableHeader,
+  DataTablePagination as DataTablePaginationComponent,
+  DataTableSearch as DataTableSearchComponent,
+  DEFAULT_PAGE_SIZE,
+  fromPinningState,
+  fuzzyFilter,
+  getCommonPinningClasses,
+  getCommonPinningStyles,
+} from './internals.js';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterVariant?: 'range' | 'select' | 'text';
+  }
+}
+
+export type DataTableProps<D, C> = {
+  data: D[];
+  columns: C;
+  clientPagination?: boolean | undefined;
+  pagination?: DataTablePagination | undefined;
+  onPaginationChange?:
+    | ((
+        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,
+      ) => void)
+    | undefined;
+  columnVisibility?: DataTableColumnVisibility;
+  onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;
+  columnOrder?: DataTableColumnOrder;
+  onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;
+  columnPinning?: DataTableColumnPinning;
+  onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;
+  clientSorting?: boolean | undefined;
+  sorting?: DataTableSorting | undefined;
+  onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;
+  clientFilters?: boolean | undefined;
+  filters?: DataTableFilters | undefined;
+  onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;
+  clientFaceting?: boolean | undefined;
+  faceting?: DataTableFaceting | undefined;
+  clientSearch?: boolean | undefined;
+  search?: DataTableSearch | undefined;
+  onSearchChange?: ((search: DataTableSearch) => void) | undefined;
+};
+
+export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
+  data,
+  columns,
+  clientPagination = false,
+  pagination: controlledPagination,
+  onPaginationChange,
+  clientSorting = false,
+  sorting: controlledSorting,
+  onSortingChange,
+  columnVisibility: controlledColumnVisibility,
+  onColumnVisibilityChange,
+  columnOrder: controlledColumnOrder,
+  onColumnOrderChange,
+  columnPinning: controlledColumnPinning,
+  onColumnPinningChange,
+  clientFilters = false,
+  filters: controlledFilters,
+  onFiltersChange,
+  clientFaceting = false,
+  faceting,
+  clientSearch = false,
+  search: controlledSearch,
+  onSearchChange,
+}: DataTableProps<D, C>) {
+  let [pagination, setPagination] = useState<PaginationState>(
+    controlledPagination ?
+      {
+        pageIndex: Math.max(0, controlledPagination.page - 1),
+        pageSize: controlledPagination.pageSize,
+      }
+    : {
+        pageIndex: 0,
+        pageSize: DEFAULT_PAGE_SIZE,
+      },
+  );
+  let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});
+  let [columnOrder, setColumnOrder] = useState<string[]>(
+    controlledColumnOrder ?
+      [
+        ...controlledColumnOrder,
+        ...columns
+          .map((column, index) => {
+            if (column.id) {
+              return column.id;
+            }
+
+            if ('accessorKey' in column) {
+              return String(column.accessorKey);
+            }
+
+            if (typeof column.header === 'string') {
+              return String(column.header);
+            }
+
+            return String(index);
+          })
+          .filter((value) => !controlledColumnOrder.includes(value)),
+      ]
+    : columns.map((column, index) => {
+        if (column.id) {
+          return column.id;
+        }
+
+        if ('accessorKey' in column) {
+          return String(column.accessorKey);
+        }
+
+        if (typeof column.header === 'string') {
+          return String(column.header);
+        }
+
+        return String(index);
+      }),
+  );
+  let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(
+    controlledColumnPinning ?
+      {
+        left: Object.entries(controlledColumnPinning)
+          .filter(([, pinning]) => pinning === 'left')
+          .map(([column]) => column),
+        right: Object.entries(controlledColumnPinning)
+          .filter(([, pinning]) => pinning === 'right')
+          .map(([column]) => column),
+      }
+    : {left: [], right: []},
+  );
+  let [sorting, setSorting] = useState<SortingState>([]);
+  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  let [search, setSearch] = useState('');
+
+  let handleColumnVisibilityChange = useCallback(
+    (columnVisibilityState: Updater<VisibilityState>) => {
+      setColumnVisibility(columnVisibilityState);
+
+      if (typeof columnVisibilityState === 'function') {
+        onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));
+      } else {
+        onColumnVisibilityChange?.(columnVisibilityState);
+      }
+    },
+    [columnVisibility, onColumnVisibilityChange],
+  );
+  let handleColumnOrderChange = useCallback(
+    (columnOrderState: Updater<ColumnOrderState>) => {
+      setColumnOrder(columnOrderState);
+
+      if (typeof columnOrderState === 'function') {
+        onColumnOrderChange?.(columnOrderState(columnOrder));
+      } else {
+        onColumnOrderChange?.(columnOrderState);
+      }
+    },
+    [columnOrder, onColumnOrderChange],
+  );
+  let handleColumnPinningChange = useCallback(
+    (columnPinningState: Updater<ColumnPinningState>) => {
+      setColumnPinning(columnPinningState);
+
+      if (typeof columnPinningState === 'function') {
+        onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));
+      } else {
+        onColumnPinningChange?.(fromPinningState(columnPinningState));
+      }
+    },
+    [columnPinning, onColumnPinningChange],
+  );
+
+  let table = useReactTable<D>({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,
+    getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,
+    state: {
+      pagination: clientPagination ? pagination : undefined,
+      columnVisibility,
+      columnOrder,
+      columnPinning,
+      sorting: clientSorting ? sorting : undefined,
+      columnFilters: clientFilters ? columnFilters : undefined,
+      globalFilter: clientSearch ? search : undefined,
+    },
+    onPaginationChange: clientPagination ? setPagination : undefined,
+    onColumnVisibilityChange: handleColumnVisibilityChange,
+    onColumnOrderChange: handleColumnOrderChange,
+    onColumnPinningChange: handleColumnPinningChange,
+    onSortingChange: clientSorting ? setSorting : undefined,
+    onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,
+    onGlobalFilterChange: clientSearch ? setSearch : undefined,
+    columnResizeMode: 'onChange',
+    globalFilterFn: fuzzyFilter,
+  });
+
+  let handleDragEnd = useCallback(
+    ({active, over}: DragEndEvent) => {
+      if (over && active.id !== over.id) {
+        table.setColumnOrder((previousColumnOrder) => {
+          let oldIndex = previousColumnOrder.indexOf(active.id as string);
+          let newIndex = previousColumnOrder.indexOf(over.id as string);
+
+          return arrayMove(previousColumnOrder, oldIndex, newIndex);
+        });
+      }
+    },
+    [table],
+  );
+
+  let sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {}),
+  );
+
+  let id = useId();
+
+  let page =
+    clientPagination ? table.getState().pagination.pageIndex + 1 : controlledPagination?.page ?? 1;
+  let pageSize =
+    clientPagination ?
+      table.getState().pagination.pageSize
+    : controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE;
+  let pageCount = clientPagination ? table.getPageCount() : controlledPagination?.pageCount ?? 1;
+
+  return (
+    <DndContext
+      id={id}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      sensors={sensors}
+      onDragEnd={handleDragEnd}
+    >
+      <DataTableSearchComponent
+        table={table}
+        clientSearch={clientSearch}
+        search={controlledSearch}
+        onSearch={onSearchChange}
+      />
+      <Table
+        style={{
+          width: table.getCenterTotalSize(),
+          tableLayout: 'fixed',
+        }}
+      >
+        <TableHead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
+                {headerGroup.headers.map((header) => (
+                  <DataTableHeader
+                    key={header.id}
+                    table={table}
+                    header={header}
+                    clientSorting={clientSorting}
+                    sorting={controlledSorting}
+                    clientFilters={clientFilters}
+                    filters={controlledFilters}
+                    clientFaceting={clientFaceting}
+                    faceting={faceting}
+                    onSorting={onSortingChange}
+                    onFiltering={onFiltersChange}
+                  />
+                ))}
+              </SortableContext>
+            </TableRow>
+          ))}
+        </TableHead>
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell
+                  key={cell.id}
+                  className={getCommonPinningClasses(cell.column)}
+                  style={{...getCommonPinningStyles(cell.column)}}
+                  title={String(cell.getValue())}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <TableRow key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <TableHeader key={header.id}>
+                  {header.isPlaceholder ? null : (
+                    flexRender(header.column.columnDef.footer, header.getContext())
+                  )}
+                </TableHeader>
+              ))}
+            </TableRow>
+          ))}
+        </TableFoot>
+      </Table>
+      <DataTablePaginationComponent
+        table={table}
+        page={page}
+        pageSize={pageSize}
+        pageCount={pageCount}
+        clientPagination={clientPagination}
+        onPagination={onPaginationChange}
+      />
+    </DndContext>
+  );
+}

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

@@ -0,0 +1,5 @@
+import {z} from 'zod';
+
+export const dataTableColumnOrderSchema = z.string().array();
+
+export type DataTableColumnOrder = z.infer<typeof dataTableColumnOrderSchema>;

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

@@ -0,0 +1,5 @@
+import {z} from 'zod';
+
+export const dataTableColumnPinningSchema = z.record(z.string(), z.enum(['left', 'right']));
+
+export type DataTableColumnPinning = z.infer<typeof dataTableColumnPinningSchema>;

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

@@ -0,0 +1,5 @@
+import {z} from 'zod';
+
+export const dataTableColumnVisibilitySchema = z.record(z.string(), z.boolean());
+
+export type DataTableColumnVisibility = z.infer<typeof dataTableColumnVisibilitySchema>;

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

@@ -0,0 +1,12 @@
+import {z} from 'zod';
+
+export const dataTableFacetingSchema = z.record(
+  z.string(),
+  z.object({
+    values: z.unknown().array().optional(),
+    min: z.unknown().optional(),
+    max: z.unknown().optional(),
+  }),
+);
+
+export type DataTableFaceting = z.infer<typeof dataTableFacetingSchema>;

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

@@ -0,0 +1,18 @@
+import {z} from 'zod';
+
+export const dataTableFiltersSchema = z.union([
+  z.null(),
+  z
+    .object({
+      column: z.string(),
+      filter: z.union([
+        z.string(),
+        z.number(),
+        z.boolean(),
+        z.tuple([z.number().nullable().optional(), z.number().nullable().optional()]),
+      ]),
+    })
+    .array(),
+]);
+
+export type DataTableFilters = z.infer<typeof dataTableFiltersSchema>;

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

@@ -0,0 +1,18 @@
+import {z} from 'zod';
+
+import {PAGE_SIZES} from './internals.js';
+
+export const dataTablePaginationSchema = z.object({
+  /** Page number, starts with 1. */
+  page: z.number(),
+  pageSize: z.union([
+    z.literal(PAGE_SIZES[0]),
+    z.literal(PAGE_SIZES[1]),
+    z.literal(PAGE_SIZES[2]),
+    z.literal(PAGE_SIZES[3]),
+    z.literal(PAGE_SIZES[4]),
+  ]),
+  pageCount: z.number(),
+});
+
+export type DataTablePagination = z.infer<typeof dataTablePaginationSchema>;

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

@@ -0,0 +1,5 @@
+import {z} from 'zod';
+
+export const dataTableSearchSchema = z.string().nullable();
+
+export type DataTableSearch = z.infer<typeof dataTableSearchSchema>;

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

@@ -0,0 +1,11 @@
+import {z} from 'zod';
+
+export const dataTableSortingSchema = z.union([
+  z.null(),
+  z.object({
+    column: z.string(),
+    direction: z.enum(['ascending', 'descending']),
+  }),
+]);
+
+export type DataTableSorting = z.infer<typeof dataTableSortingSchema>;