[chore] - sparkle: enhance Tree component (#6606)

* Updating tree to accomodate to bigger tree element sizes * Changing copy * [sparkle] - feature: bump version to 0.2.196 - Increment package version for release of new features or fixes - Ensure consistency across package-lock.json and package.json files * [sparkle] - refactor: update Tree component to accept ReactNode for visuals - Changed the `visual` prop type from `ComponentType` to `React.ReactNode` to allow for direct JSX elements - Updated `Tree.stories.tsx` to pass JSX elements directly instead of as references to components * [sparkle] - refactor: remove unused ComponentType import from Tree component - Cleaned up Tree.tsx by removing an unused import to streamline the component's dependencies --------- Co-authored-by: Edouard Wautier <[email protected]> Co-authored-by: Jules <[email protected]>
dust-tt · Jul 31, 2024 · 5752de8 · 5752de8
1 parent acdbd67
commit 5752de8
Show file tree

Hide file tree

Showing 4 changed files with 260 additions and 18 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.195",
+  "version": "0.2.196",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
@@ -49,13 +49,15 @@ interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
   variant?: "file" | "folder" | "database" | "channel";
+  size?: "sm" | "md";
   visual?: React.ReactNode;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   className?: string;
   actions?: React.ReactNode;
+  areActionsFading?: boolean;
 }
 
 export interface TreeItemPropsWithChildren extends TreeItemProps {
@@ -73,12 +75,14 @@ Tree.Item = function ({
   type = "node",
   className = "",
   variant = "file",
+  size = "sm",
   visual,
   checkbox,
   onChevronClick,
   collapsed,
   defaultCollapsed,
   actions,
+  areActionsFading = true,
   renderTreeItems,
   children,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -108,7 +112,8 @@ Tree.Item = function ({
       <div
         className={classNames(
           className ? className : "",
-          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4 s-py-1"
+          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
+          size === "sm" ? "s-py-1" : "s-py-2"
         )}
       >
         {type === "node" && (
@@ -126,8 +131,13 @@ Tree.Item = function ({
         {type === "leaf" && <div className="s-w-5"></div>}
         {checkbox && <Checkbox {...checkbox} />}
 
-        <div className="s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
-          <div className="s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
+        <div className="s-flex s-w-full s-items-center">
+          <div
+            className={classNames(
+              "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
+              size === "sm" ? "s-gap-1.5" : "s-gap-2"
+            )}
+          >
             {visual ? (
               visual
             ) : (
@@ -138,9 +148,23 @@ Tree.Item = function ({
               />
             )}
 
-            <div className="s-truncate">{label}</div>
+            <div
+              className={classNames(
+                "s-truncate s-font-medium s-text-element-900",
+                size === "sm" ? "s-text-sm" : "s-text-base"
+              )}
+            >
+              {label}
+            </div>
             {actions && (
-              <div className="s-inline-block s-transform s-pl-5 s-opacity-0 s-duration-300 group-hover:s-opacity-100">
+              <div
+                className={classNames(
+                  "s-inline-block s-pl-5",
+                  areActionsFading
+                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                    : ""
+                )}
+              >
                 {actions}
               </div>
             )}