@kanda-libs/ks-design-library-new 0.0.1

package/src/components/Table/components/HeaderGroup/index.tsx

@@ -0,0 +1,40 @@
+import type { PropsWithChildren } from 'react';
+import type {
+  ColumnInstance,
+  HeaderGroup as HeaderGroupType,
+} from 'react-table';
+import HeaderColumn from '../HeaderColumn';
+import { CLASS_NAMES } from './constants';
+import useHeaderGroupProps from './useHeaderGroupProps';
+
+export interface HeaderGroupProps<T extends Object> {
+  headerGroup: HeaderGroupType<T>;
+  columns: ColumnInstance<T>[];
+  isLoading?: boolean;
+}
+
+function HeaderGroup<T extends Object>({
+  headerGroup,
+  columns,
+  isLoading,
+}: PropsWithChildren<HeaderGroupProps<T>>) {
+  const { headerGroupProps, headers } = useHeaderGroupProps(
+    headerGroup,
+    columns,
+  );
+
+  return (
+    <div {...headerGroupProps} className={CLASS_NAMES.base}>
+      {headers.map((column, index) => (
+        <HeaderColumn
+          index={index}
+          label={column.render('Header')}
+          isLoading={isLoading}
+          {...column.getHeaderProps(column.getSortByToggleProps())}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default HeaderGroup;

package/src/components/Table/components/HeaderGroup/useHeaderGroupProps.ts

@@ -0,0 +1,27 @@
+import type {
+  ColumnInstance,
+  HeaderGroup,
+  TableHeaderProps,
+} from 'react-table';
+
+export interface HeaderGroupPropsHook<T extends Object> {
+  headers: ColumnInstance<T>[];
+  headerGroupProps: TableHeaderProps;
+  totalVisible: number;
+}
+
+export default function useHeaderGroupProps<T extends Object>(
+  headerGroup: HeaderGroup<T>,
+  columns: ColumnInstance<T>[],
+): HeaderGroupPropsHook<T> {
+  const { headers, getHeaderGroupProps } = headerGroup;
+  const headerGroupProps = getHeaderGroupProps({});
+
+  const totalVisible = columns.filter((column) => column.isVisible).length;
+
+  return {
+    headers,
+    headerGroupProps,
+    totalVisible,
+  };
+}

package/src/components/Table/components/Row/constants.ts

@@ -0,0 +1,7 @@
+export const CLASS_NAMES = {
+  base: 'relative h-16',
+  compact: 'relative h-8',
+  border: 'border-b border-neutral-200',
+  hover: 'group hover:bg-neutral-50 cursor-pointer',
+  button: 'hidden group-hover:block',
+};

package/src/components/Table/components/Row/index.tsx

@@ -0,0 +1,40 @@
+import type { PropsWithChildren } from 'react';
+import type { Row as RowType, TableRowProps } from 'react-table';
+import Cell from '../Cell';
+import useRowClassNames from './useRowClassNames';
+
+export interface RowProps<T extends Object> extends TableRowProps {
+  cells: RowType<T>['cells'];
+  index: number;
+  compact?: boolean;
+  isLoading?: boolean;
+}
+
+function Row<T extends Object>({
+  cells,
+  index,
+  compact = false,
+  isLoading = false,
+  ...props
+}: PropsWithChildren<RowProps<T>>) {
+  const classNames = useRowClassNames(index);
+
+  console.log({
+    props,
+  });
+
+  return (
+    <div {...props} className={compact ? classNames.compact : classNames.base}>
+      {cells.map((cell, cellIndex) => (
+        <Cell
+          {...cell.getCellProps()}
+          index={cellIndex}
+          isLoading={isLoading}
+          render={() => cell.render('Cell')}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default Row;

package/src/components/Table/components/Row/useRowClassNames.ts

@@ -0,0 +1,19 @@
+import { useClasses } from '@kanda-libs/ks-design-library';
+import { CLASS_NAMES } from './constants';
+
+export interface RowClassNamesHook {
+  base: string;
+  compact: string;
+  border: string;
+  hover: string;
+  button: string;
+}
+
+export default function useRowClassNames(index: number): RowClassNamesHook {
+  const classNames = useClasses(CLASS_NAMES, {
+    base: ['.base', index === 9 ? '' : '.border', '.hover'],
+    button: ['.button'],
+  });
+
+  return classNames as RowClassNamesHook;
+}

package/src/components/Table/components/SearchInput/index.tsx

@@ -0,0 +1,22 @@
+import type { FunctionComponent } from 'react';
+import useSearchInput from './useSearchInput';
+
+export interface SearchInputProps {
+  onSearch: (search: string) => void;
+}
+
+const SearchInput: FunctionComponent<SearchInputProps> = function ({
+  onSearch,
+}) {
+  const { search, onChange, onSubmit } = useSearchInput(onSearch);
+
+  return (
+    <div className="flex flex-row gap-x-2">
+      <span>Search:</span>
+      <input type="text" value={search} onChange={onChange} />
+      <button onClick={onSubmit}>Search</button>
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/components/Table/components/SearchInput/useSearchInput.ts

@@ -0,0 +1,30 @@
+import { FormEvent, useCallback, useState } from 'react';
+
+export interface SearchInputHook {
+  search: string;
+  onChange: (e: FormEvent<HTMLInputElement>) => void;
+  onSubmit: () => void;
+}
+
+export default function useSearchInput(
+  onSearch: (search: string) => void,
+): SearchInputHook {
+  const [search, setSearch] = useState('');
+
+  const onChange = useCallback(
+    (e: FormEvent<HTMLInputElement>) => {
+      setSearch(e.currentTarget.value);
+    },
+    [setSearch],
+  );
+
+  const onSubmit = useCallback(() => {
+    onSearch(search);
+  }, [search, onSearch]);
+
+  return {
+    search,
+    onChange,
+    onSubmit,
+  };
+}

package/src/components/Table/helpers/search.ts

@@ -0,0 +1,96 @@
+import type { IdType } from 'react-table';
+import type { Row } from '../../../@types/index';
+import Fuse from 'fuse.js';
+import type { StringIndexedObject } from '~/types';
+
+const exactMatchSearch = <T extends StringIndexedObject<unknown>>(
+  rows: Row<T>[],
+  filterValue: string,
+) => {
+  return rows.filter((row) => {
+    // Take all values from the row, and add them together in a string
+    // for the purposes of searching
+    const rowValues = Object.values(row.values).join(', ');
+
+    return rowValues.toLowerCase().includes(filterValue.toLowerCase());
+  });
+};
+
+const excludeExactMatches = <T extends StringIndexedObject<unknown>>(
+  rows: Row<T>[],
+  exactMatchRows: Row<T>[],
+) =>
+  rows.filter(
+    ({ id }) => exactMatchRows.filter((p) => p.id === id).length === 0,
+  );
+
+const fuzzySearch = <T extends StringIndexedObject<unknown>>(
+  rows: Row<T>[],
+  filterValue: string,
+  searchKeys: string[],
+  numberOfRows: number,
+  exactMatchRows: Row<T>[],
+): Row<T>[] => {
+  const currentRows = rows.map((row) => {
+    return row.values;
+  });
+
+  const fuse = new Fuse(currentRows, {
+    keys: searchKeys.map((key) => ({
+      name: key,
+      // Because FuseJS allows for dot notation,
+      // we need to use a function to get the value
+      // as the object returned from the table is flat,
+      // rather than nested
+      getFn: (obj: StringIndexedObject) => obj[key],
+    })),
+  });
+
+  const results = fuse
+    .search(filterValue)
+    .map(({ item }) => item)
+    .slice(0, numberOfRows);
+
+  const filteredResults = results
+    .map((result) => rows.find((row) => row.values.cid === result.cid))
+    .filter(Boolean) as Row<T>[];
+
+  return excludeExactMatches(filteredResults, exactMatchRows);
+};
+
+export const globalFilter = <T extends StringIndexedObject<unknown>>(
+  rows: Row<T>[],
+  searchKeys: IdType<T>[],
+  filterValue: string,
+  pageSize = 10,
+): Row<T>[] => {
+  if (filterValue.length < 1) {
+    return rows;
+  }
+
+  // Get the first 10 exact matches. The reason for this is that exact matching
+  // should take presedence over fuzzy matching. An exact match is more useful
+  // but also less expensive to compute. So there's no need to do a fuzzy search
+  // if there are >= 10 exact matches.
+  const exactMatches = exactMatchSearch(rows, filterValue).slice(0, pageSize);
+  const currentRowsExcludingExactMatches = excludeExactMatches(
+    rows,
+    exactMatches,
+  );
+
+  const fuzzyMatches = fuzzySearch(
+    currentRowsExcludingExactMatches,
+    filterValue,
+    searchKeys,
+    pageSize - exactMatches.length,
+    exactMatches,
+  );
+
+  const results = [...exactMatches, ...fuzzyMatches];
+
+  // Return the rows in the same order as the original rows
+  // to preserve sorting, which happens before fuzzy matching
+  return rows
+    .map(({ id }) => results.find((row) => row.id === id))
+    .filter(Boolean) as Row<T>[];
+};

package/src/components/Table/index.tsx

@@ -0,0 +1,64 @@
+import type { StringIndexedObject } from '@kanda-libs/ks-design-library';
+import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { Column } from 'react-table';
+import HeaderGroup from './components/HeaderGroup';
+import Row from './components/Row';
+import SearchInput from './components/SearchInput';
+import useTableProps from './useTableProps';
+
+export interface TableProps<T extends StringIndexedObject<unknown>> {
+  columns: Readonly<Column<T>[]>;
+  data: T[];
+  filter?: string;
+  pageSize?: number;
+  compact?: boolean;
+  isLoading?: boolean;
+}
+
+export type TableFunctionComponent<
+  T extends StringIndexedObject<unknown> = any,
+> = FunctionComponent<TableProps<T>>;
+
+function Table<T extends StringIndexedObject<unknown>>({
+  compact = false,
+  isLoading = false,
+  ...props
+}: PropsWithChildren<TableProps<T>>) {
+  const { onSearch, page, prepareRow, columns, getTableProps, headerGroups } =
+    useTableProps(props);
+
+  return (
+    <>
+      <SearchInput
+        onSearch={(currentSearch) => {
+          onSearch(currentSearch);
+        }}
+      />
+      <div {...getTableProps()} className="w-full">
+        <div>
+          {headerGroups.map((headerGroup) => (
+            <HeaderGroup
+              headerGroup={headerGroup}
+              columns={columns}
+              isLoading={isLoading}
+            />
+          ))}
+        </div>
+        {page.map((row, index) => {
+          prepareRow(row);
+          return (
+            <Row
+              {...row.getRowProps()}
+              index={index}
+              cells={row.cells}
+              compact={compact}
+              isLoading={isLoading}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default Table;

package/src/components/Table/useTableProps.ts

@@ -0,0 +1,54 @@
+import type { TableInstance, Row } from '../../@types/index';
+import {
+  useTable,
+  useGlobalFilter,
+  usePagination,
+  useSortBy,
+  useFlexLayout,
+  type IdType,
+  TableOptions,
+} from 'react-table';
+import type { TableProps } from '.';
+import { globalFilter } from './helpers/search';
+import type { StringIndexedObject } from '@kanda-libs/ks-design-library';
+
+export interface TablePropsHook<T extends StringIndexedObject<unknown>>
+  extends TableInstance<T> {
+  onSearch: (value: string) => void;
+}
+
+export default function useTableProps<T extends StringIndexedObject<unknown>>({
+  columns,
+  data,
+  pageSize = 10,
+}: TableProps<T>): TablePropsHook<T> {
+  const table = useTable<T>(
+    {
+      columns,
+      data,
+      initialState: {
+        pageSize: 10,
+        pageIndex: 0,
+      },
+      autoResetGlobalFilter: false,
+      globalFilter: (
+        rows: Row<T>[],
+        searchKeys: IdType<T>[],
+        filterValue: string,
+      ) => globalFilter(rows, searchKeys, filterValue, pageSize),
+    } as unknown as TableOptions<T>,
+    useGlobalFilter,
+    useSortBy,
+    usePagination,
+    useFlexLayout,
+  );
+
+  const onSearch = (search: string) => {
+    table.setGlobalFilter(search);
+  };
+
+  return {
+    onSearch,
+    ...table,
+  };
+}

package/src/components/index.tsx

@@ -0,0 +1 @@
+export { default as Table } from './Table';

package/src/index.ts

@@ -0,0 +1,2 @@
+import './@types/index.d.ts';
+export * from './components';

package/src/moduleTypes.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';