@rovula/ui 0.0.47 → 0.0.49

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Tree from "./Tree";
+import { ActionButton, Icon } from "@/index";
+
+const exampleData = [
+  {
+    id: "1",
+    title: "Parent Folder 1",
+    children: [
+      {
+        id: "1.1",
+        title: "Child Folder 1.1",
+        children: [
+          { id: "1.1.1", title: "Sub Folder 1.1.1" },
+          { id: "1.1.2", title: "Sub Folder 1.1.2" },
+        ],
+      },
+      { id: "1.2", title: "Child Folder 1.2" },
+    ],
+  },
+  {
+    id: "2",
+    title: "Parent Folder 2",
+    children: [{ id: "2.1", title: "Child Folder 2.1" }],
+  },
+  { id: "3", title: "Parent Folder 3" },
+];
+
+const commonProps = {
+  defaultExpandedId: ["1", "1.1"],
+  defaultCheckedId: ["1.1"],
+  defaultExpandAll: true,
+  defaultCheckAll: true,
+  hierarchicalCheck: true,
+  disabled: false,
+  showIcon: true,
+};
+
+// Storybook metadata
+const meta: Meta<typeof Tree> = {
+  title: "Components/Tree",
+  component: Tree,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-base-bg">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+// Default story
+export const Default: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    ...commonProps,
+    showIcon: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};
+
+export const onClick: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item) => ({
+      ...item,
+      onClickItem: (id: string) => alert("Click item " + id),
+    })),
+    ...commonProps,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};
+
+export const CustomIcon: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item, idx) => ({
+      ...item,
+      ...(idx === 0 && {
+        icon: <Icon name="home" />,
+      }),
+      ...(idx === 1 && {
+        renderIcon: ({ expanded, selected }) => (
+          <Icon
+            name={expanded ? "home" : "home-modern"}
+            className={selected ? "fill-info" : "fill-error"}
+          />
+        ),
+      }),
+    })),
+    ...commonProps,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderIcon={({ expanded, selected }) => (
+            <Icon
+              name={expanded ? "bell" : "bell-slash"}
+              className={selected ? "fill-primary" : "fill-secondary"}
+            />
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const renderRightSection: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    ...commonProps,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const ControlShowExpandButton: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item) => ({
+      ...item,
+      showExpandButton: true,
+    })),
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};
+
+export const Diabled: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    ...commonProps,
+    disabled: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const DiabledEachItem: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item, i) => ({ ...item, disabled: i === 0 })),
+    ...commonProps,
+    disabled: undefined,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const ExpandLoadData: StoryObj<typeof Tree> = {
+  args: {},
+  render: (args) => {
+    const [data, setData] = useState([
+      {
+        id: "1",
+        title: "Parent Folder 1",
+        showExpandButton: true,
+        children: [],
+      },
+      {
+        id: "2",
+        title: "Parent Folder 2",
+        showExpandButton: true,
+        children: [],
+      },
+      {
+        id: "3",
+        title: "Parent Folder 3",
+        showExpandButton: true,
+        children: [],
+      },
+    ]);
+    const [loadingId, setLoadingId] = useState<string[]>([]);
+    const [loadedId, setLoadedId] = useState<string[]>([]);
+
+    const updateNode = (nodes: any[], id: string, newChildren: any[]): any[] =>
+      nodes.map((node) => {
+        if (node.id === id) {
+          return { ...node, children: newChildren };
+        }
+        if (node.children?.length) {
+          return {
+            ...node,
+            children: updateNode(node.children, id, newChildren),
+          };
+        }
+        return node;
+      });
+
+    const handleOnExpandChange = (id: string, isExpand: boolean) => {
+      // *Note can you other way for improve should load if need with other way without loadedId
+
+      if (isExpand && !loadingId.includes(id) && !loadedId.includes(id)) {
+        setLoadingId((prev) => [...prev, id]);
+        setTimeout(() => {
+          // Mock child data
+          const newChildren = [
+            {
+              id: Date.now() + "1",
+              title: `Child of ${id} - 1`,
+              children: [],
+              showExpandButton: true,
+            },
+            {
+              id: Date.now() + "2",
+              title: `Child of ${id} - 2`,
+              children: [],
+              showExpandButton: true,
+            },
+          ];
+
+          setData((prevData) => updateNode(prevData, id, newChildren));
+          setLoadingId((prev) => prev.filter((val) => val !== id));
+          setLoadedId((prev) => [...prev, id]);
+        }, 1500);
+      }
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          data={data}
+          loadingId={loadingId}
+          onExpandChange={handleOnExpandChange}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,192 @@
+import React, { FC, useCallback, useEffect, useState } from "react";
+import TreeItem from "./TreeItem";
+import { TreeData, TreeProps } from "./type";
+
+const Tree: FC<TreeProps> = ({
+  classes,
+  data,
+  defaultExpandedId = [],
+  defaultCheckedId = [],
+  checkedId,
+  loadingId,
+  renderIcon,
+  renderRightSection,
+  renderElement,
+  renderTitle,
+  onExpandChange,
+  onCheckedChange,
+  defaultExpandAll = false,
+  defaultCheckAll = false,
+  hierarchicalCheck = false,
+  showIcon = true,
+  disabled,
+  enableSeparatorLine = true,
+}) => {
+  const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
+  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
+    {}
+  );
+
+  const traverseTree = (
+    nodes: TreeData[],
+    callback: (node: TreeData) => void
+  ) => {
+    nodes.forEach((node) => {
+      callback(node);
+      if (node.children) {
+        traverseTree(node.children, callback);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (defaultExpandAll) {
+      const allExpanded: Record<string, boolean> = {};
+      traverseTree(data, (node) => {
+        allExpanded[node.id] = true;
+      });
+      setExpandedState(allExpanded);
+    } else if (defaultExpandedId?.length) {
+      const initialExpandedState = defaultExpandedId.reduce((acc, id) => {
+        acc[id] = true;
+        return acc;
+      }, {} as Record<string, boolean>);
+      setExpandedState(initialExpandedState);
+    }
+  }, [data, defaultExpandedId, defaultExpandAll]);
+
+  useEffect(() => {
+    if (defaultCheckAll) {
+      const allChecked: Record<string, boolean> = {};
+      traverseTree(data, (node) => {
+        allChecked[node.id] = true;
+      });
+      setCheckedState(allChecked);
+    } else if (!checkedId && defaultCheckedId?.length) {
+      const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
+        acc[id] = true;
+        return acc;
+      }, {} as Record<string, boolean>);
+      setCheckedState(initialCheckedState);
+    }
+  }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+
+  const handleExpandChange = useCallback(
+    (id: string, expanded: boolean) => {
+      onExpandChange?.(id, expanded);
+      setExpandedState((prev) => ({ ...prev, [id]: expanded }));
+    },
+    [onExpandChange]
+  );
+
+  const handleCheckedChange = useCallback(
+    (id: string, checked: boolean) => {
+      let newState = { ...checkedState, [id]: checked };
+
+      if (hierarchicalCheck) {
+        const updateCheckedState = (
+          nodeId: string,
+          isChecked: boolean,
+          state: Record<string, boolean>
+        ) => {
+          state[nodeId] = isChecked;
+
+          // Update children recursively
+          const updateChildren = (parentId: string, isChecked: boolean) => {
+            traverseTree(data, (node) => {
+              if (node.id === parentId && node.children) {
+                node.children.forEach((child) => {
+                  state[child.id] = isChecked;
+                  updateChildren(child.id, isChecked);
+                });
+              }
+            });
+          };
+
+          // Update parents recursively
+          const updateParents = (
+            childId: string,
+            state: Record<string, boolean>
+          ) => {
+            traverseTree(data, (node) => {
+              if (node.children?.some((child) => child.id === childId)) {
+                const allChildrenChecked = node.children.every(
+                  (child) => state[child.id]
+                );
+                state[node.id] = allChildrenChecked;
+                updateParents(node.id, state);
+              }
+            });
+          };
+
+          updateChildren(nodeId, isChecked);
+          updateParents(nodeId, state);
+
+          return state;
+        };
+
+        newState = updateCheckedState(id, checked, newState);
+      }
+
+      setCheckedState(newState);
+
+      if (onCheckedChange) {
+        const checkedIds = Object.keys(newState).filter((key) => newState[key]);
+        onCheckedChange(checkedIds);
+      }
+    },
+    [checkedState, data, onCheckedChange, hierarchicalCheck]
+  );
+
+  const checkIsExpanded = useCallback(
+    (id: string) => !!expandedState[id],
+    [expandedState]
+  );
+
+  const checkIsChecked = useCallback(
+    (id: string) => {
+      if (checkedId) {
+        return checkedId.includes(id);
+      }
+      return !!checkedState[id];
+    },
+    [checkedId, checkedState]
+  );
+
+  const checkIsLoading = useCallback(
+    (id: string) => {
+      if (loadingId) {
+        return loadingId.includes(id);
+      }
+    },
+    [loadingId]
+  );
+
+  return (
+    <div className="w-full">
+      {data.map((item, idx) => (
+        <TreeItem
+          key={item.id}
+          classes={classes}
+          isFirstLevel
+          isLastItem={idx === data.length - 1}
+          checkIsExpanded={checkIsExpanded}
+          checkIsChecked={checkIsChecked}
+          onExpandChange={handleExpandChange}
+          onCheckedChange={handleCheckedChange}
+          checkIsLoading={checkIsLoading}
+          renderIcon={renderIcon}
+          renderElement={renderElement}
+          renderTitle={renderTitle}
+          renderRightSection={renderRightSection}
+          enableSeparatorLine={enableSeparatorLine}
+          disabled={disabled}
+          showIcon={showIcon}
+          {...item}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Tree;

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,231 @@
+import { ActionButton, Checkbox, Loading } from "@/index";
+import { cn } from "@/utils/cn";
+import React, { FC, ReactNode, useCallback, useEffect, useMemo } from "react";
+import Icon from "../Icon/Icon";
+import { TreeItemProps } from "./type";
+
+const TreeItem: FC<TreeItemProps> = ({
+  id,
+  title,
+  classes,
+  children,
+  isFirstLevel = false,
+  disabled,
+  icon,
+  showIcon,
+  showExpandButton,
+  enableSeparatorLine = true,
+  isLastItem,
+  checkIsExpanded,
+  checkIsChecked,
+  checkIsLoading,
+  onExpandChange,
+  onCheckedChange,
+  onClickItem,
+  renderIcon,
+  renderElement,
+  renderTitle,
+  renderRightSection,
+}) => {
+  const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
+  const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
+  const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
+  const hasChildren = useMemo(() => !!children?.length, [children]);
+  const shouldExpandButton = useMemo(
+    () => (showExpandButton !== undefined ? showExpandButton : hasChildren),
+    [hasChildren, showExpandButton]
+  );
+
+  const handleExpandToggle = useCallback(() => {
+    onExpandChange?.(id, !isExpanded);
+  }, [id, isExpanded, onExpandChange]);
+
+  // TODO move to props
+  const lineSize = 2;
+  const horizontalLineWidth = 4;
+  const expandButtonSize = 30;
+  const spacing = 2;
+
+  const styles = {
+    branch: {
+      height: isLastItem
+        ? `calc(50% + ${lineSize}px)`
+        : `calc(100% + ${lineSize}px)`,
+      width: lineSize,
+      marginTop: -lineSize,
+      borderBottomLeftRadius: lineSize / 2,
+    },
+    horizontalLine: {
+      height: lineSize,
+      width:
+        lineSize +
+        horizontalLineWidth +
+        (shouldExpandButton ? 0 : expandButtonSize + spacing),
+      marginLeft: -lineSize + 0.1,
+      borderBottomLeftRadius: lineSize / 2,
+    },
+    expandButton: {
+      width: expandButtonSize,
+      height: expandButtonSize,
+    },
+    childPadding: {
+      paddingLeft: isFirstLevel
+        ? expandButtonSize / 2 - lineSize / 2
+        : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+    },
+  };
+
+  useEffect(() => {
+    if (isExpanded && !isLoading && !hasChildren) {
+      handleExpandToggle();
+    }
+  }, [isLoading, handleExpandToggle]);
+
+  const handleOnClickItem = useCallback(() => {
+    onClickItem?.(id);
+  }, [onClickItem, id]);
+
+  const defaultIcon = (
+    <Icon
+      name={isExpanded ? "folder-open" : "folder"}
+      className="fill-warning"
+    />
+  );
+
+  const customIcon =
+    icon ??
+    renderIcon?.({
+      id,
+      expanded: isExpanded,
+      selected: isChecked,
+    });
+
+  const rightIcon = renderRightSection?.({
+    id,
+    expanded: isExpanded,
+    selected: isChecked,
+  });
+
+  const titleContent = renderTitle
+    ? renderTitle({ id, title, expanded: isExpanded, selected: isChecked })
+    : title;
+
+  const elementWrapper = (content: ReactNode) =>
+    renderElement
+      ? renderElement({
+          id,
+          expanded: isExpanded,
+          selected: isChecked,
+          children: content,
+          styles,
+          onClick: handleOnClickItem,
+        })
+      : content;
+
+  return elementWrapper(
+    <div className={cn("flex flex-row w-full", classes?.elementWrapper)}>
+      <div
+        className={cn("bg-grey-150", { "h-1/2": isLastItem }, classes?.branch)}
+        style={styles.branch}
+      />
+      <div className={cn("flex flex-col w-full", classes?.itemWrapper)}>
+        <div
+          className={cn(
+            "flex items-center py-2 min-h-10",
+            classes?.itemContainer
+          )}
+        >
+          {!isFirstLevel && (
+            <div
+              className={cn("bg-grey-150", classes?.horizontalLine)}
+              style={styles.horizontalLine}
+            />
+          )}
+          {isFirstLevel && !shouldExpandButton && (
+            <div
+              className={cn("flex mr-[2px]", classes?.expandButton)}
+              style={styles.expandButton}
+            />
+          )}
+          {shouldExpandButton && (
+            <div
+              className={cn("flex mr-[2px]", classes?.expandButton)}
+              style={styles.expandButton}
+              onClick={!isLoading && handleExpandToggle}
+            >
+              <ActionButton variant="icon" size="sm">
+                {isLoading ? (
+                  <Loading />
+                ) : (
+                  <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
+                )}
+              </ActionButton>
+            </div>
+          )}
+          <Checkbox
+            id={id}
+            className={cn("size-[16pt]", classes?.checkbox)}
+            checked={isChecked}
+            disabled={disabled}
+            onCheckedChange={(newChecked) =>
+              onCheckedChange?.(id, newChecked as boolean)
+            }
+          />
+          <div
+            className={cn(
+              "ml-2 gap-1 flex flex-1 items-center text-foreground",
+              classes?.item
+            )}
+            onClick={handleOnClickItem}
+          >
+            {showIcon ? customIcon || defaultIcon : null}
+            <div
+              className={cn(
+                "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                classes?.title
+              )}
+            >
+              {titleContent}
+            </div>
+          </div>
+          {rightIcon}
+        </div>
+        {isExpanded && hasChildren && (
+          <div
+            className={cn("flex flex-col", classes?.childrenWrapper)}
+            style={styles.childPadding}
+          >
+            {children?.map((child, idx) => (
+              <TreeItem
+                key={child.id}
+                classes={classes}
+                isLastItem={idx === children.length - 1}
+                checkIsExpanded={checkIsExpanded}
+                checkIsChecked={checkIsChecked}
+                checkIsLoading={checkIsLoading}
+                onExpandChange={onExpandChange}
+                onCheckedChange={onCheckedChange}
+                renderIcon={renderIcon}
+                renderElement={renderElement}
+                renderTitle={renderTitle}
+                disabled={disabled}
+                showIcon={showIcon}
+                {...child}
+              />
+            ))}
+          </div>
+        )}
+        {enableSeparatorLine && isFirstLevel && !isLastItem && (
+          <div
+            className={cn(
+              "bg-grey-150 w-full h-[2px] rounded",
+              classes?.separatorLine
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TreeItem;

package/src/components/Tree/index.ts

@@ -0,0 +1,5 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+
+export * from "./type";
+export { Tree, TreeItem };