@react-fabric/data 1.0.0-beta.0

package/src/table/HeaderCell.tsx

@@ -0,0 +1,70 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { type ColumnType } from "./types";
+
+export const HeaderCell = ({
+  label,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  actions,
+  locked,
+  resizable,
+  width,
+  maxWidth,
+  minWidth,
+}: ColumnType) => {
+  return (
+    <div
+      className="group font-medium border-e flex flex-nowrap text-start items-center"
+      style={{
+        width: width ?? "12rem",
+        minWidth: minWidth ?? "2rem",
+        maxWidth: maxWidth ?? "32rem",
+      }}
+    >
+      <div className="flex-1 px-2 py-1 text-sm truncate sticky start-0">
+        {icon && (
+          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+        )}
+        <span>{label ?? " "}</span>
+      </div>
+      <Dropdown placement="bottom-start">
+        <Icon
+          icon={CoreIcons.caretDown}
+          className="outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
+        />
+        <Menu className="text-sm">
+          <MenuItem label="Sort ascending" icon={CoreIcons.sortAsc} />
+          <MenuItem label="Sort descending" icon={CoreIcons.sortDesc} />
+        </Menu>
+      </Dropdown>
+      {resizable && (
+        <div className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch" />
+      )}
+    </div>
+  );
+};

package/src/table/Table.tsx

