@dust-tt/sparkle 0.2.210-rc74 → 0.2.210

package/src/components/Tree.tsx

@@ -1,6 +1,12 @@
-import React, { ComponentType, ReactNode, useState } from "react";
-
-import { ArrowDownSIcon, ArrowRightSIcon, Spinner } from "@sparkle/index";
+import React, { useState } from "react";
+
+import {
+  ChatBubbleBottomCenterText,
+  DocumentText,
+  Folder,
+  Square3Stack3D,
+} from "@sparkle/icons/stroke";
+import { ChevronDownIcon, ChevronRightIcon, Spinner } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
@@ -8,25 +14,12 @@ import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 
 export interface TreeProps {
-  children?: ReactNode;
+  children?: React.ReactNode;
   isBoxed?: boolean;
   isLoading?: boolean;
-  variant?: "navigator" | "finder";
 }
 
-export function Tree({
-  children,
-  isLoading,
-  isBoxed = false,
-  variant = "finder",
-}: TreeProps) {
-  const modifiedChildren = React.Children.map(children, (child) => {
-    if (React.isValidElement<TreeItemProps>(child) && variant === "navigator") {
-      return React.cloneElement(child, { isNavigatable: true });
-    }
-    return child;
-  });
-
+export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
       <Spinner size="xs" variant="dark" />
@@ -40,16 +33,24 @@ export function Tree({
           : ""
       )}
     >
-      {modifiedChildren}
+      {children}
     </div>
   );
 }
 
+const visualTable = {
+  file: DocumentText,
+  folder: Folder,
+  database: Square3Stack3D,
+  channel: ChatBubbleBottomCenterText,
+};
+
 interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
+  variant?: "file" | "folder" | "database" | "channel";
   size?: "sm" | "md";
-  visual?: ComponentType<{ className?: string }>;
+  visual?: React.ReactNode;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
   collapsed?: boolean;
@@ -57,7 +58,6 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
-  isNavigatable?: boolean;
   isSelected?: boolean;
   onItemClick?: () => void;
 }
