From 69d252613d6a7164595cd377c35cc2bc98a14ef8 Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 10:29:59 +0200
Subject: [PATCH 1/7] WIP Side panel structure

---
 app/test/page.tsx                             |  9 ++-
 .../side-panel-group.context.tsx              | 74 +++++++++++++++++++
 .../side-panel-group/side-panel-group.tsx     | 19 +++++
 .../side-panel-group.types.ts                 | 25 +++++++
 .../side-panel/side-panel.tsx                 | 11 +++
 .../side-panel/side-panel.types.ts            |  5 ++
 6 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 shared/features/side-panel-group/side-panel-group.context.tsx
 create mode 100644 shared/features/side-panel-group/side-panel-group.tsx
 create mode 100644 shared/features/side-panel-group/side-panel-group.types.ts
 create mode 100644 shared/features/side-panel-group/side-panel/side-panel.tsx
 create mode 100644 shared/features/side-panel-group/side-panel/side-panel.types.ts

diff --git a/app/test/page.tsx b/app/test/page.tsx
index 4a0f4bc2c..d28c8796f 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { TestSidePanel } from "@/app/test/_components/side-panel/test-side-panel";
-
 import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
 import { SecondaryNavigation } from "@/shared/features/navigation/secondary-navigation/secondary-navigation";
