@dust-tt/sparkle 0.4.22 → 0.4.24

package/src/stories/Dropdown.stories.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuFilters,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
@@ -845,3 +846,84 @@ export const WithTags: Story = {
     );
   },
 };
+
+export const WithFilters: Story = {
+  render: () => {
+    const [selectedFilter, setSelectedFilter] = useState<string | null>("all");
+    const [searchText, setSearchText] = useState("");
+
+    const filters = [
+      { label: "All", value: "all" },
+      { label: "Documents", value: "documents" },
+      { label: "Images", value: "images" },
+      { label: "Videos", value: "videos" },
+    ];
+
+    const allItems = [
+      { name: "Project Proposal.pdf", type: "documents", icon: DocumentIcon },
+      { name: "Q4 Report.docx", type: "documents", icon: DocumentIcon },
+      { name: "Team Photo.jpg", type: "images", icon: FolderIcon },
+      { name: "Logo Design.png", type: "images", icon: FolderIcon },
+      { name: "Product Demo.mp4", type: "videos", icon: FolderIcon },
+      { name: "Tutorial.mov", type: "videos", icon: FolderIcon },
+      { name: "Budget 2024.xlsx", type: "documents", icon: DocumentIcon },
+      { name: "Banner.svg", type: "images", icon: FolderIcon },
+    ];
+
+    const filteredItems =
+      selectedFilter === "all"
+        ? allItems
+        : allItems.filter((item) => item.type === selectedFilter);
+
+    const searchFilteredItems = filteredItems.filter((item) =>
+      item.name.includes(searchText)
+    );
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            label={`Files (${filteredItems.length})`}
+            icon={FolderIcon}
+            variant="outline"
+            size="sm"
+            isSelect
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="s-w-[320px]"
+          dropdownHeaders={
+            <>
+              <DropdownMenuSearchbar
+                value={searchText}
+                onChange={setSearchText}
+                name="search"
+              />
+              <DropdownMenuFilters
+                filters={filters}
+                selectedValues={selectedFilter ? [selectedFilter] : []}
+                onSelectFilter={setSelectedFilter}
+              />
+            </>
+          }
+        >
+          <DropdownMenuSeparator />
+          {searchFilteredItems.length > 0 ? (
+            searchFilteredItems.map((item) => (
+              <DropdownMenuItem
+                key={item.name}
+                label={item.name}
+                icon={item.icon}
+                onClick={() => console.log("Selected:", item.name)}
+              />
+            ))
+          ) : (
+            <div className="s-flex s-h-24 s-items-center s-justify-center s-text-sm s-text-muted-foreground">
+              No items found
+            </div>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};