@takaro/lib-components 0.0.1

package/src/components/data/Table/subcomponents/ColumnHeader/index.tsx

@@ -0,0 +1,207 @@
+import { Column, ColumnOrderState, Header, Table, flexRender } from '@tanstack/react-table';
+import { useDrag, useDragLayer, useDrop, XYCoord } from 'react-dnd';
+import { ColumnSettings } from './ColumnSettings';
+import { Identifier } from 'dnd-core';
+import { styled } from '../../../../../styled';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { Target, Content, Th, ResizeHandle, InnerTh } from './style';
+
+const ItemTypes = {
+  COLUMN: 'column',
+};
+
+interface CollectedProps {
+  handlerId: Identifier | null;
+  isActive: boolean;
+  isRight: boolean;
+}
+
+export interface ColumnHeaderProps<DataType extends object> {
+  header: Header<DataType, unknown>;
+  table: Table<DataType>;
+  isLoading: boolean;
+}
+
+const reorder = (draggedColumnId: string, targetColumnId: string, columnOrder: string[]): ColumnOrderState => {
+  columnOrder.splice(
+    columnOrder.indexOf(targetColumnId),
+    0,
+    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string
+  );
+  return [...columnOrder];
+};
+
+export function ColumnHeader<DataType extends object>({ header, table, isLoading }: ColumnHeaderProps<DataType>) {
+  const { getState, setColumnOrder } = table;
+  const { columnOrder } = getState();
+  const { column } = header;
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const canDrag = !isLoading;
+
+  const [{ isActive, isRight }, dropRef] = useDrop<Column<DataType>, void, CollectedProps>({
+    accept: ItemTypes.COLUMN,
+    collect: (monitor) => ({
+      isActive: monitor.canDrop() && monitor.isOver(),
+      // check if the dragged element is situated on the right or left of the current element
+      isRight: columnOrder.indexOf(column.id) > columnOrder.indexOf(monitor.getItem()?.id),
+      handlerId: monitor.getHandlerId(),
+    }),
+    drop: (draggedColumn: Column<DataType>) => {
+      const newColumnOrder = reorder(draggedColumn.id, column.id, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
+    canDrop: (draggedColumn: Column<DataType>) => draggedColumn.id !== column.id,
+    hover: (draggedColumn: Column<DataType>, monitor) => {
+      if (!ref.current) {
+        return;
+      }
+      const hoverIndex = columnOrder.indexOf(column.id);
+      const draggedIndex = columnOrder.indexOf(draggedColumn.id);
+
+      // Don't replace items with themselves
+      if (draggedIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current.getBoundingClientRect();
+
+      // Get vertical middle
+      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+
+      // Determine mouse position
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const clientOffset = monitor.getClientOffset()!;
+
+      // Get pixels to the top
+      const hoverClientX = clientOffset.x - hoverBoundingRect.left;
+
+      // Dragging left
+      if (draggedIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+        return;
+      }
+
+      // Dragging right
+      if (draggedIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+        return;
+      }
+
+      // Time to actually perform the action
+      const newColumnOrder = reorder(draggedColumn.id, column.id, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
+  });
+
+  const [{ isDragging }, dragRef, previewRef] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => ({
+      ...column,
+      draggedIndex: columnOrder.indexOf(column.id),
+    }),
+
+    // Disable dragging whnen loading
+    canDrag: !isLoading,
+    type: ItemTypes.COLUMN,
+  });
+
+  useEffect(() => {
+    previewRef(getEmptyImage(), { captureDraggingState: true });
+  }, []);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      dragRef(node);
+      dropRef(node);
+    }
+  }, [dragRef, dropRef]);
+
+  return (
+    <Th
+      canDrag={canDrag}
+      colSpan={header.colSpan}
+      scope="col"
+      isDragging={isDragging}
+      isActive={isActive}
+      isRight={isRight}
+      width={header.getSize()}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      isRowSelection={false}
+    >
+      <InnerTh>
+        <Target ref={ref} isDragging={isDragging} role="DraggableBox" draggable={true} aria-dropeffect="move">
+          <CustomDragLayer />
+          <Content canDrag={canDrag}>
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          </Content>
+        </Target>
+
+        {/* Only show columnSettings when sorting and filtering is enabled 
+            NOTE: getCanGlobalFilter cannot be used to base render logic on because it is set to false when the table has no data.
+          */}
+        {column.getCanFilter() && column.getCanSort() && (
+          <ColumnSettings columnIsHovered={isHovered} header={header} table={table} />
+        )}
+      </InnerTh>
+      {header.column.getCanResize() && !isLoading && (
+        <ResizeHandle
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          isResizing={header.column.getIsResizing()}
+          onDoubleClick={() => header.column.resetSize()}
+        ></ResizeHandle>
+      )}
+    </Th>
+  );
+}
+
+export const Wrapper = styled.div`
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Inner = styled.div<{ initialOffset: XYCoord | null; currentOffset: XYCoord | null }>`
+  display: ${({ initialOffset, currentOffset }) => (!initialOffset || !currentOffset ? 'none' : 'block')};
+  transform: ${({ currentOffset }) => `translate(${currentOffset?.x}px, ${currentOffset?.y}px)`};
+`;
+
+export const CustomDragLayer = forwardRef<HTMLDivElement>((_, ref) => {
+  const { itemType, isDragging, initialOffset, currentOffset } = useDragLayer((monitor) => ({
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+  }));
+
+  function renderItem() {
+    switch (itemType) {
+      case ItemTypes.COLUMN:
+        return <div></div>;
+      default:
+        return null;
+    }
+  }
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <Wrapper ref={ref}>
+      <Inner initialOffset={initialOffset} currentOffset={currentOffset}>
+        {renderItem()}
+      </Inner>
+    </Wrapper>
+  );
+});

package/src/components/data/Table/subcomponents/ColumnHeader/style.ts

@@ -0,0 +1,89 @@
+import { styled } from '../../../../../styled';
+
+export const Th = styled.th<{
+  isActive: boolean;
+  isRight: boolean;
+  isDragging: boolean;
+  width: number;
+  canDrag: boolean;
+  isRowSelection: boolean;
+}>`
+  position: relative;
+  width: ${({ width }) => width}px;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} 0`};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  &:first-child {
+    padding-left: ${({ theme, isRowSelection }) => (isRowSelection ? 0 : theme.spacing['1'])};
+  }
+
+  &:last-of-type {
+    padding-right: ${({ theme }) => theme.spacing['1']};
+  }
+
+  & > div {
+    font-weight: 600;
+  }
+
+  /* NOTE: Required to match with the resizeHandle */
+  border-right: ${({ theme, isActive, isRight }) =>
+    isActive && isRight ? `4px solid ${theme.colors.primary}` : `1px solid ${theme.colors.background}`};
+  border-left: ${({ theme, isActive, isRight }) =>
+    isActive && !isRight ? `4px solid ${theme.colors.primary}` : `1px solid ${theme.colors.background}`};
+
+  &:first-child {
+    border-left: ${({ theme, isActive, isRight }) =>
+      isActive && !isRight ? `4px solid ${theme.colors.primary}` : 'none'};
+    border-top-left-radius: ${({ theme }) => theme.borderRadius.medium};
+    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+
+  &:last-of-type {
+    border-top-right-radius: ${({ theme }) => theme.borderRadius.medium};
+    border-right: ${({ theme, isActive, isRight }) =>
+      isActive && isRight ? `4px solid ${theme.colors.primary}` : `1px solid ${theme.colors.background}`};
+    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+`;
+
+export const InnerTh = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export const Target = styled.div<{ isDragging: boolean }>`
+  opacity: ${({ isDragging }) => (isDragging ? 0.1 : 1)};
+`;
+
+export const Content = styled.span<{ canDrag: boolean }>`
+  cursor: ${({ canDrag }) => (canDrag ? 'grabbing' : 'default')};
+`;
+
+export const ResizeHandle = styled.span<{ isResizing: boolean }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  right: -1px;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  height: 100vh;
+  cursor: col-resize;
+  user-select: none;
+  /* prevents from scrolling while dragging on touch devices */
+  touch-action: none;
+  opacity: ${({ isResizing }) => (isResizing ? 1 : 0)};
+  background-color: ${({ theme, isResizing }) => (isResizing ? theme.colors.primary : theme.colors.backgroundAccent)};
+  transition: opacity 0.1s ease-out;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export const MenuTrigger = styled.div<{ isVisible: boolean }>`
+  display: inline-block;
+  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
+  transition: opacity 0.2s ease-in-out;
+`;