+import { SidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group";
+import { SidePanel } from "@/shared/features/side-panel-group/side-panel/side-panel";
 
 export default function TestPage() {
   return (
@@ -20,7 +20,10 @@ export default function TestPage() {
         <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-container-2">
           <div className={"h-[5000px]"}>CONTENT</div>
         </AnimatedColumn>
-        <TestSidePanel />
+        <SidePanelGroup defaultPanelName={"panel1"} defaultOpen={true} config={{ closedWidth: 10, openedWidth: 200 }}>
+          <SidePanel name={"panel1"}>panel 1</SidePanel>
+          <SidePanel name={"panel2"}>panel 2</SidePanel>
+        </SidePanelGroup>
       </AnimatedColumnGroup>
     </div>
   );
diff --git a/shared/features/side-panel-group/side-panel-group.context.tsx b/shared/features/side-panel-group/side-panel-group.context.tsx
new file mode 100644
index 000000000..6a9e7c363
--- /dev/null
+++ b/shared/features/side-panel-group/side-panel-group.context.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { createContext, useContext, useMemo, useState } from "react";
+
+import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
+import {
+  SidePanelGroupContextInterface,
+  SidePanelGroupContextProps,
+} from "@/shared/features/side-panel-group/side-panel-group.types";
+
+export const SidePanelGroupContext = createContext<SidePanelGroupContextInterface>({
+  isPanelOpen: () => false,
+  openPanel: () => {},
+  closePanel: () => {},
+});
+
+export function SidePanelGroupProvider({
+  children,
+  defaultPanelName,
+  defaultOpen,
+  config,
+}: SidePanelGroupContextProps) {
+  const [openedPanels, setOpenedPanels] = useState<string[]>(defaultOpen ? [defaultPanelName] : []);
+
+  function isPanelOpen(name: string) {
+    return openedPanels.includes(name);
+  }
+
+  function openPanel(name?: string) {
+    if (name) {
+      setOpenedPanels(prev => [...prev, name]);
+    } else {
+      setOpenedPanels([defaultPanelName]);
+    }
+  }
+
+  function closePanel(name?: string) {
+    if (name) {
+      setOpenedPanels(prev => prev.filter(panelName => panelName !== name));
+    } else {
+      setOpenedPanels([]);
+    }
+  }
+
+  const panelSize = useMemo(() => {
+    if (openedPanels.length === 0) {
+      return config.closedWidth;
+    }
+
+    return config.openedWidth;
+  }, [openedPanels, config]);
+
+  return (
+    <SidePanelGroupContext.Provider
+      value={{
+        isPanelOpen,
+        openPanel,
+        closePanel,
+      }}
+    >
+      <AnimatedColumn autoWidth={false} width={panelSize} initialWidth={config.closedWidth} className="h-full">
+        {children}
+      </AnimatedColumn>
+    </SidePanelGroupContext.Provider>
+  );
+}
+
+export function useSidePanelGroup() {
+  const context = useContext(SidePanelGroupContext);
+  if (!context) {
+    throw new Error("SidePanel must be used inside a SidePanelGroup");
+  }
+  return context;
+}
diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
new file mode 100644
index 000000000..9cc456c76
--- /dev/null
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { SidePanelGroupProvider } from "@/shared/features/side-panel-group/side-panel-group.context";
+
+import { SidePanelGroupProps } from "./side-panel-group.types";
+
+function SafeSidePanelGroup({ children, defaultPanelName }: SidePanelGroupProps) {
+  console.log("DEFAULT KEY", defaultPanelName);
+  return <div>{children}</div>;
+}
+
+export function SidePanelGroup(props: SidePanelGroupProps) {
+  const { children, ...contextProps } = props;
+  return (
+    <SidePanelGroupProvider {...contextProps}>
+      <SafeSidePanelGroup {...props}>{children}</SafeSidePanelGroup>
+    </SidePanelGroupProvider>
+  );
+}
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
new file mode 100644
index 000000000..bfec6faa1
--- /dev/null
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -0,0 +1,25 @@
+import { PropsWithChildren } from "react";
+
+export interface SidePanelGroupContextInterface {
+  isPanelOpen: (name: string) => boolean;
+  openPanel: (name?: string) => void;
+  closePanel: (name?: string) => void;
+}
+
+export interface SidePanelGroupContextProps extends PropsWithChildren {
+  defaultPanelName: string;
+  defaultOpen?: boolean;
+  config: {
+    closedWidth: number;
+    openedWidth: number;
+  };
+}
+
+export interface SidePanelGroupProps extends PropsWithChildren {
+  defaultPanelName: string;
+  defaultOpen?: boolean;
+  config: {
+    closedWidth: number;
+    openedWidth: number;
+  };
+}
diff --git a/shared/features/side-panel-group/side-panel/side-panel.tsx b/shared/features/side-panel-group/side-panel/side-panel.tsx
new file mode 100644
index 000000000..f03e035c7
--- /dev/null
+++ b/shared/features/side-panel-group/side-panel/side-panel.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group.context";
+
+import { SidePanelProps } from "./side-panel.types";
+
+export function SidePanel({ children, name }: SidePanelProps) {
+  const context = useSidePanelGroup();
+  console.log("NAME", name);
+  return <div>{children}</div>;
+}
diff --git a/shared/features/side-panel-group/side-panel/side-panel.types.ts b/shared/features/side-panel-group/side-panel/side-panel.types.ts
new file mode 100644
index 000000000..396d4830a
--- /dev/null
+++ b/shared/features/side-panel-group/side-panel/side-panel.types.ts
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export interface SidePanelProps extends PropsWithChildren {
+  name: string;
+}

From 2c4b91f8fd0ca7cdf32215de2daf250c14d50801 Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 10:43:14 +0200
Subject: [PATCH 2/7] Add panel refs and handler

---
 app/test/page.tsx                             | 11 ++++--
 .../side-panel-group/side-panel-group.tsx     | 34 ++++++++++++++-----
 .../side-panel-group.types.ts                 |  5 +++
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/app/test/page.tsx b/app/test/page.tsx
index d28c8796f..b8ce89f81 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import { useRef } from "react";
+
 import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
 import { SecondaryNavigation } from "@/shared/features/navigation/secondary-navigation/secondary-navigation";
 import { SidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group";
+import { SidePanelGroupRef } from "@/shared/features/side-panel-group/side-panel-group.types";
 import { SidePanel } from "@/shared/features/side-panel-group/side-panel/side-panel";
 
 export default function TestPage() {
+  const sidePanelRef = useRef<SidePanelGroupRef>(null);
   return (
     <div className={"flex h-full w-full flex-col gap-3 overflow-hidden"}>
       <SecondaryNavigation
@@ -18,9 +22,12 @@ export default function TestPage() {
       />
       <AnimatedColumnGroup>
         <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-container-2">
-          <div className={"h-[5000px]"}>CONTENT</div>
+          <div className={"h-[5000px]"}>
+            <button onClick={() => sidePanelRef.current?.openPanel()}>OPEN PANEL 1</button>
+            <button onClick={() => sidePanelRef.current?.closePanel()}>Close Panels</button>
+          </div>
         </AnimatedColumn>
-        <SidePanelGroup defaultPanelName={"panel1"} defaultOpen={true} config={{ closedWidth: 10, openedWidth: 200 }}>
+        <SidePanelGroup ref={sidePanelRef} defaultPanelName={"panel1"} config={{ closedWidth: 10, openedWidth: 200 }}>
           <SidePanel name={"panel1"}>panel 1</SidePanel>
           <SidePanel name={"panel2"}>panel 2</SidePanel>
         </SidePanelGroup>
diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
index 9cc456c76..95ba62694 100644
--- a/shared/features/side-panel-group/side-panel-group.tsx
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -1,19 +1,37 @@
 "use client";
 
-import { SidePanelGroupProvider } from "@/shared/features/side-panel-group/side-panel-group.context";
+import { ForwardedRef, forwardRef, useImperativeHandle } from "react";
 
-import { SidePanelGroupProps } from "./side-panel-group.types";
+import { SidePanelGroupProvider, useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group.context";
+
+import { SidePanelGroupProps, SidePanelGroupRef } from "./side-panel-group.types";
+
+export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
+  { children }: SidePanelGroupProps,
+  ref: ForwardedRef<SidePanelGroupRef>
+) {
+  const { openPanel, closePanel } = useSidePanelGroup();
+
+  useImperativeHandle(ref, () => {
+    return {
+      openPanel,
+      closePanel,
+    };
+  }, [openPanel, closePanel]);
 
-function SafeSidePanelGroup({ children, defaultPanelName }: SidePanelGroupProps) {
-  console.log("DEFAULT KEY", defaultPanelName);
   return <div>{children}</div>;
-}
+});
 
-export function SidePanelGroup(props: SidePanelGroupProps) {
+export const SidePanelGroup = forwardRef(function SidePanelGroup(
+  props: SidePanelGroupProps,
+  ref: ForwardedRef<SidePanelGroupRef>
+) {
   const { children, ...contextProps } = props;
   return (
     <SidePanelGroupProvider {...contextProps}>
-      <SafeSidePanelGroup {...props}>{children}</SafeSidePanelGroup>
+      <SafeSidePanelGroup {...props} ref={ref}>
+        {children}
+      </SafeSidePanelGroup>
     </SidePanelGroupProvider>
   );
-}
+});
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
index bfec6faa1..7df2fcdfb 100644
--- a/shared/features/side-panel-group/side-panel-group.types.ts
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -23,3 +23,8 @@ export interface SidePanelGroupProps extends PropsWithChildren {
     openedWidth: number;
   };
 }
+
+export interface SidePanelGroupRef {
+  openPanel: SidePanelGroupContextInterface["openPanel"];
+  closePanel: SidePanelGroupContextInterface["closePanel"];
+}

From 41667ad1f6d696f589deed09bae9136f8bf7b11e Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 11:09:54 +0200
Subject: [PATCH 3/7] Add back and next

---
 app/test/page.tsx                             | 23 +++++++++++--
 .../side-panel-group.context.tsx              | 32 +++++++++++++++++--
 .../side-panel-group/side-panel-group.tsx     | 19 +++++++++--
 .../side-panel-group.types.ts                 |  8 +++++
 .../side-panel/side-panel.tsx                 | 12 +++++--
 .../side-panel/side-panel.types.ts            |  5 +--
 6 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/app/test/page.tsx b/app/test/page.tsx
index b8ce89f81..533202371 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -23,11 +23,28 @@ export default function TestPage() {
       <AnimatedColumnGroup>
         <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-container-2">
           <div className={"h-[5000px]"}>
-            <button onClick={() => sidePanelRef.current?.openPanel()}>OPEN PANEL 1</button>
-            <button onClick={() => sidePanelRef.current?.closePanel()}>Close Panels</button>
+            <div>
+              <button onClick={() => sidePanelRef.current?.onBack()}>Back</button>
+              <button onClick={() => sidePanelRef.current?.onNext()}>Next</button>
+            </div>
+
+            <div>
+              <button onClick={() => sidePanelRef.current?.openPanel()}>OPEN PANEL 1</button>
+              <button onClick={() => sidePanelRef.current?.closePanel()}>Close Panels</button>
+            </div>
+
+            <div>
+              <button onClick={() => sidePanelRef.current?.openPanel("panel2")}>Open PANEL 2</button>
+              <button onClick={() => sidePanelRef.current?.closePanel("panel2")}>Close PANEL 2</button>
+            </div>
           </div>
         </AnimatedColumn>
-        <SidePanelGroup ref={sidePanelRef} defaultPanelName={"panel1"} config={{ closedWidth: 10, openedWidth: 200 }}>
+        <SidePanelGroup
+          ref={sidePanelRef}
+          panels={["panel1", "panel2"]}
+          defaultPanelName={"panel1"}
+          config={{ closedWidth: 10, openedWidth: 200 }}
+        >
           <SidePanel name={"panel1"}>panel 1</SidePanel>
           <SidePanel name={"panel2"}>panel 2</SidePanel>
         </SidePanelGroup>
diff --git a/shared/features/side-panel-group/side-panel-group.context.tsx b/shared/features/side-panel-group/side-panel-group.context.tsx
index 6a9e7c363..f3c23f875 100644
--- a/shared/features/side-panel-group/side-panel-group.context.tsx
+++ b/shared/features/side-panel-group/side-panel-group.context.tsx
@@ -12,6 +12,10 @@ export const SidePanelGroupContext = createContext<SidePanelGroupContextInterfac
   isPanelOpen: () => false,
   openPanel: () => {},
   closePanel: () => {},
+  getOpendPanelIndex: () => 0,
+  panelWidth: 0,
+  onBack: () => {},
+  onNext: () => {},
 });
 
 export function SidePanelGroupProvider({
@@ -19,6 +23,7 @@ export function SidePanelGroupProvider({
   defaultPanelName,
   defaultOpen,
   config,
+  panels,
 }: SidePanelGroupContextProps) {
   const [openedPanels, setOpenedPanels] = useState<string[]>(defaultOpen ? [defaultPanelName] : []);
 
@@ -28,7 +33,7 @@ export function SidePanelGroupProvider({
 
   function openPanel(name?: string) {
     if (name) {
-      setOpenedPanels(prev => [...prev, name]);
+      setOpenedPanels(panels?.slice(0, panels.indexOf(name) + 1));
     } else {
       setOpenedPanels([defaultPanelName]);
     }
@@ -36,12 +41,31 @@ export function SidePanelGroupProvider({
 
   function closePanel(name?: string) {
     if (name) {
-      setOpenedPanels(prev => prev.filter(panelName => panelName !== name));
+      setOpenedPanels(panels?.slice(0, panels.indexOf(name)));
     } else {
       setOpenedPanels([]);
     }
   }
 
+  function getOpendPanelIndex() {
+    return (openedPanels?.length || 0) - 1;
+  }
+
+  function onBack() {
+    if (openedPanels.length === 1) {
+      return;
+    }
+    setOpenedPanels(prev => prev.slice(0, prev.length - 1));
+  }
+
+  function onNext() {
+    console.log("openedPanels", openedPanels.length, panels.length);
+    if (openedPanels.length > panels.length - 1) {
+      return;
+    }
+    setOpenedPanels(prev => [...prev, panels[panels.indexOf(prev[prev.length - 1]) + 1]]);
+  }
+
   const panelSize = useMemo(() => {
     if (openedPanels.length === 0) {
       return config.closedWidth;
@@ -56,6 +80,10 @@ export function SidePanelGroupProvider({
         isPanelOpen,
         openPanel,
         closePanel,
+        getOpendPanelIndex,
+        onBack,
+        onNext,
+        panelWidth: config.openedWidth,
       }}
     >
       <AnimatedColumn autoWidth={false} width={panelSize} initialWidth={config.closedWidth} className="h-full">
diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
index 95ba62694..178f9edb9 100644
--- a/shared/features/side-panel-group/side-panel-group.tsx
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { ForwardedRef, forwardRef, useImperativeHandle } from "react";
 
 import { SidePanelGroupProvider, useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group.context";
@@ -10,16 +11,28 @@ export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
   { children }: SidePanelGroupProps,
   ref: ForwardedRef<SidePanelGroupRef>
 ) {
-  const { openPanel, closePanel } = useSidePanelGroup();
+  const { openPanel, closePanel, panelWidth, getOpendPanelIndex, onBack, onNext } = useSidePanelGroup();
 
   useImperativeHandle(ref, () => {
     return {
       openPanel,
       closePanel,
+      onBack,
+      onNext,
     };
-  }, [openPanel, closePanel]);
+  }, [openPanel, closePanel, onNext, onBack]);
 
-  return <div>{children}</div>;
+  return (
+    <div className={"h-full w-full overflow-hidden bg-green-500"}>
+      <motion.div
+        className={"flex h-full justify-start bg-blue-500"}
+        style={{ transform: "translateX(0)" }}
+        animate={{ transform: `translateX(-${panelWidth * getOpendPanelIndex()}px)` }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
 });
 
 export const SidePanelGroup = forwardRef(function SidePanelGroup(
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
index 7df2fcdfb..824afc606 100644
--- a/shared/features/side-panel-group/side-panel-group.types.ts
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -4,11 +4,16 @@ export interface SidePanelGroupContextInterface {
   isPanelOpen: (name: string) => boolean;
   openPanel: (name?: string) => void;
   closePanel: (name?: string) => void;
+  panelWidth: number;
+  getOpendPanelIndex: () => number;
+  onBack: () => void;
+  onNext: () => void;
 }
 
 export interface SidePanelGroupContextProps extends PropsWithChildren {
   defaultPanelName: string;
   defaultOpen?: boolean;
+  panels: string[];
   config: {
     closedWidth: number;
     openedWidth: number;
@@ -18,6 +23,7 @@ export interface SidePanelGroupContextProps extends PropsWithChildren {
 export interface SidePanelGroupProps extends PropsWithChildren {
   defaultPanelName: string;
   defaultOpen?: boolean;
+  panels: string[];
   config: {
     closedWidth: number;
     openedWidth: number;
@@ -27,4 +33,6 @@ export interface SidePanelGroupProps extends PropsWithChildren {
 export interface SidePanelGroupRef {
   openPanel: SidePanelGroupContextInterface["openPanel"];
   closePanel: SidePanelGroupContextInterface["closePanel"];
+  onBack: SidePanelGroupContextInterface["onBack"];
+  onNext: SidePanelGroupContextInterface["onNext"];
 }
diff --git a/shared/features/side-panel-group/side-panel/side-panel.tsx b/shared/features/side-panel-group/side-panel/side-panel.tsx
index f03e035c7..b4dfef6ee 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.tsx
+++ b/shared/features/side-panel-group/side-panel/side-panel.tsx
@@ -5,7 +5,13 @@ import { useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel
 import { SidePanelProps } from "./side-panel.types";
 
 export function SidePanel({ children, name }: SidePanelProps) {
-  const context = useSidePanelGroup();
-  console.log("NAME", name);
-  return <div>{children}</div>;
+  const { panelWidth } = useSidePanelGroup();
+
+  const renderChildren = typeof children === "function" ? children({ name }) : children;
+
+  return (
+    <div className="h-full bg-red-500" style={{ minWidth: panelWidth, width: panelWidth }}>
+      {renderChildren}
+    </div>
+  );
 }
diff --git a/shared/features/side-panel-group/side-panel/side-panel.types.ts b/shared/features/side-panel-group/side-panel/side-panel.types.ts
index 396d4830a..1f0b99428 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.types.ts
+++ b/shared/features/side-panel-group/side-panel/side-panel.types.ts
@@ -1,5 +1,6 @@
-import { PropsWithChildren } from "react";
+import { ReactNode } from "react";
 
-export interface SidePanelProps extends PropsWithChildren {
+export interface SidePanelProps {
   name: string;
+  children: (({ name }: { name: string }) => ReactNode) | ReactNode;
 }

From 6f8103b68d37ad626d437aaec8ba8abba21a6018 Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 11:20:57 +0200
Subject: [PATCH 4/7] Add render props

---
 app/test/page.tsx                             | 22 ++++++++++++++++---
 .../side-panel-group/side-panel-group.tsx     |  4 ++--
 .../side-panel-group.types.ts                 | 11 ++++------
 .../side-panel/side-panel.tsx                 |  9 +++++---
 .../side-panel/side-panel.types.ts            | 11 +++++++++-
 5 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/app/test/page.tsx b/app/test/page.tsx
index 533202371..7c783a3c6 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -43,10 +43,26 @@ export default function TestPage() {
           ref={sidePanelRef}
           panels={["panel1", "panel2"]}
           defaultPanelName={"panel1"}
-          config={{ closedWidth: 10, openedWidth: 200 }}
+          config={{ closedWidth: 0, openedWidth: 370 }}
         >
-          <SidePanel name={"panel1"}>panel 1</SidePanel>
-          <SidePanel name={"panel2"}>panel 2</SidePanel>
+          <SidePanel name={"panel1"}>
+            {({ onClose, onNext }) => (
+              <div className={"h-full bg-blue-500"}>
+                <div>PANEL 1</div>
+                <button onClick={() => onNext()}>Next</button>
+                <button onClick={() => onClose()}>Close</button>
+              </div>
+            )}
+          </SidePanel>
+          <SidePanel name={"panel2"}>
+            {({ onClose, onBack }) => (
+              <div className={"h-full bg-blue-500"}>
+                <div>PANEL 2</div>
+                <button onClick={() => onClose()}>Close Panel 2</button>
+                <button onClick={() => onBack()}>Back</button>
+              </div>
+            )}
+          </SidePanel>
         </SidePanelGroup>
       </AnimatedColumnGroup>
     </div>
diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
index 178f9edb9..76af32ebd 100644
--- a/shared/features/side-panel-group/side-panel-group.tsx
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -23,9 +23,9 @@ export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
   }, [openPanel, closePanel, onNext, onBack]);
 
   return (
-    <div className={"h-full w-full overflow-hidden bg-green-500"}>
+    <div className={"h-full w-full overflow-hidden"}>
       <motion.div
-        className={"flex h-full justify-start bg-blue-500"}
+        className={"flex h-full justify-start"}
         style={{ transform: "translateX(0)" }}
         animate={{ transform: `translateX(-${panelWidth * getOpendPanelIndex()}px)` }}
       >
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
index 824afc606..00df3deac 100644
--- a/shared/features/side-panel-group/side-panel-group.types.ts
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -21,13 +21,10 @@ export interface SidePanelGroupContextProps extends PropsWithChildren {
 }
 
 export interface SidePanelGroupProps extends PropsWithChildren {
-  defaultPanelName: string;
-  defaultOpen?: boolean;
-  panels: string[];
-  config: {
-    closedWidth: number;
-    openedWidth: number;
-  };
+  defaultPanelName: SidePanelGroupContextProps["defaultPanelName"];
+  defaultOpen?: SidePanelGroupContextProps["defaultOpen"];
+  panels: SidePanelGroupContextProps["panels"];
+  config: SidePanelGroupContextProps["config"];
 }
 
 export interface SidePanelGroupRef {
diff --git a/shared/features/side-panel-group/side-panel/side-panel.tsx b/shared/features/side-panel-group/side-panel/side-panel.tsx
index b4dfef6ee..6c6c5ccab 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.tsx
+++ b/shared/features/side-panel-group/side-panel/side-panel.tsx
@@ -5,12 +5,15 @@ import { useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel
 import { SidePanelProps } from "./side-panel.types";
 
 export function SidePanel({ children, name }: SidePanelProps) {
-  const { panelWidth } = useSidePanelGroup();
+  const { panelWidth, openPanel, closePanel, onBack, onNext } = useSidePanelGroup();
 
-  const renderChildren = typeof children === "function" ? children({ name }) : children;
+  const renderChildren =
+    typeof children === "function"
+      ? children({ name, onClose: () => closePanel(name), onOpen: openPanel, onBack, onNext })
+      : children;
 
   return (
-    <div className="h-full bg-red-500" style={{ minWidth: panelWidth, width: panelWidth }}>
+    <div className="h-full" style={{ minWidth: panelWidth, width: panelWidth }}>
       {renderChildren}
     </div>
   );
diff --git a/shared/features/side-panel-group/side-panel/side-panel.types.ts b/shared/features/side-panel-group/side-panel/side-panel.types.ts
index 1f0b99428..d0c6d3fa0 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.types.ts
+++ b/shared/features/side-panel-group/side-panel/side-panel.types.ts
@@ -1,6 +1,15 @@
 import { ReactNode } from "react";
 
+import { SidePanelGroupRef } from "@/shared/features/side-panel-group/side-panel-group.types";
+
+interface RenderProps {
+  name: string;
+  onClose: () => void;
+  onOpen: SidePanelGroupRef["openPanel"];
+  onNext: SidePanelGroupRef["onNext"];
+  onBack: SidePanelGroupRef["onBack"];
+}
 export interface SidePanelProps {
   name: string;
-  children: (({ name }: { name: string }) => ReactNode) | ReactNode;
+  children: ((props: RenderProps) => ReactNode) | ReactNode;
 }

From ec5afa4be14661d144c7ac234558c858c70ff46f Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 11:23:33 +0200
Subject: [PATCH 5/7] Update page.tsx

---
 app/test/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/test/page.tsx b/app/test/page.tsx
index 7c783a3c6..93a112d86 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -56,7 +56,7 @@ export default function TestPage() {
           </SidePanel>
           <SidePanel name={"panel2"}>
             {({ onClose, onBack }) => (
-              <div className={"h-full bg-blue-500"}>
+              <div className={"h-full bg-red-500"}>
                 <div>PANEL 2</div>
                 <button onClick={() => onClose()}>Close Panel 2</button>
                 <button onClick={() => onBack()}>Back</button>

From abdc3778764b54943ea8b0c0b5ae2c76c9dd136c Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 11:27:31 +0200
Subject: [PATCH 6/7] Add classnames

---
 shared/features/side-panel-group/side-panel-group.tsx      | 7 ++++---
 shared/features/side-panel-group/side-panel-group.types.ts | 6 ++++++
 shared/features/side-panel-group/side-panel/side-panel.tsx | 5 +++--
 .../side-panel-group/side-panel/side-panel.types.ts        | 1 +
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
index 76af32ebd..6b98f2331 100644
--- a/shared/features/side-panel-group/side-panel-group.tsx
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -4,11 +4,12 @@ import { motion } from "framer-motion";
 import { ForwardedRef, forwardRef, useImperativeHandle } from "react";
 
 import { SidePanelGroupProvider, useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group.context";
+import { cn } from "@/shared/helpers/cn";
 
 import { SidePanelGroupProps, SidePanelGroupRef } from "./side-panel-group.types";
 
 export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
-  { children }: SidePanelGroupProps,
+  { children, className }: SidePanelGroupProps,
   ref: ForwardedRef<SidePanelGroupRef>
 ) {
   const { openPanel, closePanel, panelWidth, getOpendPanelIndex, onBack, onNext } = useSidePanelGroup();
@@ -23,9 +24,9 @@ export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
   }, [openPanel, closePanel, onNext, onBack]);
 
   return (
-    <div className={"h-full w-full overflow-hidden"}>
+    <div className={cn("h-full w-full overflow-hidden", className?.wrapper)}>
       <motion.div
-        className={"flex h-full justify-start"}
+        className={cn("flex h-full justify-start", className?.mover)}
         style={{ transform: "translateX(0)" }}
         animate={{ transform: `translateX(-${panelWidth * getOpendPanelIndex()}px)` }}
       >
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
index 00df3deac..b51cbeee8 100644
--- a/shared/features/side-panel-group/side-panel-group.types.ts
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -20,11 +20,17 @@ export interface SidePanelGroupContextProps extends PropsWithChildren {
   };
 }
 
+interface classNames {
+  wrapper: string;
+  mover: string;
+}
+
 export interface SidePanelGroupProps extends PropsWithChildren {
   defaultPanelName: SidePanelGroupContextProps["defaultPanelName"];
   defaultOpen?: SidePanelGroupContextProps["defaultOpen"];
   panels: SidePanelGroupContextProps["panels"];
   config: SidePanelGroupContextProps["config"];
+  className?: Partial<classNames>;
 }
 
 export interface SidePanelGroupRef {
diff --git a/shared/features/side-panel-group/side-panel/side-panel.tsx b/shared/features/side-panel-group/side-panel/side-panel.tsx
index 6c6c5ccab..2567af042 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.tsx
+++ b/shared/features/side-panel-group/side-panel/side-panel.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useSidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group.context";
+import { cn } from "@/shared/helpers/cn";
 
 import { SidePanelProps } from "./side-panel.types";
 
-export function SidePanel({ children, name }: SidePanelProps) {
+export function SidePanel({ children, name, className }: SidePanelProps) {
   const { panelWidth, openPanel, closePanel, onBack, onNext } = useSidePanelGroup();
 
   const renderChildren =
@@ -13,7 +14,7 @@ export function SidePanel({ children, name }: SidePanelProps) {
       : children;
 
   return (
-    <div className="h-full" style={{ minWidth: panelWidth, width: panelWidth }}>
+    <div className={cn("h-full", className)} style={{ minWidth: panelWidth, width: panelWidth }}>
       {renderChildren}
     </div>
   );
diff --git a/shared/features/side-panel-group/side-panel/side-panel.types.ts b/shared/features/side-panel-group/side-panel/side-panel.types.ts
index d0c6d3fa0..ba60befb3 100644
--- a/shared/features/side-panel-group/side-panel/side-panel.types.ts
+++ b/shared/features/side-panel-group/side-panel/side-panel.types.ts
@@ -12,4 +12,5 @@ interface RenderProps {
 export interface SidePanelProps {
   name: string;
   children: ((props: RenderProps) => ReactNode) | ReactNode;
+  className?: string;
 }

From d41d1d9dab09d752685151215f2ab38fac83ad2d Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Mon, 12 Aug 2024 11:30:44 +0200
Subject: [PATCH 7/7] Review

---
 .../features/side-panel-group/side-panel-group.context.tsx | 7 +++----
 shared/features/side-panel-group/side-panel-group.tsx      | 4 ++--
 shared/features/side-panel-group/side-panel-group.types.ts | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/shared/features/side-panel-group/side-panel-group.context.tsx b/shared/features/side-panel-group/side-panel-group.context.tsx
index f3c23f875..1ec27e041 100644
--- a/shared/features/side-panel-group/side-panel-group.context.tsx
+++ b/shared/features/side-panel-group/side-panel-group.context.tsx
@@ -12,7 +12,7 @@ export const SidePanelGroupContext = createContext<SidePanelGroupContextInterfac
   isPanelOpen: () => false,
   openPanel: () => {},
   closePanel: () => {},
-  getOpendPanelIndex: () => 0,
+  getOpenedPanelIndex: () => 0,
   panelWidth: 0,
   onBack: () => {},
   onNext: () => {},
@@ -47,7 +47,7 @@ export function SidePanelGroupProvider({
     }
   }
 
-  function getOpendPanelIndex() {
+  function getOpenedPanelIndex() {
     return (openedPanels?.length || 0) - 1;
   }
 
@@ -59,7 +59,6 @@ export function SidePanelGroupProvider({
   }
 
   function onNext() {
-    console.log("openedPanels", openedPanels.length, panels.length);
     if (openedPanels.length > panels.length - 1) {
       return;
     }
@@ -80,7 +79,7 @@ export function SidePanelGroupProvider({
         isPanelOpen,
         openPanel,
         closePanel,
-        getOpendPanelIndex,
+        getOpenedPanelIndex,
         onBack,
         onNext,
         panelWidth: config.openedWidth,
diff --git a/shared/features/side-panel-group/side-panel-group.tsx b/shared/features/side-panel-group/side-panel-group.tsx
index 6b98f2331..6583f4273 100644
--- a/shared/features/side-panel-group/side-panel-group.tsx
+++ b/shared/features/side-panel-group/side-panel-group.tsx
@@ -12,7 +12,7 @@ export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
   { children, className }: SidePanelGroupProps,
   ref: ForwardedRef<SidePanelGroupRef>
 ) {
-  const { openPanel, closePanel, panelWidth, getOpendPanelIndex, onBack, onNext } = useSidePanelGroup();
+  const { openPanel, closePanel, panelWidth, getOpenedPanelIndex, onBack, onNext } = useSidePanelGroup();
 
   useImperativeHandle(ref, () => {
     return {
@@ -28,7 +28,7 @@ export const SafeSidePanelGroup = forwardRef(function SafeSidePanelGroup(
       <motion.div
         className={cn("flex h-full justify-start", className?.mover)}
         style={{ transform: "translateX(0)" }}
-        animate={{ transform: `translateX(-${panelWidth * getOpendPanelIndex()}px)` }}
+        animate={{ transform: `translateX(-${panelWidth * getOpenedPanelIndex()}px)` }}
       >
         {children}
       </motion.div>
diff --git a/shared/features/side-panel-group/side-panel-group.types.ts b/shared/features/side-panel-group/side-panel-group.types.ts
index b51cbeee8..d415970e7 100644
--- a/shared/features/side-panel-group/side-panel-group.types.ts
+++ b/shared/features/side-panel-group/side-panel-group.types.ts
@@ -5,7 +5,7 @@ export interface SidePanelGroupContextInterface {
   openPanel: (name?: string) => void;
   closePanel: (name?: string) => void;
   panelWidth: number;
-  getOpendPanelIndex: () => number;
+  getOpenedPanelIndex: () => number;
   onBack: () => void;
   onNext: () => void;
 }