Updating menu (#1240)

* Updatign Item for new Sparkle pack * Starting changing the WorspacePicker * Starting to change workspacePicker * Fixing href * Worspace selector moved to Sparkle dropdown menu * Starting implementing dropdown to avatar menu * Cleaning * removing eslint darwin arm64 from package * correcting eslint * package cleaning * package again * Fixing aftre eslint check * Using sparkle 1-43 * StandardItem -> Item * remove unused imports --------- Co-authored-by: édouard wautier <[email protected]> Co-authored-by: Stanislas Polu <[email protected]>
dust-tt · Sep 4, 2023 · 200cb05 · 200cb05
1 parent 6408917
commit 200cb05
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 127 deletions.
diff --git a/front/components/WorkspacePicker.tsx b/front/components/WorkspacePicker.tsx
@@ -1,7 +1,5 @@
-import { ChevronDownIcon } from "@dust-tt/sparkle";
-import { Menu } from "@headlessui/react";
+import { DropdownMenu } from "@dust-tt/sparkle";
 
-import { classNames } from "@app/lib/utils";
 import { UserType, WorkspaceType } from "@app/types/user";
 
 export default function WorkspacePicker({
@@ -15,54 +13,22 @@ export default function WorkspacePicker({
   onWorkspaceUpdate: (w: WorkspaceType) => void;
 }) {
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button
-            className={classNames(
-              "inline-flex items-center rounded-md py-1 text-sm font-medium",
-              workspace ? "px-0" : "border px-3",
-              "focus:outline-none focus:ring-0"
-            )}
-          >
-            {workspace ? (
-              <>
-                <div className="text-sm text-slate-800">{workspace.name}</div>
-                <ChevronDownIcon className="ml-2 mt-0.5 h-4 w-4 hover:text-gray-700" />
-              </>
-            ) : (
-              "Select workspace"
-            )}
-          </Menu.Button>
-        </div>
+    <DropdownMenu className="flex">
+      <DropdownMenu.Button
+        label={workspace ? workspace.name : "Select workspace"}
+      />
 
-        <Menu.Items
-          className={classNames(
-            "absolute left-1 z-10 mt-1 origin-top-left rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none",
-            workspace ? "-left-8" : "left-1"
-          )}
-        >
-          <div className="py-1">
-            {user.workspaces.map((w) => {
-              return (
-                <Menu.Item key={w.sId}>
-                  {({ active }) => (
-                    <span
-                      className={classNames(
-                        active ? "text-gray-900" : "text-gray-700",
-                        "block cursor-pointer whitespace-nowrap px-4 py-2 text-sm"
-                      )}
-                      onClick={() => onWorkspaceUpdate(w)}
-                    >
-                      {w.name}
-                    </span>
-                  )}
-                </Menu.Item>
-              );
-            })}
-          </div>
-        </Menu.Items>
-      </Menu>
-    </div>
+      <DropdownMenu.Items>
+        {user.workspaces.map((w) => {
+          return (
+            <DropdownMenu.Item
+              key={w.sId}
+              onClick={() => void onWorkspaceUpdate(w)}
+              label={w.name}
+            />
+          );
+        })}
+      </DropdownMenu.Items>
+    </DropdownMenu>
   );
 }
diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -1,5 +1,5 @@
-import { Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle";
-import { Dialog, Menu, Transition } from "@headlessui/react";
+import { DropdownMenu, Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle";
+import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -43,54 +43,31 @@ function NavigationBar({
           <div className="flex flex-initial">
             {user && (
               <div className="static inset-auto right-0 flex flex-initial items-center pr-4">
-                <Menu as="div" className="relative">
-                  <div>
-                    <Menu.Button className="focus:outline-nonek flex rounded-full bg-gray-800 text-sm">
-                      <span className="sr-only">Open user menu</span>
-                      <img
-                        className="h-10 w-10 rounded-xl"
-                        src={
-                          user.image
-                            ? user.image
-                            : "https://gravatar.com/avatar/anonymous?d=mp"
-                        }
-                        alt=""
-                      />
-                    </Menu.Button>
-                  </div>
-
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-200"
-                    enterFrom="transform -translate-y-4 opacity-0 scale-100"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <Menu.Item>
-                        {({ active }) => (
-                          <a
-                            href="#"
-                            onClick={() =>
-                              signOut({
-                                callbackUrl: "/",
-                                redirect: true,
-                              })
-                            }
-                            className={classNames(
-                              active ? "bg-gray-50" : "",
-                              "block px-4 py-2 text-sm text-gray-700"
-                            )}
-                          >
-                            Sign&nbsp;out
-                          </a>
-                        )}
-                      </Menu.Item>
-                    </Menu.Items>
-                  </Transition>
-                </Menu>
+                <DropdownMenu>
+                  <DropdownMenu.Button className="focus:outline-nonek flex rounded-full bg-gray-800 text-sm">
+                    <span className="sr-only">Open user menu</span>
+                    <img
+                      className="h-10 w-10 rounded-xl"
+                      src={
+                        user.image
+                          ? user.image
+                          : "https://gravatar.com/avatar/anonymous?d=mp"
+                      }
+                      alt=""
+                    />
+                  </DropdownMenu.Button>
+                  <DropdownMenu.Items origin="topRight">
+                    <DropdownMenu.Item
+                      label="Sign&nbsp;out"
+                      onClick={() => {
+                        void signOut({
+                          callbackUrl: "/",
+                          redirect: true,
+                        });
+                      }}
+                    />
+                  </DropdownMenu.Items>
+                </DropdownMenu>
               </div>
             )}
           </div>

diff --git a/front/components/use/chat/ChatSidebarMenu.tsx b/front/components/use/chat/ChatSidebarMenu.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  ChatBubbleBottomCenterPlusIcon,
-  Item,
-  ItemSectionHeader,
-  ListItem,
-} from "@dust-tt/sparkle";
+import { Button, ChatBubbleBottomCenterPlusIcon, Item } from "@dust-tt/sparkle";
 import { PlanetIcon } from "@dust-tt/sparkle";
 import { useRouter } from "next/router";
 
@@ -56,10 +50,10 @@ export function ChatSidebarMenu({
         <div className="flex grow flex-col">
           {sessions.length > 0 && (
             <div className="py-2 text-xs uppercase text-slate-400">
-              <ItemSectionHeader label="Past Conversations" />
+              <Item.SectionHeader label="Past Conversations" />
             </div>
           )}
-          <ListItem>
+          <Item.List>
             {sessions.length === 0
               ? null
               : sessions.map((s) => {
@@ -73,7 +67,7 @@ export function ChatSidebarMenu({
                     ></Item>
                   );
                 })}
-          </ListItem>
+          </Item.List>
         </div>
       </div>
     </div>

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "env $(cat .env.local) npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "0.1.37",
+    "@dust-tt/sparkle": "0.1.43",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
     "@nangohq/frontend": "^0.16.1",

diff --git a/front/pages/w/[wId]/workspace/index.tsx b/front/pages/w/[wId]/workspace/index.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  Checkbox,
-  KeyIcon,
-  PageHeader,
-  SectionHeader,
-} from "@dust-tt/sparkle";
+import { Button, KeyIcon, PageHeader, SectionHeader } from "@dust-tt/sparkle";
 import { Listbox } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";

diff --git a/sparkle/src/stories/DropdownMenu.stories.tsx b/sparkle/src/stories/DropdownMenu.stories.tsx
@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
   ChatBubbleBottomCenterTextIcon,
   DropdownMenu,
   Icon,
-  Logo,
   PlanetIcon,
 } from "../index_with_tw_base";