@rovula/ui 0.0.48 → 0.0.50

package/src/components/Tree/Tree.tsx

@@ -1,170 +1,26 @@
-import { ActionButton, Checkbox, Icon, Loading, cn } from "@/index";
-import React, {
-  FC,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-  useEffect,
-} from "react";
+import React, { FC, useCallback, useEffect, useState } from "react";
+import TreeItem from "./TreeItem";
+import { TreeData, TreeProps } from "./type";
 
-export type TreeData = {
-  id: string;
-  title: string;
-  icon?: ReactNode;
-  children?: TreeData[];
-};
-
-export interface TreeItemProps extends TreeData {
-  isFirstLevel?: boolean;
-  isLastItem: boolean;
-  checkIsExpanded: (id: string) => boolean;
-  checkIsChecked: (id: string) => boolean;
-  onExpandChange?: (id: string, expanded: boolean) => void;
-  onCheckedChange?: (id: string, checked: boolean) => void;
-}
-
-const TreeItem: FC<TreeItemProps> = ({
-  id,
-  title,
-  children,
-  isFirstLevel = false,
-  isLastItem,
-  checkIsExpanded,
-  checkIsChecked,
-  onExpandChange,
-  onCheckedChange,
-}) => {
-  const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
-  const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
-  const hasChildren = useMemo(() => !!children?.length, [children]);
-
-  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 +
-        (hasChildren ? 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,
-    },
-  };
-
-  return (
-    <div className="flex flex-row w-full">
-      <div
-        className={cn("bg-grey-150", { "h-1/2": isLastItem })}
-        style={styles.branch}
-      />
-      <div className="flex flex-col w-full">
-        <div className="flex items-center py-2 min-h-10">
-          {!isFirstLevel && (
-            <div className="bg-grey-150" style={styles.horizontalLine} />
-          )}
-
-          {isFirstLevel && !hasChildren && (
-            <div className="flex mr-[2px]" style={styles.expandButton} />
-          )}
-
-          {hasChildren && (
-            <div className="flex mr-[2px]" style={styles.expandButton}>
-              <ActionButton
-                variant="icon"
-                size="sm"
-                onClick={handleExpandToggle}
-              >
-                <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
-              </ActionButton>
-            </div>
-          )}
-          <Checkbox
-            id={id}
-            className="size-[16pt]"
-            checked={isChecked}
-            onCheckedChange={(newChecked) =>
-              onCheckedChange?.(id, newChecked as boolean)
-            }
-          />
-          <div className="ml-2 gap-1 flex items-center text-foreground">
-            <Icon
-              name={isExpanded ? "folder-open" : "folder"}
-              className="fill-warning"
-            />
-            <label
-              htmlFor={id}
-              className="flex-1 cursor-pointer text-subtitle5 text-ellipsis"
-            >
-              {title}
-            </label>
-          </div>
-        </div>
-        {isExpanded && hasChildren && (
-          <div className="flex flex-col" style={styles.childPadding}>
-            {children?.map((child, idx) => (
-              <TreeItem
-                key={child.id}
-                {...child}
-                isLastItem={idx === children.length - 1}
-                checkIsExpanded={checkIsExpanded}
-                checkIsChecked={checkIsChecked}
-                onExpandChange={onExpandChange}
-                onCheckedChange={onCheckedChange}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-export type TreeProps = {
-  data: TreeData[];
-  defaultExpandedId?: string[];
-  defaultCheckedId?: string[];
-  checkedId?: string[];
-  onCheckedChange?: (checkedId: string[]) => void;
-  defaultExpandAll?: boolean;
-  defaultCheckAll?: boolean;
-  hierarchicalCheck?: boolean;
-};
-
-export const Tree: FC<TreeProps> = ({
+const Tree: FC<TreeProps> = ({
+  classes,
   data,
-  defaultExpandedId = [],
-  defaultCheckedId = [],
+  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>>(
@@ -184,13 +40,13 @@ export const Tree: FC<TreeProps> = ({
   };
 
   useEffect(() => {
-    if (defaultExpandAll) {
+    if (data.length && defaultExpandAll) {
       const allExpanded: Record<string, boolean> = {};
       traverseTree(data, (node) => {
         allExpanded[node.id] = true;
       });
       setExpandedState(allExpanded);
-    } else {
+    } else if (defaultExpandedId?.length) {
       const initialExpandedState = defaultExpandedId.reduce((acc, id) => {
         acc[id] = true;
         return acc;
@@ -200,24 +56,31 @@ export const Tree: FC<TreeProps> = ({
   }, [data, defaultExpandedId, defaultExpandAll]);
 
   useEffect(() => {
-    if (defaultCheckAll) {
+    if (data.length && defaultCheckAll) {
       const allChecked: Record<string, boolean> = {};
       traverseTree(data, (node) => {
         allChecked[node.id] = true;
       });
       setCheckedState(allChecked);
-    } else if (!checkedId) {
+    } else if (
+      Object.keys(checkedState)?.length === 0 &&
+      defaultCheckedId?.length
+    ) {
       const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
         acc[id] = true;
         return acc;
       }, {} as Record<string, boolean>);
       setCheckedState(initialCheckedState);
     }
-  }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+  }, [data, defaultCheckedId, defaultCheckAll]);
 
-  const handleExpandChange = useCallback((id: string, expanded: boolean) => {
-    setExpandedState((prev) => ({ ...prev, [id]: expanded }));
-  }, []);
+  const handleExpandChange = useCallback(
+    (id: string, expanded: boolean) => {
+      onExpandChange?.(id, expanded);
+      setExpandedState((prev) => ({ ...prev, [id]: expanded }));
+    },
+    [onExpandChange]
+  );
 
   const handleCheckedChange = useCallback(
     (id: string, checked: boolean) => {
@@ -293,39 +156,40 @@ export const Tree: FC<TreeProps> = ({
     [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}
-          {...item}
+          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>
   );
 };
-/**
- * TODO
- * -----
- * - Custom style
- * - Custom icon, elm and render props -> callback with selected*expanded
- * - OnClick item
- * - OnClick expandButton
- * - disabled props
- * - right section icon
- * - props for show icon, line
- * - props for render item
- * - OnLoad mode
- * -----
- *  - props onLoad item
- *  - props for hasChildren * for check to trigger on load
- *  - animate expand
- *  - check duplicate reversive on updateChildren
- *  - write storybook
- */
+
+export default Tree;

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,232 @@
+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 && !(isExpanded && hasChildren)
+          ? `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", 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 };

package/src/components/Tree/type.ts

@@ -0,0 +1,90 @@
+import { CSSProperties, ReactNode } from "react";
+
+export type TreeData = {
+  id: string;
+  title: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClickItem?: (id: string) => void;
+  children?: TreeData[];
+  renderIcon?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+};
+
+export interface TreeItemProps extends TreeData {
+  isFirstLevel?: boolean;
+  isLastItem: boolean;
+  disabled?: boolean;
+  showIcon?: boolean;
+  showExpandButton?: boolean;
+  enableSeparatorLine?: boolean;
+  checkIsExpanded: (id: string) => boolean;
+  checkIsChecked: (id: string) => boolean;
+  checkIsLoading?: (id: string) => void;
+  onExpandChange?: (id: string, expanded: boolean) => void;
+  onCheckedChange?: (id: string, checked: boolean) => void;
+  renderRightSection?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+  renderElement?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+    children: ReactNode;
+    styles: {
+      branch: CSSProperties;
+      horizontalLine: CSSProperties;
+      expandButton: CSSProperties;
+      childPadding: CSSProperties;
+    };
+    onClick?: TreeItemProps["onClickItem"];
+  }) => ReactNode;
+  renderTitle?: (params: {
+    id: string;
+    title: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+  classes?: Partial<{
+    elementWrapper: string;
+    branch: string;
+    itemWrapper: string;
+    itemContainer: string;
+    horizontalLine: string;
+    expandButton: string;
+    separatorLine: string;
+    checkbox: string;
+    item: string;
+    title: string;
+    childrenWrapper: string;
+  }>;
+}
+
+export interface TreeProps
+  extends Pick<
+    TreeItemProps,
+    | "renderIcon"
+    | "renderRightSection"
+    | "renderElement"
+    | "renderTitle"
+    | "showIcon"
+    | "disabled"
+    | "enableSeparatorLine"
+    | "classes"
+  > {
+  data: TreeData[];
+  defaultExpandedId?: string[];
+  defaultCheckedId?: string[];
+  checkedId?: string[];
+  loadingId?: string[];
+  onExpandChange?: (id: string, expanded: boolean) => void;
+  onCheckedChange?: (checkedId: string[]) => void;
+  defaultExpandAll?: boolean;
+  defaultCheckAll?: boolean;
+  hierarchicalCheck?: boolean;
+}

package/src/index.ts

@@ -39,6 +39,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";