@@ -0,0 +1,143 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useMemo } from "react";
+import { BodyCell } from "./BodyCell";
+import { HeaderCell } from "./HeaderCell";
+import { type ColumnType, type TableProps } from "./types";
+import { useTableColumns } from "./useTableColumns";
+import { useVirtualTable } from "./useVirtualTable";
+import classNames from "classnames";
+
+export const Table = <T extends KeyValue = KeyValue>({
+  data,
+  columns,
+}: TableProps<T>) => {
+  const { columnMap } = useTableColumns(columns);
+  const { scrollerRef, items, getData, totalSize, measureElement } =
+    useVirtualTable(data);
+
+  const wrapperStart = useMemo(
+    () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
+    [],
+  );
+  const wrapperEnd = useMemo(
+    () => "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px",
+    [],
+  );
+  const emptyCol = useCallback(
+    (col: ColumnType, idc: number) => (
+      <div
+        key={`blank:${idc}`}
+        className="overflow-hidden border-e"
+        style={{
+          width: col.width ?? "12rem",
+          minWidth: col.minWidth ?? "2rem",
+          maxWidth: col.maxWidth ?? "32rem",
+        }}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <div
+      className="grid area-content overflow-auto relative"
+      style={{
+        gridTemplate: `"head" auto "content" 1fr "foot" auto/1fr`,
+      }}
+      ref={scrollerRef}
+    >
+      <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
+        <div className={wrapperStart}>
+          {columnMap.start?.map((col, idx) => (
+            <HeaderCell key={idx} {...col} />
+          ))}
+        </div>
+        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
+        <div className={wrapperEnd}>
+          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
+        </div>
+      </div>
+      <div
+        className="area-content flex flex-col flex-nowrap"
+        style={{ height: totalSize() }}
+      >
+        <div style={{ height: items[0]?.start }} />
+        {items.map(({ index, key }) => (
+          <div
+            key={key}
+            className={classNames(
+              "flex flex-nowrap",
+              index % 2 ? "bg-even" : "bg-odd",
+            )}
+            data-index={index}
+            ref={measureElement}
+          >
+            <div className={wrapperStart}>
+              {columnMap.start?.map((col, ids) => (
+                <BodyCell
+                  key={`${key}:${ids}`}
+                  column={col}
+                  item={getData(index)}
+                />
+              ))}
+            </div>
+            {columnMap.cols?.map((col, idc) => (
+              <BodyCell
+                key={`${key}:${idc}`}
+                column={col}
+                item={getData(index)}
+              />
+            ))}
+            <div className={wrapperEnd}>
+              {columnMap.end?.map((col, ide) => (
+                <BodyCell
+                  key={`${key}:${ide}`}
+                  column={col}
+                  item={getData(index)}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+        <div className="flex-1 flex flex-nowrap">
+          <div className={wrapperStart}>{columnMap.start?.map(emptyCol)}</div>
+          {columnMap.cols?.map(emptyCol)}
+          <div className={wrapperEnd}>{columnMap.end?.map(emptyCol)}</div>
+        </div>
+      </div>
+      <div className="area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2">
+        <div className={wrapperStart}>
+          {columnMap.start?.map((col, idx) => (
+            <HeaderCell key={idx} {...col} />
+          ))}
+        </div>
+        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
+        <div className={wrapperEnd}>
+          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/table/types.ts

@@ -0,0 +1,65 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  type CssProp,
+  type IconProps,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
+
+export interface ColumnType<T = KeyValue>
+  extends CssProp,
+    IconProps,
+    TestProps {
+  id: keyof T;
+  label?: string;
+  actions?: ReactElement;
+  align?: "start" | "center" | "end";
+  locked?: "start" | "end";
+  hidden?: boolean;
+  hideable?: boolean;
+  resizable?: boolean;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterList?: AnyObject[];
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  dataType?:
+    | "string"
+    | "number"
+    | "boolean"
+    | "datetime"
+    | "date"
+    | "time"
+    | "unknown";
+  format?: string;
+  renderer?: (value: AnyObject, data: T) => void;
+}
+
+export interface TableProps<T = KeyValue> {
+  columns: Array<ColumnType<T>>;
+  data: T[];
+  autoColumns?: boolean;
+}

package/src/table/useTableColumns.ts

@@ -0,0 +1,52 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { groupBy } from "@react-fabric/utilities";
+import { useEffect, useState } from "react";
+import { type ColumnType } from "./types";
+
+export const useTableColumns = (columns: ColumnType[]) => {
+  const [columnMap, setColumnMap] = useState<{
+    start: ColumnType[];
+    end: ColumnType[];
+    cols: ColumnType[];
+  }>({
+    start: [],
+    end: [],
+    cols: [],
+  });
+
+  useEffect(() => {
+    setColumnMap(
+      groupBy(
+        columns.filter((col) => !(col.hideable && col.hidden)),
+        "locked",
+        "cols",
+      ) as AnyObject,
+    );
+  }, [columns]);
+
+  return {
+    columnMap,
+  };
+};

package/src/table/useVirtualTable.ts

@@ -0,0 +1,54 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useRef } from "react";
+
+export const useVirtualTable = (data: KeyValue[]) => {
+  // TODO: refactor data into item list, apply grouping if groupColumn provided
+  // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => 24,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  const getData = useCallback(
+    (index: number) => {
+      return data[index];
+    },
+    [data],
+  );
+
+  return {
+    scrollerRef,
+    items: virtualItems,
+    getData,
+    totalSize: virtualizer.getTotalSize,
+    measureElement: virtualizer.measureElement,
+  };
+};

package/src/tree/TreeNode.tsx

@@ -0,0 +1,163 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { type TreeNodeProps } from "./types";
+
+export const TreeNode = ({
+  node,
+  noLines,
+  expanders,
+  checkable,
+  selectable,
+  defaultLeafIcon,
+  defaultNodeIcon,
+  onToggle,
+  onSelect,
+  onChecked,
+  children,
+}: TreeNodeProps) => {
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(node.badge);
+  }, [node.badge]);
+
+  const filler = useMemo(() => {
+    return node.lines.slice(noLines ? 1 : 0).map((line, idx) => (
+      <svg
+        key={idx}
+        viewBox="0 0 24 24"
+        className="flex-initial w-6 fill-tint-200"
+      >
+        {line === 0 && <path d="" />}
+        {!noLines && line === 1 && <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />}
+        {!noLines && line === 2 && (
+          <path d="M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z" />
+        )}
+        {!noLines && line === 3 && (
+          <path d="M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z" />
+        )}
+      </svg>
+    ));
+  }, [noLines, node.lines]);
+
+  const nodeIcon = useMemo(() => {
+    if (node.icon) return node.icon;
+    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+  }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
+
+  const canCheck = useMemo(() => {
+    return checkable === true || (checkable === "leafOnly" && node.leaf);
+  }, [node.leaf, checkable]);
+
+  const canSelect = useMemo(() => {
+    return (
+      !node.disabled &&
+      (selectable === true || (selectable === "leafOnly" && node.leaf))
+    );
+  }, [node.leaf, node.disabled, selectable]);
+
+  return (
+    <div
+      role="treeitem"
+      aria-selected={node.selected}
+      className="flex flex-nowrap"
+      data-testid={node["data-testid"]}
+      data-test-value={node["data-test-value"]}
+    >
+      {filler}
+      {!node.leaf && !node.childFiltered && (
+        <div className="flex-initial w-6">
+          <Icon
+            rtlFlip
+            onClick={() => !node.leaf && onToggle(node.id)}
+            icon={node.open ? expanders[1] : expanders[0]}
+            className="text-tint-600 hover:text-primary-600"
+          />
+        </div>
+      )}
+      {canCheck && (
+        <div className="flex-initial w-6">
+          <Icon
+            onClick={() => !node.disabled && onChecked(node.id)}
+            icon={
+              node.checked === 2
+                ? CoreIcons.checkboxInt
+                : node.checked === 1
+                  ? CoreIcons.checkboxOn
+                  : CoreIcons.checkboxOff
+            }
+            className={classNames(
+              node.disabled
+                ? "text-muted"
+                : "text-primary-500 hover:text-primary-600",
+            )}
+          />
+        </div>
+      )}
+      <div
+        role="none"
+        className={classNames(
+          "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none",
+          node.childSelected && "font-medium",
+          canSelect && "hover:bg-primary-50 cursor-pointer",
+        )}
+        data-selected={node.selected}
+        onClick={() =>
+          canSelect
+            ? onSelect(node.id)
+            : canCheck
+              ? onChecked(node.id)
+              : onToggle(node.id)
+        }
+      >
+        {nodeIcon && (
+          <div className="flex-content w-6">
+            <Icon
+              icon={nodeIcon}
+              bg={node.iconBg}
+              color={node.iconColor}
+              rtlFlip={node.rtlFlip}
+            />
+          </div>
+        )}
+        {node.childSelected && !node.open && (
+          <span className=" flex-content text-primary-500">•</span>
+        )}
+        <div role="none" className="flex-1 truncate">
+          {children}
+        </div>
+        {node.badge && (
+          <Badge
+            {...badgeProps}
+            className={classNames(
+              "me-1 self-center flex-content bg-opacity-50",
+              badgeProps.className,
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+};