@@ -76,6 +76,7 @@ Tree.Item = function ({
   label,
   type = "node",
   className = "",
+  variant = "file",
   size = "sm",
   visual,
   checkbox,
@@ -86,7 +87,6 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
-  isNavigatable = false,
   isSelected = false,
   onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -111,34 +111,16 @@ Tree.Item = function ({
 
   const childrenToRender = getChildren();
 
-  const treeItemStyleClasses = {
-    base: "s-group s-flex s-cursor-default s-flex-row s-items-center",
-    isNavigatableBase:
-      "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
-    isNavigatableUnselected:
-      "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
-    isNavigatableSelected: "s-border-structure-200 s-bg-white",
-  };
-
   return (
     <>
       <div
         className={classNames(
           className ? className : "",
-          treeItemStyleClasses.base,
+          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
+          size === "sm" ? "s-py-1" : "s-py-2",
           onItemClick ? "s-cursor-pointer" : "",
-          isNavigatable ? treeItemStyleClasses.isNavigatableBase : "",
-          isNavigatable
-            ? size === "sm"
-              ? "s-gap-1 s-rounded-lg s-py-1 s-pl-1.5 s-pr-3"
-              : "s-gap-2 s-rounded-lg s-py-2 s-pl-2.5 s-pr-4"
-            : size === "sm"
-              ? "s-gap-1 s-py-1"
-              : "s-gap-2 s-py-2",
-          isNavigatable
-            ? isSelected
-              ? treeItemStyleClasses.isNavigatableSelected
-              : treeItemStyleClasses.isNavigatableUnselected
+          isSelected
+            ? "s-rounded-md s-border s-border-neutral-200 s-bg-white"
             : ""
         )}
         onClick={onItemClick ? onItemClick : undefined}
@@ -147,10 +129,10 @@ Tree.Item = function ({
           <IconButton
             icon={
               childrenToRender && !effectiveCollapsed
-                ? ArrowDownSIcon
-                : ArrowRightSIcon
+                ? ChevronDownIcon
+                : ChevronRightIcon
             }
-            size="xs"
+            size="sm"
             variant="secondary"
             onClick={(e) => {
               e.stopPropagation();
@@ -161,37 +143,50 @@ Tree.Item = function ({
           />
         )}
         {type === "leaf" && <div className="s-w-5"></div>}
-        {checkbox && <Checkbox {...checkbox} size="xs" />}
-        <Icon
-          visual={visual}
-          size={size === "sm" ? "sm" : "md"}
-          className="s-flex-shrink-0 s-text-element-600"
-        />
-
-        <div
-          className={classNames(
-            "s-truncate s-font-medium s-text-element-900",
-            size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base"
-          )}
-        >
-          {label}
-        </div>
-        <div className="s-grow" />
-        {actions && (
+        {checkbox && <Checkbox {...checkbox} />}
+
+        <div className="s-flex s-w-full s-items-center">
           <div
             className={classNames(
-              "s-flex s-gap-2 s-pl-4",
-              areActionsFading
-                ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
-                : ""
+              "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
+              size === "sm" ? "s-gap-1.5" : "s-gap-2"
             )}
           >
-            {actions}
+            {visual ? (
+              visual
+            ) : (
+              <Icon
+                visual={visualTable[variant]}
+                size="sm"
+                className="s-flex-shrink-0 s-text-element-700"
+              />
+            )}
+
+            <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={classNames(
+                  "s-inline-block s-pl-5",
+                  areActionsFading
+                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                    : ""
+                )}
+              >
+                {actions}
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </div>
       {React.Children.count(childrenToRender) > 0 && (
-        <div className="s-pl-2.5">{childrenToRender}</div>
+        <div className="s-pl-5">{childrenToRender}</div>
       )}
     </>
   );

package/src/components/WindowUtility.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+// Define breakpoints
+export const breakpoints = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+};
+
+// Helper function to determine active breakpoint
+function getActiveBreakpoint(width: number): keyof typeof breakpoints {
+  if (width >= breakpoints.xxl) {
+    return "xxl";
+  }
+  if (width >= breakpoints.xl) {
+    return "xl";
+  }
+  if (width >= breakpoints.lg) {
+    return "lg";
+  }
+  if (width >= breakpoints.md) {
+    return "md";
+  }
+  if (width >= breakpoints.sm) {
+    return "sm";
+  }
+  return "xs";
+}
+
+
+interface WindowSizeState {
+  width: number | undefined;
+  height: number | undefined;
+  activeBreakpoint: keyof typeof breakpoints;
+}
+
+// Custom hook to get window size and active breakpoint
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSizeState>({
+    width: undefined,
+    height: undefined,
+    activeBreakpoint: "xs"
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      const width = window.innerWidth;
+      setWindowSize({
+        width,
+        height: window.innerHeight,
+        activeBreakpoint: getActiveBreakpoint(width),
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export default useWindowSize;

package/src/icons/solid/index.ts

@@ -1,15 +1,11 @@
 export { default as ArrowDown } from "./ArrowDown";
 export { default as ArrowDownCircle } from "./ArrowDownCircle";
 export { default as ArrowDownOnSquare } from "./ArrowDownOnSquare";
-export { default as ArrowDownS } from "./ArrowDownS";
 export { default as ArrowLeft } from "./ArrowLeft";
-export { default as ArrowLeftS } from "./ArrowLeftS";
 export { default as ArrowPath } from "./ArrowPath";
 export { default as ArrowRight } from "./ArrowRight";
-export { default as ArrowRightS } from "./ArrowRightS";
 export { default as ArrowUp } from "./ArrowUp";
 export { default as ArrowUpOnSquare } from "./ArrowUpOnSquare";
-export { default as ArrowUpS } from "./ArrowUpS";
 export { default as Attachment } from "./Attachment";
 export { default as Backspace } from "./Backspace";
 export { default as Bookmark } from "./Bookmark";
@@ -22,8 +18,6 @@ export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
 export { default as ChatBubbleThought } from "./ChatBubbleThought";
 export { default as Check } from "./Check";
 export { default as CheckCircle } from "./CheckCircle";
-export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft";
-export { default as ChevronDoubleRight } from "./ChevronDoubleRight";
 export { default as ChevronDown } from "./ChevronDown";
 export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
@@ -40,7 +34,6 @@ export { default as CloudX } from "./CloudX";
 export { default as Cog6Tooth } from "./Cog6Tooth";
 export { default as Command } from "./Command";
 export { default as CommandLine } from "./CommandLine";
-export { default as Company } from "./Company";
 export { default as Cube } from "./Cube";
 export { default as Dash } from "./Dash";
 export { default as Document } from "./Document";
@@ -55,7 +48,6 @@ export { default as ExclamationCircle } from "./ExclamationCircle";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Eye } from "./Eye";
 export { default as EyeSlash } from "./EyeSlash";
-export { default as Filter } from "./Filter";
 export { default as Fire } from "./Fire";
 export { default as Flag } from "./Flag";
 export { default as Folder } from "./Folder";
@@ -66,11 +58,8 @@ export { default as GlobeAlt } from "./GlobeAlt";
 export { default as Grab } from "./Grab";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
-export { default as Heart } from "./Heart";
 export { default as HeartAlt } from "./HeartAlt";
 export { default as Hexagon } from "./Hexagon";
-export { default as History } from "./History";
-export { default as Home } from "./Home";
 export { default as Image } from "./Image";
 export { default as InformationCircle } from "./InformationCircle";
 export { default as Key } from "./Key";
@@ -85,7 +74,6 @@ export { default as Login } from "./Login";
 export { default as Logout } from "./Logout";
 export { default as Magic } from "./Magic";
 export { default as MagnifyingGlass } from "./MagnifyingGlass";
-export { default as MarkPen } from "./MarkPen";
 export { default as Menu } from "./Menu";
 export { default as More } from "./More";
 export { default as MovingMail } from "./MovingMail";
@@ -118,7 +106,6 @@ export { default as Tag } from "./Tag";
 export { default as Template } from "./Template";
 export { default as TestTube } from "./TestTube";
 export { default as Time } from "./Time";
-export { default as Translate } from "./Translate";
 export { default as Trash } from "./Trash";
 export { default as Triangle } from "./Triangle";
 export { default as User } from "./User";
@@ -128,4 +115,3 @@ export { default as UserPlus } from "./UserPlus";
 export { default as Wrench } from "./Wrench";
 export { default as XCircle } from "./XCircle";
 export { default as XMark } from "./XMark";
-

package/src/icons/stroke/index.ts

@@ -1,15 +1,11 @@
 export { default as ArrowDown } from "./ArrowDown";
 export { default as ArrowDownCircle } from "./ArrowDownCircle";
 export { default as ArrowDownOnSquare } from "./ArrowDownOnSquare";
-export { default as ArrowDownS } from "./ArrowDownS";
 export { default as ArrowLeft } from "./ArrowLeft";
-export { default as ArrowLeftS } from "./ArrowLeftS";
 export { default as ArrowPath } from "./ArrowPath";
 export { default as ArrowRight } from "./ArrowRight";
-export { default as ArrowRightS } from "./ArrowRightS";
 export { default as ArrowUp } from "./ArrowUp";
 export { default as ArrowUpOnSquare } from "./ArrowUpOnSquare";
-export { default as ArrowUpS } from "./ArrowUpS";
 export { default as Attachment } from "./Attachment";
 export { default as Backspace } from "./Backspace";
 export { default as Bookmark } from "./Bookmark";
@@ -22,8 +18,6 @@ export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
 export { default as ChatBubbleThought } from "./ChatBubbleThought";
 export { default as Check } from "./Check";
 export { default as CheckCircle } from "./CheckCircle";
-export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft";
-export { default as ChevronDoubleRight } from "./ChevronDoubleRight";
 export { default as ChevronDown } from "./ChevronDown";
 export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
@@ -40,7 +34,6 @@ export { default as CloudX } from "./CloudX";
 export { default as Cog6Tooth } from "./Cog6Tooth";
 export { default as Command } from "./Command";
 export { default as CommandLine } from "./CommandLine";
-export { default as Company } from "./Company";
 export { default as Cube } from "./Cube";
 export { default as Dash } from "./Dash";
 export { default as Document } from "./Document";
@@ -55,7 +48,6 @@ export { default as ExclamationCircle } from "./ExclamationCircle";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Eye } from "./Eye";
 export { default as EyeSlash } from "./EyeSlash";
-export { default as Filter } from "./Filter";
 export { default as Fire } from "./Fire";
 export { default as Flag } from "./Flag";
 export { default as Folder } from "./Folder";
@@ -66,11 +58,8 @@ export { default as GlobeAlt } from "./GlobeAlt";
 export { default as Grab } from "./Grab";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
-export { default as Heart } from "./Heart";
 export { default as HeartAlt } from "./HeartAlt";
 export { default as Hexagon } from "./Hexagon";
-export { default as History } from "./History";
-export { default as Home } from "./Home";
 export { default as Image } from "./Image";
 export { default as InformationCircle } from "./InformationCircle";
 export { default as Key } from "./Key";
@@ -85,7 +74,6 @@ export { default as Login } from "./Login";
 export { default as Logout } from "./Logout";
 export { default as Magic } from "./Magic";
 export { default as MagnifyingGlass } from "./MagnifyingGlass";
-export { default as MarkPen } from "./MarkPen";
 export { default as Menu } from "./Menu";
 export { default as More } from "./More";
 export { default as MovingMail } from "./MovingMail";
@@ -118,7 +106,6 @@ export { default as Tag } from "./Tag";
 export { default as Template } from "./Template";
 export { default as TestTube } from "./TestTube";
 export { default as Time } from "./Time";
-export { default as Translate } from "./Translate";
 export { default as Trash } from "./Trash";
 export { default as Triangle } from "./Triangle";
 export { default as User } from "./User";

package/src/stories/Checkbox.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 
 import { Checkbox } from "../index_with_tw_base";
 
@@ -10,67 +9,6 @@ const meta = {
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const CheckBoxExample = () => {
-  // No-op function for onChange
-  const handleChange = () => {
-    // This function intentionally left blank
-  };
-
-  return (
-    <div className="s-flex s-flex-col s-gap-10">
-      SM
-      <div className="s-flex s-gap-10">
-        Selectable
-        <Checkbox variant="selectable" onChange={handleChange} />
-        <Checkbox checked variant="selectable" onChange={handleChange} />
-        <Checkbox
-          checked="partial"
-          variant="selectable"
-          onChange={handleChange}
-        />
-        Checkable
-        <Checkbox variant="checkable" onChange={handleChange} />
-        <Checkbox checked variant="checkable" onChange={handleChange} />
-        <Checkbox
-          checked="partial"
-          variant="checkable"
-          onChange={handleChange}
-        />
-      </div>
-      XS
-      <div className="s-flex s-gap-10">
-        Selectable
-        <Checkbox size="xs" variant="selectable" onChange={handleChange} />
-        <Checkbox
-          size="xs"
-          checked
-          variant="selectable"
-          onChange={handleChange}
-        />
-        <Checkbox
-          size="xs"
-          checked="partial"
-          variant="selectable"
-          onChange={handleChange}
-        />
-        Checkable
-        <Checkbox size="xs" variant="checkable" onChange={handleChange} />
-        <Checkbox
-          size="xs"
-          checked
-          variant="checkable"
-          onChange={handleChange}
-        />
-        <Checkbox
-          size="xs"
-          checked="partial"
-          variant="checkable"
-          onChange={handleChange}
-        />
-      </div>
-    </div>
-  );
-};
 
 export const Selectable: Story = {
   args: {
@@ -94,7 +32,8 @@ export const Unchecked: Story = {
 
 export const PartialChecked: Story = {
   args: {
-    checked: "partial",
+    checked: false,
+    partialChecked: true,
     variant: "checkable",
   },
 };