feat: refactor for oak components on the pull out

oaknational · Nov 20, 2024 · ae729e5 · ae729e5
1 parent 4c1e3cd
commit ae729e5
Show file tree

Hide file tree

Showing 9 changed files with 6,502 additions and 5,606 deletions.
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
@@ -2,20 +2,42 @@
 
 import * as React from "react";
 
-import { OakIcon } from "@oaknational/oak-components";
+import {
+  OakIcon,
+  OakModal,
+  OakModalFooter,
+  OakPrimaryButton,
+  OakSecondaryButton,
+} from "@oaknational/oak-components";
 import { usePathname } from "next/navigation";
 
 import { SidebarList } from "@/components/AppComponents/Chat/sidebar-list";
-import { SheetTrigger } from "@/components/AppComponents/Chat/ui/sheet";
 
+import { ClearHistory } from "./clear-history";
 import ChatButton from "./ui/chat-button";
 
-export function ChatHistory() {
+export function ChatHistory({
+  openSidebar,
+  setOpenSidebar,
+}: {
+  openSidebar: boolean;
+  setOpenSidebar: (value: boolean) => void;
+}) {
   const ailaId = usePathname().split("aila/")[1];
+
   return (
-    <div className="rel mt-20 flex h-full flex-col">
-      <div className="my-10 flex flex-col px-7">
-        <SheetTrigger asChild>
+    <OakModal
+      zIndex={0}
+      isOpen={openSidebar}
+      onClose={() => setOpenSidebar(false)}
+      footerSlot={
+        <OakModalFooter>
+          <ClearHistory isEnabled={true} />
+        </OakModalFooter>
+      }
+    >
+      <div className="flex h-full flex-col">
+        <div className="my-10 flex flex-col px-7">
           <ChatButton href="/aila" variant="text-link" onClick={() => {}}>
             <span className="rotate-45">
               <OakIcon
@@ -26,26 +48,27 @@ export function ChatHistory() {
             </span>
             <span>Create new lesson</span>
           </ChatButton>
-        </SheetTrigger>
-        <ChatButton href="/" variant="text-link">
-          <span className="scale-90">
-            <OakIcon iconName="home" />
-          </span>
-          AI experiments page
-        </ChatButton>
-        <ChatButton
-          href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
-          variant="text-link"
-        >
-          <span className="scale-90">
-            <OakIcon iconName="question-mark" />
-          </span>
-          Help
-        </ChatButton>
+
+          <ChatButton href="/" variant="text-link">
+            <span className="scale-90">
+              <OakIcon iconName="home" />
+            </span>
+            AI experiments page
+          </ChatButton>
+          <ChatButton
+            href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
+            variant="text-link"
+          >
+            <span className="scale-90">
+              <OakIcon iconName="question-mark" />
+            </span>
+            Help
+          </ChatButton>
+        </div>
+        <React.Suspense>
+          <SidebarList />
+        </React.Suspense>
       </div>
-      <React.Suspense>
-        <SidebarList />
-      </React.Suspense>
-    </div>
+    </OakModal>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx b/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx
@@ -3,56 +3,37 @@
 import * as React from "react";
 
 import { OakFlex, OakSpan } from "@oaknational/oak-components";
-import styled from "styled-components";
 
 import BinIcon from "@/components/BinIcon";
-import OakBoxWithCustomWidth from "@/components/OakBoxWithCustomWidth";
 
 import { useDialog } from "../DialogContext";
 
 type ClearHistoryProps = {
   isEnabled: boolean;
 };
 
-const OakBoxWithCustomWidthFullWidthMobile = styled(OakBoxWithCustomWidth)`
-  @media (max-width: 600px) {
-    width: 100%;
-  }
-`;
-
 export function ClearHistory({ isEnabled }: Readonly<ClearHistoryProps>) {
-  const { setDialogWindow } = useDialog();
+  const { setDialogWindow, setOpenSidebar } = useDialog();
   if (!isEnabled) {
     return null;
   }
   return (
-    <OakBoxWithCustomWidthFullWidthMobile
-      width={447}
-      $position="fixed"
-      $right="all-spacing-0"
-      $bottom="all-spacing-0"
-      $bt="border-solid-s"
-      $borderColor="grey30"
-      $background="white"
+    <OakFlex
+      $justifyContent="flex-start"
+      $gap="all-spacing-2"
+      $alignItems="center"
     >
-      <OakFlex
-        $justifyContent="flex-start"
-        $pv="inner-padding-xl2"
-        $ph="inner-padding-m"
-        $gap="all-spacing-2"
-        $alignItems="center"
+      <BinIcon />
+      <button
+        onClick={() => {
+          setOpenSidebar(false);
+          setDialogWindow("clear-history");
+        }}
       >
-        <BinIcon />
-        <button
-          onClick={() => {
-            setDialogWindow("clear-history");
-          }}
-        >
-          <OakSpan $font="body-3-bold" $color="black" $textDecoration="none">
-            Delete all lessons
-          </OakSpan>
-        </button>
-      </OakFlex>
-    </OakBoxWithCustomWidthFullWidthMobile>
+        <OakSpan $font="body-3-bold" $color="black" $textDecoration="none">
+          Delete all lessons
+        </OakSpan>
+      </button>
+    </OakFlex>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.tsx
@@ -15,8 +15,8 @@ import { usePathname } from "next/navigation";
 import { useDemoUser } from "@/components/ContextProviders/Demo";
 import OakIconLogo from "@/components/OakIconLogo";
 
+import { useDialog } from "../DialogContext";
 import { BetaTagHeader } from "./beta-tag";
-import { ChatHistory } from "./chat-history";
 import { SidebarMobile } from "./sidebar-mobile";
 import { UserOrLogin } from "./user-or-login";
 
@@ -27,7 +27,8 @@ export function Header() {
   const clerkMetadata = useClerkDemoMetadata();
 
   const ailaId = usePathname().split("aila/")[1];
-
+  const { openSidebar, setOpenSidebar } = useDialog();
+  console.log("openSidebar", openSidebar);
   return (
     <OakBox
       as={"header"}
@@ -122,9 +123,7 @@ export function Header() {
             <UserOrLogin />
           </OakFlex>
           <OakFlex>
-            <SidebarMobile>
-              <ChatHistory />
-            </SidebarMobile>
+            <SidebarMobile setOpenSidebar={setOpenSidebar} />
           </OakFlex>
         </OakFlex>
       </OakFlex>

diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx
@@ -8,7 +8,6 @@ import Link from "next/link";
 
 import AiIcon from "@/components/AiIcon";
 import { IconUsers } from "@/components/AppComponents/Chat/ui/icons";
-import { SheetTrigger } from "@/components/AppComponents/Chat/ui/sheet";
 import {
   Tooltip,
   TooltipContent,
@@ -27,10 +26,11 @@ interface SidebarItemProps {
 }
 
 export function SidebarItem({ chat }: SidebarItemProps) {
-  const { setDialogWindow, setDialogProps } = useDialog();
+  const { setDialogWindow, setDialogProps, setOpenSidebar } = useDialog();
   const [isHovered, setIsHovered] = useState(false);
   function deleteChatById() {
     setDialogProps({ chatIdToDelete: chat.id });
+    setOpenSidebar(false);
     setDialogWindow("clear-single-chat");
   }
   return (

diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx
@@ -2,47 +2,33 @@
 
 import { OakFlex, OakSpan } from "@oaknational/oak-components";
 
-import { Sidebar } from "@/components/AppComponents/Chat/sidebar";
 import { Button } from "@/components/AppComponents/Chat/ui/button";
-import {
-  Sheet,
-  SheetContent,
-  SheetTrigger,
-} from "@/components/AppComponents/Chat/ui/sheet";
 import { Icon } from "@/components/Icon";
 import useAnalytics from "@/lib/analytics/useAnalytics";
 
-interface SidebarMobileProps {
-  children: React.ReactNode;
-}
-
-export function SidebarMobile({ children }: Readonly<SidebarMobileProps>) {
+export function SidebarMobile({
+  setOpenSidebar,
+}: {
+  setOpenSidebar: (value: boolean) => void;
+}) {
   const { trackEvent } = useAnalytics();
+
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button
-          variant="ghost"
-          data-testid="sidebar-button"
-          className="flex items-center px-5"
-          onClick={() => {
-            trackEvent("chat:toggle_sidebar");
-          }}
-        >
-          <Icon icon="sidebar" size="md" />
-          <OakFlex $pl={"inner-padding-ssx"} $display={["none", "flex"]}>
-            <OakSpan $font={"body-2"}>Menu</OakSpan>
-          </OakFlex>
+    <Button
+      variant="ghost"
+      data-testid="sidebar-button"
+      className="flex items-center px-5"
+      onClick={() => {
+        setOpenSidebar(true);
+        trackEvent("chat:toggle_sidebar");
+      }}
+    >
+      <Icon icon="sidebar" size="md" />
+      <OakFlex $pl={"inner-padding-ssx"} $display={["none", "flex"]}>
+        <OakSpan $font={"body-2"}>Menu</OakSpan>
+      </OakFlex>
 
-          <span className="sr-only block sm:hidden">Toggle Sidebar</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent
-        side="right"
-        className="inset-y-0 flex h-auto w-full flex-col p-0 sm:w-[800px]"
-      >
-        <Sidebar className="flex">{children}</Sidebar>
-      </SheetContent>
-    </Sheet>
+      <span className="sr-only block sm:hidden">Toggle Sidebar</span>
+    </Button>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx b/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx
diff --git a/apps/nextjs/src/components/AppComponents/DialogContext/index.tsx b/apps/nextjs/src/components/AppComponents/DialogContext/index.tsx
@@ -9,6 +9,8 @@ interface DialogContextType {
   setDialogWindow: React.Dispatch<React.SetStateAction<DialogTypes>>;
   dialogProps?: Record<string, unknown>;
   setDialogProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+  openSidebar: boolean;
+  setOpenSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const DialogContext = createContext<DialogContextType | undefined>(undefined);
@@ -18,10 +20,18 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
 }) => {
   const [dialogWindow, setDialogWindow] = useState<DialogTypes>("");
   const [dialogProps, setDialogProps] = useState<Record<string, unknown>>({});
+  const [openSidebar, setOpenSidebar] = useState(false);
 
   const value = useMemo(
-    () => ({ dialogWindow, setDialogWindow, dialogProps, setDialogProps }),
-    [dialogWindow, dialogProps],
+    () => ({
+      dialogWindow,
+      setDialogWindow,
+      dialogProps,
+      setDialogProps,
+      openSidebar,
+      setOpenSidebar,
+    }),
+    [dialogWindow, dialogProps, openSidebar],
   );
 
   return (