From 199e983c61a495e4dec3acb0bbb39120b08c6aea Mon Sep 17 00:00:00 2001 From: Edouard Wautier <4435185+Duncid@users.noreply.github.com> Date: Thu, 2 Jan 2025 15:47:26 +0100 Subject: [PATCH] Fixing issues with Tree and Navigation --- .../assistant/conversation/SidebarMenu.tsx | 25 ++-- .../navigation/NavigationSidebar.tsx | 28 ++--- front/components/spaces/SpaceSideBarMenu.tsx | 108 ++++++++---------- sparkle/package-lock.json | 4 +- sparkle/package.json | 2 +- sparkle/src/components/NavigationList.tsx | 49 +++----- sparkle/src/components/Tree.tsx | 11 +- .../src/stories/NavigationList.stories.tsx | 92 +++++++-------- 8 files changed, 145 insertions(+), 174 deletions(-) diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx index 5eae4d9db45c..da19aa04e4bd 100644 --- a/front/components/assistant/conversation/SidebarMenu.tsx +++ b/front/components/assistant/conversation/SidebarMenu.tsx @@ -16,7 +16,6 @@ import { NavigationListLabel, PlusIcon, RobotIcon, - ScrollArea, TrashIcon, XMarkIcon, } from "@dust-tt/sparkle"; @@ -278,7 +277,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) { Error loading conversations )} - + {conversationsByDate && Object.keys(conversationsByDate).map((dateLabel) => ( ))} - + @@ -318,18 +317,16 @@ const RenderConversations = ({ } return ( -
+ <> - - {conversations.map((conversation) => ( - - ))} - -
+ {conversations.map((conversation) => ( + + ))} + ); }; diff --git a/front/components/navigation/NavigationSidebar.tsx b/front/components/navigation/NavigationSidebar.tsx index f27ea728af2b..6cdab14f8dd5 100644 --- a/front/components/navigation/NavigationSidebar.tsx +++ b/front/components/navigation/NavigationSidebar.tsx @@ -93,13 +93,13 @@ export const NavigationSidebar = React.forwardRef< /> ))} - {navs.map((tab) => ( - - {subNavigation && tab.isCurrent(activePath) && ( - <> - {subNavigation.map((nav) => ( -
- + + {navs.map((tab) => ( + + {subNavigation && tab.isCurrent(activePath) && ( + <> + {subNavigation.map((nav) => ( +
{nav.label && ( ))} - -
- ))} - - )} - - ))} +
+ ))} + + )} + + ))} + )} diff --git a/front/components/spaces/SpaceSideBarMenu.tsx b/front/components/spaces/SpaceSideBarMenu.tsx index cfe0a46bd396..4b5803c0e026 100644 --- a/front/components/spaces/SpaceSideBarMenu.tsx +++ b/front/components/spaces/SpaceSideBarMenu.tsx @@ -7,7 +7,6 @@ import { NavigationList, NavigationListLabel, PlusIcon, - ScrollArea, Tree, } from "@dust-tt/sparkle"; import type { @@ -106,17 +105,13 @@ export default function SpaceSideBarMenu({ return spaces.map((space) => ( {space.kind === "system" ? ( - - - + ) : ( - - v.sId === space.sId)} - /> - + v.sId === space.sId)} + /> )} )); @@ -124,56 +119,51 @@ export default function SpaceSideBarMenu({ return (
- -
- - {sortedGroupedSpaces.map(({ section, spaces }, index) => { - if (section === "public" && !spaces.length) { - return null; - } - - if (section === "restricted" && !spaces.length && !isAdmin) { - return null; - } - - const sectionDetails = getSpaceSectionDetails(section); - - return ( - -
- + {sortedGroupedSpaces.map(({ section, spaces }, index) => { + if (section === "public" && !spaces.length) { + return null; + } + + if (section === "restricted" && !spaces.length && !isAdmin) { + return null; + } + + const sectionDetails = getSpaceSectionDetails(section); + + return ( + +
+ + {sectionDetails.displayCreateSpaceButton && + isAdmin && + openSpaceCreationModal && ( +
- {renderSpaceItems( - spaces.toSorted(compareSpaces), - spacesAsUser, - owner )} - - ); - })} - -
- +
+ {renderSpaceItems( + spaces.toSorted(compareSpaces), + spacesAsUser, + owner + )} + + ); + })} +
); } diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json index fb55840f7447..179d1cbc9463 100644 --- a/sparkle/package-lock.json +++ b/sparkle/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.350", + "version": "0.2.351", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dust-tt/sparkle", - "version": "0.2.350", + "version": "0.2.351", "license": "ISC", "dependencies": { "@emoji-mart/data": "^1.1.2", diff --git a/sparkle/package.json b/sparkle/package.json index b01418c0eb8e..572aafe21acf 100644 --- a/sparkle/package.json +++ b/sparkle/package.json @@ -1,6 +1,6 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.350", + "version": "0.2.351", "scripts": { "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs", "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css", diff --git a/sparkle/src/components/NavigationList.tsx b/sparkle/src/components/NavigationList.tsx index 6638ffb7915b..72cbf414cf6c 100644 --- a/sparkle/src/components/NavigationList.tsx +++ b/sparkle/src/components/NavigationList.tsx @@ -13,42 +13,28 @@ import { Button } from "@sparkle/components/Button"; import { MoreIcon } from "@sparkle/icons"; import { cn } from "@sparkle/lib/utils"; -const listStyles = cva("s-flex", { - variants: { - layout: { - container: "s-gap-1 s-relative s-flex-col s-overflow-hidden", - item: cn( - "s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300", - "data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground", - "hover:s-text-foreground hover:s-bg-structure-150" - ), +const NavigationListItemStyles = cva( + "s-box-border s-flex s-items-center s-w-full s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground hover:s-text-foreground hover:s-bg-structure-150", + { + variants: { + state: { + active: "active:s-bg-structure-200", + selected: "s-text-foreground s-font-medium s-bg-structure-150", + unselected: "s-text-muted-foreground", + }, }, - state: { - active: "active:s-bg-structure-200", - selected: "s-text-foreground s-font-medium s-bg-structure-150", - unselected: "s-text-muted-foreground", + defaultVariants: { + state: "unselected", }, - }, - defaultVariants: { - layout: "container", - state: "unselected", - }, -}); - -const labelStyles = cva( - "s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis" + } ); const NavigationList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - - {children} + +
{children}
 )); @@ -109,8 +95,7 @@ const NavigationListItem = React.forwardRef<
, VariantProps { diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx index 41d6c7eb246b..f2bc1e2bb27c 100644 --- a/sparkle/src/components/Tree.tsx +++ b/sparkle/src/components/Tree.tsx @@ -1,12 +1,11 @@ import React, { ComponentType, ReactNode, useState } from "react"; -import Spinner from "@sparkle/components/Spinner"; +import { Button, Spinner } from "@sparkle/components/"; import { ArrowDownSIcon, ArrowRightSIcon } from "@sparkle/icons"; import { cn } from "@sparkle/lib/utils"; import { Checkbox, CheckboxProps } from "./Checkbox"; import { Icon } from "./Icon"; -import { IconButton } from "./IconButton"; export interface TreeProps { children?: ReactNode; @@ -64,9 +63,9 @@ export function Tree({ } const treeItemStyleClasses = { - base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2", + base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-h-9", isNavigatableBase: - "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer", + "s-rounded-xl s-pl-1 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer", isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150", isNavigatableSelected: "s-font-medium s-bg-structure-150", }; @@ -160,10 +159,10 @@ Tree.Item = function ({ onClick={onItemClick} > {type === "node" && ( - { e.stopPropagation(); if (effectiveOnChevronClick) { diff --git a/sparkle/src/stories/NavigationList.stories.tsx b/sparkle/src/stories/NavigationList.stories.tsx index deaa0ca53709..9472c989ade2 100644 --- a/sparkle/src/stories/NavigationList.stories.tsx +++ b/sparkle/src/stories/NavigationList.stories.tsx @@ -76,30 +76,28 @@ export const Demo = () => { {conversationTitles.map((section, sectionIndex) => ( -
- - {section.items.map((title, index) => { - const itemIndex = allItems.indexOf(title); - return ( - { - // Prevent default only if it's not coming from the more menu - if (!e.defaultPrevented) { - e.preventDefault(); - setSelectedIndex(itemIndex); - } - }} - label={title} - className="s-w-full" - moreMenu={getMoreMenu(title)} - icon={LockIcon} - /> - ); - })} -
+ + {section.items.map((title, index) => { + const itemIndex = allItems.indexOf(title); + return ( + { + // Prevent default only if it's not coming from the more menu + if (!e.defaultPrevented) { + e.preventDefault(); + setSelectedIndex(itemIndex); + } + }} + label={title} + className="s-w-full" + moreMenu={getMoreMenu(title)} + icon={LockIcon} + /> + ); + })} ))} @@ -108,30 +106,28 @@ export const Demo = () => { {conversationTitles.map((section, sectionIndex) => ( -
- - {section.items.map((title, index) => { - const itemIndex = allItems.indexOf(title); - return ( - { - // Prevent default only if it's not coming from the more menu - if (!e.defaultPrevented) { - e.preventDefault(); - setSelectedIndex(itemIndex); - } - }} - label={title} - className="s-w-full" - moreMenu={getMoreMenu(title)} - icon={LockIcon} - /> - ); - })} -
+ + {section.items.map((title, index) => { + const itemIndex = allItems.indexOf(title); + return ( + { + // Prevent default only if it's not coming from the more menu + if (!e.defaultPrevented) { + e.preventDefault(); + setSelectedIndex(itemIndex); + } + }} + label={title} + className="s-w-full" + moreMenu={getMoreMenu(title)} + icon={LockIcon} + /> + ); + })} ))}