@dust-tt/sparkle 0.2.625-rc-1 → 0.2.625

package/src/components/DataTable.tsx

@@ -68,8 +68,8 @@ declare module "@tanstack/react-table" {
 
 interface TBaseData {
   onClick?: () => void;
-  moreMenuItems?: DropdownMenuItemProps[];
   dropdownMenuProps?: React.ComponentPropsWithoutRef<typeof DropdownMenu>;
+  menuItems?: MenuItem[];
 }
 
 interface ColumnBreakpoint {
@@ -286,6 +286,7 @@ export function DataTable<TData extends TBaseData>({
                 onClick={
                   enableRowSelection ? handleRowClick : row.original.onClick
                 }
+                rowData={row.original}
                 {...(enableRowSelection && {
                   "data-selected": row.getIsSelected(),
                 })}
@@ -562,6 +563,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
                   onClick={
                     enableRowSelection ? handleRowClick : row.original.onClick
                   }
+                  rowData={row.original}
                   className="s-absolute s-w-full"
                   {...(enableRowSelection && {
                     "data-selected": row.getIsSelected(),
@@ -716,6 +718,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   onClick?: () => void;
   widthClassName: string;
   "data-selected"?: boolean;
+  rowData?: TBaseData;
 }
 
 DataTable.Row = function Row({
@@ -723,24 +726,70 @@ DataTable.Row = function Row({
   className,
   onClick,
   widthClassName,
+  rowData,
   ...props
 }: RowProps) {
+  const [contextMenuPosition, setContextMenuPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    if (!rowData?.menuItems?.length) {
+      return;
+    }
+
+    event.preventDefault();
+    setContextMenuPosition({ x: event.clientX, y: event.clientY });
+  };
+
   return (
-    <tr
-      className={cn(
-        "s-group/dt-row s-justify-center s-border-b s-transition-colors s-duration-300 s-ease-out",
-        "s-border-separator dark:s-border-separator-night",
-        onClick &&
-          "s-cursor-pointer [&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted dark:[&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted-night",
-        props["data-selected"] && "s-bg-muted/50 dark:s-bg-muted/50",
-        widthClassName,
-        className
+    <>
+      <tr
+        className={cn(
+          "s-group/dt-row s-justify-center s-border-b s-transition-colors s-duration-300 s-ease-out",
+          "s-border-separator dark:s-border-separator-night",
+          onClick &&
+            "s-cursor-pointer [&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted dark:[&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted-night",
+          props["data-selected"] && "s-bg-muted/50 dark:s-bg-muted/50",
+          widthClassName,
+          className
+        )}
+        onClick={onClick || undefined}
+        onContextMenu={handleContextMenu}
+        {...props}
+      >
+        {children}
+      </tr>
+
+      {contextMenuPosition && rowData?.menuItems?.length && (
+        <DropdownMenu
+          open={!!contextMenuPosition}
+          onOpenChange={(open) => !open && setContextMenuPosition(null)}
+          modal={false}
+        >
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              align="start"
+              className="s-whitespace-nowrap"
+              style={{
+                position: "fixed",
+                left: contextMenuPosition?.x || 0,
+                top: contextMenuPosition?.y || 0,
+              }}
+            >
+              <DropdownMenuGroup>
+                {rowData?.menuItems?.map((item, index) =>
+                  renderMenuItem(item, index, () =>
+                    setContextMenuPosition(null)
+                  )
+                )}
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
       )}
-      onClick={onClick || undefined}
-      {...props}
-    >
-      {children}
-    </tr>
+    </>
   );
 };
 
@@ -769,6 +818,71 @@ interface SubmenuMenuItem extends BaseMenuItem {
 
 export type MenuItem = RegularMenuItem | SubmenuMenuItem;
 
+// Shared menu rendering functions
+const renderSubmenuItem = (
+  item: SubmenuMenuItem,
+  index: number,
+  onItemClick?: () => void
+) => (
+  <DropdownMenuSub key={`${item.label}-${index}`}>
+    <DropdownMenuSubTrigger label={item.label} disabled={item.disabled} />
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent>
+        <ScrollArea
+          className="s-min-w-24 s-flex s-max-h-72 s-flex-col"
+          hideScrollBar
+        >
+          {item.items.map((subItem) => (
+            <DropdownMenuItem
+              key={subItem.id}
+              label={subItem.name}
+              onClick={(event) => {
+                event.stopPropagation();
+                item.onSelect(subItem.id);
+                onItemClick?.();
+              }}
+            />
+          ))}
+          <ScrollBar className="s-py-0" />
+        </ScrollArea>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+);
+
+const renderRegularItem = (
+  item: RegularMenuItem,
+  index: number,
+  onItemClick?: () => void
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { kind, ...itemProps } = item;
+  return (
+    <DropdownMenuItem
+      key={`item-${index}`}
+      {...itemProps}
+      onClick={(event) => {
+        event.stopPropagation();
+        itemProps.onClick?.(event);
+        onItemClick?.();
+      }}
+    />
+  );
+};
+
+const renderMenuItem = (
+  item: MenuItem,
+  index: number,
+  onItemClick?: () => void
+) => {
+  switch (item.kind) {
+    case "submenu":
+      return renderSubmenuItem(item, index, onItemClick);
+    case "item":
+      return renderRegularItem(item, index, onItemClick);
+  }
+};
+
 export interface DataTableMoreButtonProps {
   className?: string;
   menuItems?: MenuItem[];
@@ -787,56 +901,6 @@ DataTable.MoreButton = function MoreButton({
     return null;
   }
 
-  const renderSubmenuItem = (item: SubmenuMenuItem, index: number) => (
-    <DropdownMenuSub key={`${item.label}-${index}`}>
-      <DropdownMenuSubTrigger label={item.label} disabled={item.disabled} />
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <ScrollArea
-            className="s-min-w-24 s-flex s-max-h-72 s-flex-col"
-            hideScrollBar
-          >
-            {item.items.map((subItem) => (
-              <DropdownMenuItem
-                key={subItem.id}
-                label={subItem.name}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  item.onSelect(subItem.id);
-                }}
-              />
-            ))}
-            <ScrollBar className="s-py-0" />
-          </ScrollArea>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  );
-
-  const renderRegularItem = (item: RegularMenuItem, index: number) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { kind, ...itemProps } = item;
-    return (
-      <DropdownMenuItem
-        key={`item-${index}`}
-        {...itemProps}
-        onClick={(event) => {
-          event.stopPropagation();
-          itemProps.onClick?.(event);
-        }}
-      />
-    );
-  };
-
-  const renderMenuItem = (item: MenuItem, index: number) => {
-    switch (item.kind) {
-      case "submenu":
-        return renderSubmenuItem(item, index);
-      case "item":
-        return renderRegularItem(item, index);
-    }
-  };
-
   return (
     <DropdownMenu modal={false} {...dropdownMenuProps}>
       <DropdownMenuTrigger
@@ -854,7 +918,9 @@ DataTable.MoreButton = function MoreButton({
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="end">
-        <DropdownMenuGroup>{menuItems.map(renderMenuItem)}</DropdownMenuGroup>
+        <DropdownMenuGroup>
+          {menuItems.map((item, index) => renderMenuItem(item, index))}
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/FaviconIcon.tsx

@@ -0,0 +1,95 @@
+import { cva } from "class-variance-authority";
+import React, { useCallback, useState } from "react";
+
+import { GlobeAltIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
+
+const faviconVariants = cva("", {
+  variants: {
+    size: {
+      sm: "s-w-4 s-h-4",
+      md: "s-w-5 s-h-5",
+      lg: "s-w-6 s-h-6",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+interface FaviconIconProps {
+  faviconUrl?: string;
+  websiteUrl?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+/**
+ * Component that displays a website favicon with fallback to GlobeAltIcon
+ * If faviconUrl is provided, uses that. If websiteUrl is provided, generates favicon URL.
+ * Falls back to GlobeAltIcon if favicon fails to load.
+ */
+export function FaviconIcon({
+  faviconUrl,
+  websiteUrl,
+  size = "sm",
+  className,
+}: FaviconIconProps) {
+  const [hasError, setHasError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleError = useCallback(() => {
+    setHasError(true);
+    setIsLoading(false);
+  }, []);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  // Determine favicon URL
+  let finalFaviconUrl = faviconUrl;
+  if (!finalFaviconUrl && websiteUrl) {
+    try {
+      const domain = new URL(websiteUrl).hostname;
+      finalFaviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
+    } catch {
+      // Invalid URL, fallback to icon
+    }
+  }
+
+  // If no favicon URL or it failed to load, show fallback icon
+  if (!finalFaviconUrl || hasError) {
+    return <GlobeAltIcon className={className} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        "s-flex s-items-center s-justify-center s-relative",
+        faviconVariants({ size }),
+        className
+      )}
+    >
+      <img
+        src={finalFaviconUrl}
+        alt="Website icon"
+        className={cn("s-object-contain", faviconVariants({ size }))}
+        onError={handleError}
+        onLoad={handleLoad}
+        style={{
+          opacity: isLoading ? 0 : 1,
+          transition: "opacity 0.2s ease-in-out",
+        }}
+      />
+      {(isLoading || hasError) && (
+        <GlobeAltIcon
+          className={cn(
+            faviconVariants({ size }),
+            isLoading ? "s-absolute s-inset-0" : "s-hidden"
+          )}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -93,6 +93,7 @@ export { default as DropzoneOverlay } from "./DropzoneOverlay";
 export type { EmojiMartData } from "./EmojiPicker";
 export { DataEmojiMart, EmojiPicker } from "./EmojiPicker";
 export { EmptyCTA, EmptyCTAButton } from "./EmptyCTA";
+export { FaviconIcon } from "./FaviconIcon";
 export { FilterChips } from "./FilterChips";
 export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";

package/src/stories/Citation.stories.tsx

@@ -13,6 +13,7 @@ import {
   CitationTitle,
   DocumentIcon,
   ExternalLinkIcon,
+  FaviconIcon,
   GlobeAltIcon,
   Icon,
   ImageIcon,
@@ -69,10 +70,17 @@ export const CitationsExample = () => (
       </Citation>
       <Citation onClick={() => alert("Card clicked")} className="s-w-48">
         <CitationIcons>
-          <Icon visual={GlobeAltIcon} size="sm" />
+          <FaviconIcon websiteUrl="https://www.linkedin.com" size="sm" />
         </CitationIcons>
         <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
       </Citation>
+      
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <FaviconIcon websiteUrl="https://github.com" size="sm" />
+        </CitationIcons>
+        <CitationTitle>GitHub Repository</CitationTitle>
+      </Citation>
 
       <Citation onClick={() => alert("Card clicked")} className="s-w-48">
         <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
@@ -183,9 +191,16 @@ export const CitationsExample = () => (
       <Citation onClick={() => alert("Close action clicked")}>
         <CitationIcons>
           <CitationIndex>4</CitationIndex>
-          <Icon visual={GlobeAltIcon} size="sm" />
+          <FaviconIcon websiteUrl="https://stackoverflow.com" size="sm" />
         </CitationIcons>
-        <CitationTitle>Hello</CitationTitle>
+        <CitationTitle>Stack Overflow Answer</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Close action clicked")}>
+        <CitationIcons>
+          <CitationIndex>5</CitationIndex>
+          <FaviconIcon websiteUrl="https://www.wikipedia.org" size="sm" />
+        </CitationIcons>
+        <CitationTitle>Wikipedia Article</CitationTitle>
       </Citation>
     </CitationGrid>
     Example of interactive content (list variant)