@clevertask/react-sortable-tree 0.0.7 → 0.0.8

package/README.md

@@ -46,25 +46,40 @@ Otherwise, the component will use the default [tree item type](#types).
 This is the basic structure you can start with:
 
 ```tsx
-import {
-  RenderItemProps,
-  TreeItemStructure,
-  createSortableTreeGlobalStyles,
-  RenderItemProps,
-} from '@clevertask/react-sortable-tree';
+import { RenderItemProps, TreeItemStructure } from '@clevertask/react-sortable-tree';
 
-export const TreeItem = ({ treeItem, collapsed, onCollapse, ...rest }: RenderItemProps) => {
-  <TreeItemStructure {...rest}>
-    <button {...dragListeners}>Drag me</button>
-    {onCollapse && <button onClick={onCollapse}>{collapsed ? 'Expand' : 'Collapse'}</button>}
+export const TreeItem = (props: RenderItemProps) => {
+  const { treeItem, collapsed, onCollapse, dragListeners } = props;
 
-    <h5>{treeItem.label}</h5>
+  return (
+    <TreeItemStructure {...props}>
+      {/* TreeItemStructure.DragHandler provides a default drag handle with accessible attributes and stable selectors for E2E testing.*/}
+      <TreeItemStructure.DragHandler>Drag me</TreeItemStructure.DragHandler>
+
+      {/* Or if you want to implement your own approach */}
+      <button {...dragListeners}>Drag me</button>
+
+      {onCollapse && <button onClick={onCollapse}>{collapsed ? 'Expand' : 'Collapse'}</button>}
 
-    <button onClick={() => openItemInfoModal(treeItem.id)}>Show treeItem info</button>
-  </TreeItemStructure>;
+      <h5>{treeItem.label}</h5>
+
+      <button onClick={() => openItemDetailsModal(treeItem.id)}>Show treeItem info</button>
+    </TreeItemStructure>
+  );
 };
 ```
 
+If you need to change the indicator colors when dragging an item, you can use the `createSortableTreeGlobalStyles` for that:
+
+```tsx
+const useSortableTreeGlobalStyles = createSortableTreeGlobalStyles({
+  indicatorColor: 'var(--orange-7)',
+  indicatorBorderColor: 'var(--orange-7)',
+});
+
+useSortableTreeGlobalStyles();
+```
+
 This is a real-world example using Radix:
 
 ```tsx
@@ -84,20 +99,22 @@ import {
 import { Flex, Button, Text, Box } from '@radix-ui/themes';
 import { CustomTreeItem } from '.';
 
-export const TreeItem = ({
-  treeItem,
-  dragListeners,
-  onCollapse,
-  collapsed,
-  onClickAddNestedItemButton,
-  onClickItemRemoveButton,
-  onItemClick,
-  ...rest
-}: RenderItemProps<CustomTreeItem> & {
-  onClickAddNestedItemButton: (id: string) => void;
-  onClickItemRemoveButton: (id: string) => void;
-  onItemClick: (id: string) => void;
-}) => {
+export const TreeItem = (
+  props: RenderItemProps<CustomTreeItem> & {
+    onClickAddNestedItemButton: (id: string) => void;
+    onClickItemRemoveButton: (id: string) => void;
+    onItemClick: (id: string) => void;
+  },
+) => {
+  const {
+    treeItem,
+    onCollapse,
+    collapsed,
+    onClickAddNestedItemButton,
+    onClickItemRemoveButton,
+    onItemClick,
+  } = props;
+
   const useSortableTreeGlobalStyles = createSortableTreeGlobalStyles({
     indicatorColor: 'var(--orange-7)',
     indicatorBorderColor: 'var(--orange-7)',
@@ -107,7 +124,7 @@ export const TreeItem = ({
 
   return (
     <TreeItemStructure
-      {...rest}
+      {...props}
       asDropZone={Box}
       asDraggableItem={Box}
       draggableItemStyle={{
@@ -119,9 +136,9 @@ export const TreeItem = ({
       }}
     >
       <Flex align="center" gap="5" direction="row">
-        <Button color="gray" variant="ghost" {...dragListeners}>
+        <TreeItemStructure.DragHandler>
           <DragHandleDots2Icon />
-        </Button>
+        </TreeItemStructure.DragHandler>
 
         {onCollapse && (
           <Button color="gray" variant="ghost" onClick={onCollapse}>
@@ -260,7 +277,8 @@ export interface TreeItemStructureProps {
 
 ```ts
 export interface RenderItemProps<T extends TTreeItem = TTreeItem>
-  extends Pick<
+  extends
+    Pick<
       TreeItemStructureProps,
       'classNames' | 'dropZoneStyle' | 'dropZoneRef' | 'draggableItemRef'
     >,
@@ -315,15 +333,58 @@ function setTreeItemProperties<T extends TreeItem>(
 
 ---
 
+## E2E Helper Functions
+
+While adding e2e tests for this library, we created some helper functions that makes e2e testing declarative and easy in a way the user would use the UI. Feel free to import these helpers on your e2e tests. Also feel free to see the tests added to this repo on the `e2e` folder to have an idea about using these helpers
+
+### dragItem
+
+Use it whenever you want to drag an item inside, after or before another item. This already knows how to move the item based on this library contract. You need to pass the name of the item you want to drag. There will be support for targeting items by their ID, to prevent getting items with the same name, but naturally, we get items by their name.
+
+⚠️ So, when using E2E helpers that target items by name, item labels should be unique in the rendered tree.
+
+```ts
+await dragItem({
+  page,
+  expect,
+  from: { name: 'A' },
+  to: { name: 'C', position: 'inside' },
+});
+```
+
+### expectItemToBeChildOf/expectItemNotToBeChildOf
+
+This helper tells you if the item is a child of a given tree item. There's its opposite helper to assert if the target element is not child of a given item.
+
+```ts
+const taskA = page.getByRole('treeitem', { name: 'A' });
+const taskC = page.getByRole('treeitem', { name: 'C' });
+await expectItemToBeChildOf(expect, taskA, taskC);
+
+// or
+
+await expectItemNotToBeChildOf(expect, taskA, taskC);
+```
+
+### expectItemBefore
+
+This helper tells you if an item is before the "x" item. You don't need a function for after because it's a matter of targeting the items in their proper places.
+
+```ts
+await expectItemBefore(page, expect, 'C', 'A');
+```
+
+---
+
 ## Roadmap
 
 - ✅ Custom item rendering (done!)
+- ✅ E2E tests: It's partially done. We have yet to add item expanding tests and future tests for the next stuff we plan to add
 - 🔜 Virtualization for large trees
 - 🔜 Multi-selection support
 - 🔜 Drag multiple items
 - 🔜 Keyboard navigation
 - 🔜 API usage example
-- 🔜 E2E tests
 
 ---
 

package/dist/e2e/index.js

@@ -0,0 +1,51 @@
+async function f({ page: t, expect: e, from: o, to: a }) {
+  const n = t.getByLabel(`Drag ${o.name}`, { exact: !0 }), m = t.getByRole("treeitem", { name: a.name });
+  await e(n).toBeVisible(), await e(m).toBeVisible();
+  const r = await n.boundingBox(), i = await m.boundingBox();
+  if (!r || !i)
+    throw new Error("Could not determine bounding boxes for drag operation");
+  const c = r.x + r.width / 2, w = r.y + r.height / 2;
+  let u = i.x + 8, d = i.y;
+  const b = 4;
+  switch (a.position) {
+    case "before":
+      d = i.y + b;
+      break;
+    case "after":
+      d = i.y + i.height - b;
+      break;
+    case "inside": {
+      const s = await m.locator("[data-tree-draggable]").boundingBox();
+      if (!s)
+        throw new Error("Could not determine draggable item bounds");
+      u = s.x + s.width * 0.05, d = s.y + s.height * 0.75;
+      break;
+    }
+  }
+  await t.mouse.move(c, w), await t.mouse.down(), await t.mouse.move(c + 1, w + 1), await t.mouse.move(u, d, { steps: 10 }), await t.evaluate(() => new Promise(requestAnimationFrame)), await t.mouse.up();
+}
+async function l(t) {
+  const e = await t.getAttribute("data-tree-item-id");
+  if (!e)
+    throw new Error("Tree item does not have data-tree-item-id");
+  return e;
+}
+async function x(t, e, o, a) {
+  const n = await t.getByRole("treeitem").allTextContents();
+  e(n.indexOf(o)).toBeLessThan(n.indexOf(a));
+}
+async function h(t, e, o) {
+  const a = await l(o);
+  await t(e).toHaveAttribute("data-tree-item-parent-id", a);
+}
+async function B(t, e, o) {
+  const a = await l(o);
+  await t(e).not.toHaveAttribute("data-tree-item-parent-id", a);
+}
+export {
+  f as dragItem,
+  x as expectItemBefore,
+  B as expectItemNotToBeChildOf,
+  h as expectItemToBeChildOf,
+  l as getTreeItemId
+};

package/dist/e2e/utils/drag-item.d.ts

@@ -0,0 +1,15 @@
+import { Page, Expect } from '@playwright/test';
+type DragPosition = 'before' | 'after' | 'inside';
+interface DragItemOptions {
+    page: Page;
+    expect: Expect;
+    from: {
+        name: string;
+    };
+    to: {
+        name: string;
+        position: DragPosition;
+    };
+}
+export declare function dragItem({ page, expect, from, to }: DragItemOptions): Promise<void>;
+export {};

package/dist/e2e/utils/expect-item-before.d.ts

@@ -0,0 +1,2 @@
+import { Expect, Page } from '@playwright/test';
+export declare function expectItemBefore(page: Page, expect: Expect, first: string, second: string): Promise<void>;

package/dist/e2e/utils/expect-item-child-of.d.ts

@@ -0,0 +1,3 @@
+import { Locator, Expect } from '@playwright/test';
+export declare function expectItemToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;
+export declare function expectItemNotToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;

package/dist/e2e/utils/get-tree-item-id.d.ts

@@ -0,0 +1,2 @@
+import { Locator } from '@playwright/test';
+export declare function getTreeItemId(locator: Locator): Promise<string>;

package/dist/e2e/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './drag-item';
+export * from './get-tree-item-id';
+export * from './expect-item-before';
+export * from './expect-item-child-of';

package/dist/react-sortable-tree.css

@@ -1 +1 @@
-._Wrapper_wguit_1{list-style:none;box-sizing:border-box;padding-left:var(--spacing);margin-bottom:-1px}._Wrapper_wguit_1._clone_wguit_8{display:inline-block;pointer-events:none;padding:5px 0 0 10px}._Wrapper_wguit_1._clone_wguit_8 ._TreeItem_wguit_16{--vertical-padding: 5px;padding-right:24px;border-radius:4px;box-shadow:0 15px 15px #2221511a}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23{opacity:1;position:relative;z-index:1;margin-bottom:-1px}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16{position:relative;padding:0;height:8px;border-color:#2389ff;background-color:#56a1f8}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16:before{position:absolute;left:-8px;top:-4px;display:block;content:"";width:12px;height:12px;border-radius:50%;border:1px solid #2389ff;background-color:#fff}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16>*{opacity:0;height:0}._Wrapper_wguit_1._ghost_wguit_23:not(._indicator_wguit_23){opacity:.5}._Wrapper_wguit_1._ghost_wguit_23 ._TreeItem_wguit_16>*{box-shadow:none;background-color:transparent}._TreeItem_wguit_16{--vertical-padding: 10px;position:relative;display:flex;align-items:center;padding:var(--vertical-padding) 10px;background-color:#fff;border:1px solid #dedede;color:#222;box-sizing:border-box}._Text_wguit_78{flex-grow:1;padding-left:.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;align-self:stretch;display:flex;align-items:center;cursor:pointer}._Count_wguit_90{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#2389ff;font-size:.8rem;font-weight:600;color:#fff}._disableInteraction_wguit_106{pointer-events:none}._disableSelection_wguit_110 ._Text_wguit_78,._disableSelection_wguit_110 ._Count_wguit_90,._clone_wguit_8 ._Text_wguit_78,._clone_wguit_8 ._Count_wguit_90{user-select:none;-webkit-user-select:none}._Collapse_wguit_118 svg{transition:transform .25s ease}._Collapse_wguit_118._collapsed_wguit_122 svg{transform:rotate(-90deg)}._Action_7i4a4_1{display:flex;width:12px;padding:15px;align-items:center;justify-content:center;flex:0 0 auto;touch-action:none;cursor:var(--cursor, pointer);border-radius:5px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media (hover: hover){._Action_7i4a4_1:hover{background-color:var(--action-background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:hover svg{fill:#6f7b88}}._Action_7i4a4_1 svg{flex:0 0 auto;margin:auto;height:100%;overflow:visible;fill:#919eab}._Action_7i4a4_1:active{background-color:var(--background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:active svg{fill:var(--fill, #788491)}._Action_7i4a4_1:focus-visible{outline:none;box-shadow:0 0 0 2px #fff0,0 0 0 2px #4c9ffe}
+._Wrapper_wguit_1{list-style:none;box-sizing:border-box;padding-left:var(--spacing);margin-bottom:-1px}._Wrapper_wguit_1._clone_wguit_8{display:inline-block;pointer-events:none;padding:5px 0 0 10px}._Wrapper_wguit_1._clone_wguit_8 ._TreeItem_wguit_16{--vertical-padding: 5px;padding-right:24px;border-radius:4px;box-shadow:0 15px 15px #2221511a}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23{opacity:1;position:relative;z-index:1;margin-bottom:-1px}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16{position:relative;padding:0;height:8px;border-color:#2389ff;background-color:#56a1f8}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16:before{position:absolute;left:-8px;top:-4px;display:block;content:"";width:12px;height:12px;border-radius:50%;border:1px solid #2389ff;background-color:#fff}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16>*{opacity:0;height:0}._Wrapper_wguit_1._ghost_wguit_23:not(._indicator_wguit_23){opacity:.5}._Wrapper_wguit_1._ghost_wguit_23 ._TreeItem_wguit_16>*{box-shadow:none;background-color:transparent}._TreeItem_wguit_16{--vertical-padding: 10px;position:relative;display:flex;align-items:center;padding:var(--vertical-padding) 10px;background-color:#fff;border:1px solid #dedede;color:#222;box-sizing:border-box}._Text_wguit_78{flex-grow:1;padding-left:.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;align-self:stretch;display:flex;align-items:center;cursor:pointer}._Count_wguit_90{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#2389ff;font-size:.8rem;font-weight:600;color:#fff}._disableInteraction_wguit_106{pointer-events:none}._disableSelection_wguit_110 ._Text_wguit_78,._disableSelection_wguit_110 ._Count_wguit_90,._clone_wguit_8 ._Text_wguit_78,._clone_wguit_8 ._Count_wguit_90{user-select:none;-webkit-user-select:none}._Collapse_wguit_118 svg{transition:transform .25s ease}._Collapse_wguit_118._collapsed_wguit_122 svg{transform:rotate(-90deg)}._Action_7i4a4_1{display:flex;width:12px;padding:15px;align-items:center;justify-content:center;flex:0 0 auto;touch-action:none;cursor:var(--cursor, pointer);border-radius:5px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media(hover:hover){._Action_7i4a4_1:hover{background-color:var(--action-background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:hover svg{fill:#6f7b88}}._Action_7i4a4_1 svg{flex:0 0 auto;margin:auto;height:100%;overflow:visible;fill:#919eab}._Action_7i4a4_1:active{background-color:var(--background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:active svg{fill:var(--fill, #788491)}._Action_7i4a4_1:focus-visible{outline:none;box-shadow:0 0 0 2px #fff0,0 0 0 2px #4c9ffe}