@dust-tt/sparkle 0.2.203 → 0.2.204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.203",
+  "version": "0.2.204",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/Tree.tsx

@@ -58,6 +58,8 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
+  isSelected?: boolean;
+  onItemClick?: () => void;
 }
 
 export interface TreeItemPropsWithChildren extends TreeItemProps {
@@ -85,6 +87,8 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
+  isSelected = false,
+  onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
   const [collapsedState, setCollapsedState] = useState<boolean>(
     defaultCollapsed ?? true
@@ -113,8 +117,13 @@ Tree.Item = function ({
         className={classNames(
           className ? className : "",
           "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
-          size === "sm" ? "s-py-1" : "s-py-2"
+          size === "sm" ? "s-py-1" : "s-py-2",
+          onItemClick ? "s-cursor-pointer" : "",
+          isSelected
+            ? "s-rounded-md s-border s-border-neutral-200 s-bg-white"
+            : ""
         )}
+        onClick={onItemClick ? onItemClick : undefined}
       >
         {type === "node" && (
           <IconButton
@@ -125,7 +134,12 @@ Tree.Item = function ({
             }
             size="sm"
             variant="secondary"
-            onClick={effectiveOnChevronClick}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (effectiveOnChevronClick) {
+                effectiveOnChevronClick();
+              }
+            }}
           />
         )}
         {type === "leaf" && <div className="s-w-5"></div>}

package/src/stories/Tree.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
-import { v4 as uuidv4 } from "uuid";
 
 import { Dust } from "@sparkle/icons/solid";
 
@@ -33,7 +32,7 @@ export const TreeExample = () => {
           <div className="s-text-xl">Tree</div>
           <div>
             <Tree isBoxed>
-              <Tree.Item label="item 1 (no children)" variant="folder" />
+              <Tree.Item label="item 1 (no children)" variant="folder" isSelected={true}/>
               <Tree.Item label="item 2 (loading)" variant="folder">
                 <Tree isLoading />
               </Tree.Item>
@@ -586,11 +585,76 @@ export const TreeExample = () => {
             </Tree>
           </div>
         </div>
+        <DummyNavBar/>
       </div>
     </div>
   );
 };
 
+export const DummyNavBar = () => {
+  return <div className="s-flex s-flex-col s-gap-3">
+    <div className="s-text-xl">Nav bar</div>
+    <div>
+      <Tree isBoxed>
+        <Tree.Item
+          label="Intercom"
+          visual={<IntercomLogo />}
+          onItemClick={() => console.log("Clickable")}
+          isSelected={true}
+        >
+          <Tree>
+            <Tree.Item
+              type="leaf"
+              label="item 1"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 2"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 3"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+          </Tree>
+        </Tree.Item>
+        <Tree.Item
+          label="Notion"
+          visual={<NotionLogo />}
+        />
+        <Tree.Item
+          label="Slack"
+          visual={<SlackLogo />}
+        />
+        <Tree.Item
+          label="Dust"
+          visual={<Dust />}
+        />
+      </Tree>
+    </div>
+  </div>;
+}
+
 export const SelectDataSourceExample = () => {
   return (
     <div className="s-flex s-w-full s-flex-col s-gap-10">
@@ -838,30 +902,4 @@ const createTreeItems = (n = 5, getLabel: () => string) => {
   }
 
   return <Tree>{items}</Tree>;
-};
-
-export const DeeplyNestedTreeWithActions = () => {
-  const getLabel = () =>
-    `${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}`;
-  return (
-    <div className="s-mx-auto s-max-w-2xl s-gap-3 s-pt-10">
-      <div className="s-pb-10 s-text-xl">Huge</div>
-      <div>
-        <Tree>{createTreeItems(20, getLabel)}</Tree>
-      </div>
-    </div>
-  );
-};
-
-export const SmallTreeWithActions = () => {
-  const getLabel = () =>
-    `${uuidv4().slice(0, Math.floor(Math.random() * 32) + 3)}`;
-  return (
-    <div className="s-mx-auto s-max-w-2xl s-gap-3 s-pt-10">
-      <div className="s-pb-10 s-text-xl">Huge</div>
-      <div>
-        <Tree>{createTreeItems(5, getLabel)}</Tree>
-      </div>
-    </div>
-  );
-};
+};