package/src/components/data/Table/subcomponents/ColumnVisibility/index.tsx

@@ -0,0 +1,61 @@
+import { Table } from '@tanstack/react-table';
+import { Dropdown, IconButton } from '../../../../../components';
+import { AiOutlineEye as EyeIcon } from 'react-icons/ai';
+import { Dispatch, SetStateAction } from 'react';
+import { camelCaseToSpaces } from '../../../../../helpers';
+
+interface ColumnVisibilityProps<DataType extends object> {
+  table: Table<DataType>;
+  setOpenColumnVisibilityTooltip: Dispatch<SetStateAction<boolean>>;
+  openColumnVisibilityTooltip: boolean;
+  setHasShownColumnVisibilityTooltip: Dispatch<SetStateAction<boolean>>;
+  hasShownColumnVisibilityTooltip: boolean;
+}
+
+export function ColumnVisibility<DataType extends object>({
+  table,
+  setOpenColumnVisibilityTooltip,
+  openColumnVisibilityTooltip,
+  setHasShownColumnVisibilityTooltip,
+}: ColumnVisibilityProps<DataType>) {
+  const viableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide() === true);
+  const hiddenColumns = viableColumns.filter((column) => column.getIsVisible() === false);
+
+  return (
+    <Dropdown>
+      <Dropdown.Trigger
+        asChild
+        tooltipOptions={{
+          onOpenChange: setOpenColumnVisibilityTooltip,
+          open: openColumnVisibilityTooltip,
+          content: 'Show or hide columns',
+          placement: 'right',
+        }}
+      >
+        <IconButton
+          badge={hiddenColumns.length > 0 ? (hiddenColumns.length as unknown as string) : ''}
+          size="large"
+          icon={<EyeIcon />}
+          ariaLabel="Columns"
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Menu.Group label="Visibility of columns">
+          {viableColumns.map((column) => (
+            <Dropdown.Menu.Item
+              key={column.id}
+              onClick={() => {
+                // In case they open the dropdown they already know about the column visibility
+                setHasShownColumnVisibilityTooltip(true);
+                column.toggleVisibility();
+              }}
+              label={camelCaseToSpaces(column.id)}
+              activeStyle="checkmark"
+              active={column.getIsVisible()}
+            />
+          ))}
+        </Dropdown.Menu.Group>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

package/src/components/data/Table/subcomponents/Filter/field.tsx

@@ -0,0 +1,129 @@
+import { Control, UseFormSetValue, useWatch } from 'react-hook-form';
+import { SelectField, TextField } from '../../../../../components';
+import { FilterInputType, IFormInputs } from '.';
+import { Operators } from '.';
+import { Column } from '@tanstack/react-table';
+import { useLayoutEffect } from 'react';
+import { camelCaseToSpaces } from '../../../../../helpers';
+
+interface FilterFieldProps<DataType> {
+  index: number;
+  id: string;
+  columnIds: string[];
+  control: Control<IFormInputs>;
+  getColumn: (columnId: string) => Column<DataType, unknown> | undefined;
+  setValue: UseFormSetValue<IFormInputs>;
+}
+
+export function FilterRow<DataType extends object>({
+  id,
+  columnIds,
+  index,
+  control,
+  setValue,
+  getColumn,
+}: FilterFieldProps<DataType>) {
+  const currentColumn = useWatch<IFormInputs>({
+    control,
+    name: `filters.${index}.column`,
+  });
+  const currentOperator = useWatch<IFormInputs>({
+    control,
+    name: `filters.${index}.operator`,
+  });
+
+  const getOperators = (columnId: string | undefined) => {
+    const defaultOperators = [Operators.is, Operators.contains];
+
+    if (!columnId) {
+      return defaultOperators;
+    }
+
+    const column = getColumn(columnId);
+    if (!column) {
+      return defaultOperators;
+    }
+
+    const meta = column?.columnDef?.meta as Record<string, unknown> | undefined;
+    switch (meta?.type) {
+      case 'uuid':
+      case 'datetime':
+        return [Operators.is];
+      default:
+        return defaultOperators;
+    }
+  };
+
+  const operators = getOperators(currentColumn.toString());
+
+  useLayoutEffect(() => {
+    const column = getColumn(currentColumn.toString());
+    const meta = column?.columnDef.meta;
+
+    setValue(`filters.${index}.operator`, Operators.is);
+    setValue(`filters.${index}.type`, (meta?.dataType as string | undefined as FilterInputType) ?? 'string');
+  }, [currentColumn]);
+
+  return (
+    <>
+      <SelectField
+        key={`column-${id}`}
+        control={control}
+        name={`filters.${index}.column`}
+        label="Column"
+        inPortal
+        render={(selectedItems) => {
+          if (selectedItems.length === 0) {
+            return 'Select a column';
+          }
+          const col = columnIds.find((col) => col === selectedItems[0].value);
+          return camelCaseToSpaces(col);
+        }}
+      >
+        <SelectField.OptionGroup>
+          {columnIds.map((col) => (
+            <SelectField.Option key={col} value={col} label={col}>
+              <div>
+                <span>{camelCaseToSpaces(col)}</span>
+              </div>
+            </SelectField.Option>
+          ))}
+        </SelectField.OptionGroup>
+      </SelectField>
+
+      <SelectField
+        key={`operator-${id}`}
+        control={control}
+        name={`filters.${index}.operator`}
+        label="Condition"
+        inPortal
+        render={() => {
+          const operator = currentOperator?.toString();
+
+          if (operator === '') {
+            return 'Select a condition';
+          }
+
+          return operator;
+        }}
+      >
+        <SelectField.OptionGroup>
+          {operators.map((operator) => (
+            <SelectField.Option key={operator} value={operator} label={operator}>
+              <div>
+                <span>{operator}</span>
+              </div>
+            </SelectField.Option>
+          ))}
+        </SelectField.OptionGroup>
+      </SelectField>
+      <TextField
+        key={`value-${id}`}
+        control={control}
+        name={`filters.${index}.value`}
+        label="Value"
+        placeholder="Enter a value"
+      />
+    </>
+  );
+}