@jakubmazanec/ui 0.1.0-unstable.081bdf1

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-gray-100 hover:border-gray-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-gray-300',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+        textarea: '',
+        icon: '',
+      },
+      false: {
+        root: '',
+        textarea: '',
+        icon: '',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,602 @@
+// TODO: fix somehow
+/* eslint-disable complexity -- TODO */
+import {useSortable} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';
+import {
+  type ChangeEvent,
+  type CSSProperties,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import {Button} from '../Button.js';
+import {Checkbox} from '../Checkbox.js';
+import {CheckboxField} from '../CheckboxField.js';
+import {Combobox} from '../Combobox.js';
+import {type DataTableProps} from '../DataTable.js';
+import {Field} from '../Field.js';
+import {Form} from '../Form.js';
+import {Icon} from '../Icon.js';
+import {Input} from '../Input.js';
+import {Label} from '../Label.js';
+import {Listbox} from '../Listbox.js';
+import {Popover} from '../Popover.js';
+import {PopoverButton} from '../PopoverButton.js';
+import {PopoverPanel} from '../PopoverPanel.js';
+import {TableHeader} from '../TableHeader.js';
+import {getCommonPinningClasses} from './internals/getCommonPinningClasses.js';
+import {getCommonPinningStyles} from './internals/getCommonPinningStyles.js';
+
+type DataTableHeaderProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  header: Header<any, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  sorting: DataTableProps<any, any>['sorting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onSorting: DataTableProps<any, any>['onSorting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onFiltering: DataTableProps<any, any>['onFiltering'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  faceting: DataTableProps<any, any>['faceting'];
+};
+
+export function DataTableHeader({
+  header,
+  table,
+  sorting: controlledSorting,
+  onSorting,
+  filters: controlledFilters,
+  onFiltering,
+  faceting,
+}: DataTableHeaderProps) {
+  let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({
+    id: header.column.id,
+  });
+
+  let handleSortClick = useCallback(() => {
+    if (onSorting) {
+      if (
+        controlledSorting === false ||
+        controlledSorting === undefined ||
+        controlledSorting.column !== header.column.id
+      ) {
+        onSorting({
+          column: header.column.id,
+          direction: 'ascending',
+        });
+      } else if (
+        controlledSorting.column === header.column.id &&
+        controlledSorting.direction === 'ascending'
+      ) {
+        onSorting({
+          column: header.column.id,
+          direction: 'descending',
+        });
+      } else if (
+        controlledSorting.column === header.column.id &&
+        controlledSorting.direction === 'descending'
+      ) {
+        onSorting(false);
+      }
+    }
+  }, [controlledSorting, onSorting, header.column.id]);
+
+  let handleWidthReset = useCallback(() => {
+    header.column.resetSize();
+  }, [header.column]);
+
+  let style: CSSProperties = {
+    transform: CSS.Translate.toString(transform),
+    transition: 'width transform 0.2s ease-in-out',
+    zIndex: isDragging ? 20 : undefined,
+    ...getCommonPinningStyles(header.column),
+  };
+
+  let isSorted = header.column.getIsSorted();
+
+  let contentElement = null;
+
+  if (!header.isPlaceholder) {
+    contentElement = flexRender(header.column.columnDef.header, header.getContext());
+  }
+
+  let sortElement = null;
+
+  if (onSorting) {
+    if (
+      controlledSorting === false ||
+      controlledSorting === undefined ||
+      controlledSorting.column !== header.column.id
+    ) {
+      sortElement = <Icon name="ArrowsUpDown" size="small" className="text-gray-200 select-none" />;
+    } else if (
+      controlledSorting.direction === 'ascending' &&
+      controlledSorting.column === header.column.id
+    ) {
+      sortElement = <Icon name="ArrowUp" size="small" className="text-gray-950 select-none" />;
+    } else if (
+      controlledSorting.direction === 'descending' &&
+      controlledSorting.column === header.column.id
+    ) {
+      sortElement = <Icon name="ArrowDown" size="small" className="text-gray-950 select-none" />;
+    }
+  } else {
+    if (!header.isPlaceholder && isSorted === false) {
+      sortElement = <Icon name="ArrowsUpDown" size="small" className="text-gray-200 select-none" />;
+    }
+
+    if (!header.isPlaceholder && isSorted === 'asc') {
+      sortElement = <Icon name="ArrowUp" size="small" className="text-gray-950 select-none" />;
+    }
+
+    if (!header.isPlaceholder && isSorted === 'desc') {
+      sortElement = <Icon name="ArrowDown" size="small" className="text-gray-950 select-none" />;
+    }
+  }
+
+  let title: string | undefined;
+
+  if (onSorting) {
+    if (controlledSorting === false || controlledSorting === undefined) {
+      title = 'Sort ascending';
+    } else if (
+      controlledSorting.direction === 'ascending' &&
+      controlledSorting.column === header.column.id
+    ) {
+      title = 'Sort descending';
+    } else if (
+      controlledSorting.direction === 'descending' &&
+      controlledSorting.column === header.column.id
+    ) {
+      title = 'Clear sort';
+    }
+  } else if (header.column.getCanSort()) {
+    if (header.column.getNextSortingOrder() === 'asc') {
+      title = 'Sort ascending';
+    } else if (header.column.getNextSortingOrder() === 'desc') {
+      title = 'Sort descending';
+    } else {
+      title = 'Clear sort';
+    }
+  }
+
+  return (
+    <TableHeader
+      ref={setNodeRef}
+      colSpan={header.colSpan}
+      className={getCommonPinningClasses(header.column)}
+      style={style}
+    >
+      <span className="w-full overflow-hidden">
+        <span className="flex justify-between items-center gap-x-1">
+          {header.column.getCanSort() ?
+            <Button
+              variant="text"
+              size="small"
+              className="inline-flex mr-auto cursor-move"
+              title={title}
+              onClick={onSorting ? handleSortClick : header.column.getToggleSortingHandler()}
+              {...attributes}
+              {...listeners}
+            >
+              {sortElement}
+              {contentElement}
+            </Button>
+          : null}
+          <Popover>
+            <PopoverButton>
+              <Button variant="text" size="small" aria-label="Settings">
+                <Icon size="small" name="Cog6Tooth" />
+              </Button>
+            </PopoverButton>
+            <PopoverPanel anchor="right start" className="flex flex-col gap-y-2">
+              <Form>
+                {header.column.getCanPin() ?
+                  <div className="flex flex-col gap-y-2">
+                    <p className="text-sm">Pin column</p>
+
+                    <Field>
+                      <div className="flex gap-x-2">
+                        {header.column.getIsPinned() === 'left' ? null : (
+                          <Button
+                            variant="outline"
+                            aria-label="Pin to left"
+                            onClick={() => {
+                              header.column.pin('left');
+                            }}
+                          >
+                            <Icon size="large" name="ArrowLeftEndOnRectangle" />
+                          </Button>
+                        )}
+                        {header.column.getIsPinned() ?
+                          <Button
+                            variant="outline"
+                            aria-label="Unpin"
+                            onClick={() => {
+                              header.column.pin(false);
+                            }}
+                          >
+                            <Icon size="large" name="XMark" />
+                          </Button>
+                        : null}
+                        {header.column.getIsPinned() === 'right' ? null : (
+                          <Button
+                            variant="outline"
+                            aria-label="Pin to right"
+                            onClick={() => {
+                              header.column.pin('right');
+                            }}
+                          >
+                            <Icon size="large" name="ArrowRightEndOnRectangle" />
+                          </Button>
+                        )}
+                      </div>
+                    </Field>
+                  </div>
+                : null}
+
+                {header.column.getCanFilter() ?
+                  <div className="flex flex-col gap-y-2">
+                    <p className="text-sm">Filter</p>
+
+                    <Field>
+                      <DataTableHeaderFilter
+                        column={header.column}
+                        filters={controlledFilters}
+                        onFiltering={onFiltering}
+                        faceting={faceting}
+                      />
+                    </Field>
+                  </div>
+                : null}
+
+                <div className="flex flex-col gap-y-2">
+                  <p className="text-sm">Visible columns</p>
+
+                  {table.getAllLeafColumns().map((column) => (
+                    <DataTableHeaderColumnCheckbox key={column.id} column={column} table={table} />
+                  ))}
+                </div>
+              </Form>
+            </PopoverPanel>
+          </Popover>
+          <Button
+            variant="invisible"
+            size="small"
+            aria-label="Resize"
+            className="cursor-col-resize select-none"
+            onDoubleClick={handleWidthReset}
+            onMouseDown={header.getResizeHandler()}
+            onTouchStart={header.getResizeHandler()}
+          >
+            <Icon size="small" name="ArrowsRightLeft" />
+          </Button>
+        </span>
+      </span>
+    </TableHeader>
+  );
+}
+
+type DataTableHeaderColumnCheckboxProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  column: Column<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+};
+
+function DataTableHeaderColumnCheckbox({column, table}: DataTableHeaderColumnCheckboxProps) {
+  let handleChange = useCallback(
+    (checked: boolean) => {
+      if (!checked && table.getFlatHeaders().length >= 2) {
+        column.toggleVisibility(checked);
+      } else if (checked) {
+        column.toggleVisibility(checked);
+      }
+    },
+    [column, table],
+  );
+
+  return (
+    <CheckboxField key={column.id}>
+      <Checkbox
+        checked={column.getIsVisible()}
+        disabled={table.getFlatHeaders().length <= 1 && column.getIsVisible()}
+        onChange={handleChange}
+      />
+      <Label>
+        {flexRender(column.columnDef.header, {
+          table,
+          column,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
+          header: {column} as Header<any, any>,
+        })}
+      </Label>
+    </CheckboxField>
+  );
+}
+
+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;
+}
+
+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 false;
+  }
+
+  if (!newFilters.length) {
+    return false;
+  }
+
+  return newFilters;
+}
+
+type DataTableHeaderFilterProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  column: Column<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onFiltering: DataTableProps<any, any>['onFiltering'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  faceting: DataTableProps<any, any>['faceting'];
+};
+
+function DataTableHeaderFilter({
+  column,
+  filters: controlledFilters,
+  onFiltering,
+  faceting,
+}: DataTableHeaderFilterProps) {
+  let {filterVariant} = column.columnDef.meta ?? {};
+
+  let filter =
+    onFiltering ?
+      controlledFilters ? controlledFilters.find((filter) => filter.column === column.id)?.filter
+      : undefined
+    : column.getFilterValue();
+
+  let currentMin =
+    filterVariant === 'range' ?
+      (filter as [number?, number?] | undefined)?.[0] ?? undefined
+    : undefined;
+  let currentMax =
+    filterVariant === 'range' ?
+      (filter as [number?, number?] | undefined)?.[1] ?? undefined
+    : undefined;
+
+  let [min, setMin] = useState(currentMin);
+  let [max, setMax] = useState(currentMax);
+
+  let deferredMin = useDeferredValue(min);
+  let deferredMax = useDeferredValue(max);
+
+  useEffect(() => {
+    if (currentMin === deferredMin && currentMax === deferredMax) {
+      return;
+    }
+
+    if (!deferredMin && !deferredMax) {
+      if (onFiltering) {
+        onFiltering(removeFilter(controlledFilters, column.id));
+      } else {
+        column.setFilterValue(undefined);
+      }
+    } else if (onFiltering) {
+      onFiltering(addFilter(controlledFilters, column.id, [deferredMin, deferredMax]));
+    } else {
+      column.setFilterValue([deferredMin, deferredMax]);
+    }
+  }, [deferredMin, deferredMax, column, onFiltering, controlledFilters, currentMin, currentMax]);
+
+  let handleResetClick = useCallback(() => {
+    setMin(undefined);
+    setMax(undefined);
+
+    if (onFiltering) {
+      onFiltering(removeFilter(controlledFilters, column.id));
+    } else {
+      column.setFilterValue(undefined);
+    }
+  }, [column, controlledFilters, onFiltering]);
+
+  let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setMin(event.target.value ? Number(event.target.value) : undefined);
+    // if (onFiltering) {
+    //   onFiltering(
+    //     addFilter(controlledFilters, column.id, [
+    //       event.target.value,
+    //       (filter as [number, number] | undefined)?.[1],
+    //     ]),
+    //   );
+    // } else {
+    //   column.setFilterValue((old: [number, number] | undefined) => [
+    //     event.target.value,
+    //     old?.[1],
+    //   ]);
+    // }
+  }, []);
+
+  let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setMax(event.target.value ? Number(event.target.value) : undefined);
+    // if (onFiltering) {
+    //   onFiltering(
+    //     addFilter(controlledFilters, column.id, [
+    //       (filter as [number, number] | undefined)?.[0],
+    //       event.target.value,
+    //     ]),
+    //   );
+    // } else {
+    //   column.setFilterValue((old: [number, number] | undefined) => [
+    //     old?.[0],
+    //     event.target.value,
+    //   ]);
+    // }
+  }, []);
+
+  let handleSelectChange = useCallback(
+    (value: string) => {
+      if (onFiltering) {
+        onFiltering(addFilter(controlledFilters, column.id, value));
+      } else {
+        column.setFilterValue(value);
+      }
+    },
+    [column, controlledFilters, onFiltering],
+  );
+
+  let handleTextChange = useCallback(
+    (value: string | undefined) => {
+      if (onFiltering) {
+        onFiltering(addFilter(controlledFilters, column.id, value));
+      } else {
+        column.setFilterValue(value);
+      }
+    },
+    [column, controlledFilters, onFiltering],
+  );
+
+  let facetingValues = useMemo(() => {
+    if (onFiltering) {
+      return faceting?.[column.id]?.values ?? [];
+    }
+
+    if (filterVariant === 'range') {
+      return [];
+    }
+
+    return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5000) as unknown[];
+  }, [column, faceting, filterVariant, onFiltering]);
+
+  let facetingMin =
+    onFiltering ?
+      faceting?.[column.id]?.min ?? null
+    : Number(column.getFacetedMinMaxValues()?.[0] ?? null);
+  let facetingMax =
+    onFiltering ?
+      faceting?.[column.id]?.max ?? null
+    : Number(column.getFacetedMinMaxValues()?.[1] ?? null);
+
+  if (filterVariant === 'range') {
+    return (
+      <div>
+        <div className="flex space-x-2">
+          <Input
+            type="number"
+            min={String(facetingMin ?? '')}
+            max={String(facetingMax ?? '')}
+            // value={(filter as [number?, number?] | undefined)?.[0] ?? ''}
+            value={min ?? ''}
+            placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}
+            onChange={handleMinRangeChange}
+          />
+          <Input
+            type="number"
+            min={String(facetingMin ?? '')}
+            max={String(facetingMax ?? '')}
+            // value={(filter as [number?, number?] | undefined)?.[1] ?? ''}
+            value={max ?? ''}
+            placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}
+            onChange={handleMaxRangeChange}
+          />
+          <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+            <Icon size="large" name="XMark" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (filterVariant === 'select') {
+    return (
+      <div className="flex gap-x-2">
+        <Listbox
+          value={filter as string}
+          items={(facetingValues as string[]).map((value: string) => ({
+            value,
+            label: `${value as unknown}`,
+          }))}
+          onChange={handleSelectChange}
+        />
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-x-2">
+      <Combobox
+        customValue
+        value={(filter ?? '') as string}
+        items={(facetingValues as string[]).map((value: string) => ({
+          value,
+          label: `${value as unknown}`,
+        }))}
+        onChange={handleTextChange}
+      />
+      <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+        <Icon size="large" name="XMark" />
+      </Button>
+    </div>
+  );
+}