From 7a0d010ff8f1ae03d7308a920fe82370c2864189 Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Thu, 9 May 2024 13:44:07 +0800
Subject: [PATCH] chore: restructured app layout components and some minor
 fixes in stories

---
 playground/index.tsx                          | 98 +++++++++++++++----
 .../{Header => }/DerivLogo/index.tsx          |  0
 .../__test__/DrawerFooter.spec.tsx            |  1 -
 src/components/AppLayout/Header/index.tsx     |  4 -
 .../{Header => }/MenuItem/MenuItem.scss       |  0
 .../AppLayout/{Header => }/MenuItem/index.tsx |  0
 .../AppLayout/__test__/DerivLogo.spec.tsx     |  2 +-
 .../AppLayout/__test__/MenuItem.spec.tsx      |  2 +-
 src/components/AppLayout/index.ts             |  2 +
 src/main.ts                                   |  2 +-
 stories/ContextMenu.stories.tsx               | 25 +----
 11 files changed, 90 insertions(+), 46 deletions(-)
 rename src/components/AppLayout/{Header => }/DerivLogo/index.tsx (100%)
 rename src/components/AppLayout/{Header => }/MenuItem/MenuItem.scss (100%)
 rename src/components/AppLayout/{Header => }/MenuItem/index.tsx (100%)

diff --git a/playground/index.tsx b/playground/index.tsx
index 5876abd6..194122d3 100644
--- a/playground/index.tsx
+++ b/playground/index.tsx
@@ -1,25 +1,89 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import {
-    LegacyFullscreen1pxIcon,
-    LegacyHandleMoreIcon,
+    LegacyReportsIcon,
+    LabelPairedHouseBlankMdRegularIcon,
+    LegacyChevronRight2pxIcon
 } from "@deriv/quill-icons";
-import { Header } from "../src/main";
-import { Text } from "../src/main";
+import {
+    MenuItem,
+    useDevice,
+    Header,
+    Drawer,
+    DerivLogo,
+    Button,
+    Wrapper,
+} from "../src/main";
 
-const App = () => (
-    <div style={{ margin: "50px", display: "flex" }}>
-        <Header.MenuItem
-            as="button"
-            leftComponent={<LegacyFullscreen1pxIcon width={16} height={16} />}
-            rightComponent={<LegacyHandleMoreIcon width={16} height={16} />}
-        >
-            <span style={{ padding: "8px 16px" }}>
-                <Text size="md">Home</Text>
-            </span>
-        </Header.MenuItem>
-    </div>
-);
+const App = () => {
+    const { isMobile } = useDevice();
+    const [is_drawer_open, setDrawerOpen] = React.useState(false);
+    return (
+        <div>
+            {!isMobile ? (
+                <Header>
+                    <Wrapper
+                        variant="left"
+                        style={{ gap: "15px", padding: "10px" }}
+                    >
+                        <DerivLogo variant="default" />
+                        <MenuItem
+                            style={{ marginLeft: "15px", gap: "5px" }}
+                            as="button"
+                            leftComponent={
+                                <LabelPairedHouseBlankMdRegularIcon />
+                            }
+                        >
+                            Trader's Hub
+                        </MenuItem>
+
+                        <MenuItem
+                            style={{ marginLeft: "15px", gap: "5px" }}
+                            as="button"
+                            leftComponent={<LegacyReportsIcon iconSize="xs" />}
+                        >
+                            Reports
+                        </MenuItem>
+                    </Wrapper>
+                </Header>
+            ) : (
+                <>
+                    <Button onClick={() => setDrawerOpen(true)}>
+                        Open Drawer
+                    </Button>
+                    <Drawer
+                        width="300px"
+                        isOpen={is_drawer_open}
+                        onCloseDrawer={() => setDrawerOpen(false)}
+                    >
+                        <Drawer.Header
+                            onCloseDrawer={() => setDrawerOpen(false)}
+                        >
+                            <DerivLogo variant="default" />
+                        </Drawer.Header>
+                        <Drawer.Content>
+                            <div style={{display: "flex", flexDirection: "column"}}>
+                                <MenuItem
+                                    style={{ gap: "5px", display: "flex", padding: "10px" }}
+                                    active
+                                    as="button"
+                                    leftComponent={
+                                        <LabelPairedHouseBlankMdRegularIcon />
+                                    }
+                                    rightComponent={<LegacyChevronRight2pxIcon iconSize="xs" />}
+                                >
+                                    Trader's Hub
+                                </MenuItem>
+
+                            </div>
+                        </Drawer.Content>
+                        <Drawer.Footer>This is a footer</Drawer.Footer>
+                    </Drawer>
+                </>
+            )}
+        </div>
+    );
+};
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
diff --git a/src/components/AppLayout/Header/DerivLogo/index.tsx b/src/components/AppLayout/DerivLogo/index.tsx
similarity index 100%
rename from src/components/AppLayout/Header/DerivLogo/index.tsx
rename to src/components/AppLayout/DerivLogo/index.tsx
diff --git a/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx b/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
index 838073c5..845a5257 100644
--- a/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
+++ b/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
@@ -22,7 +22,6 @@ describe("DrawerFooter Component", () => {
         );
 
         const contentElement = screen.getByText("some test content");
-        screen.debug();
         expect(contentElement).toBeInTheDocument();
         expect(contentElement).toHaveClass("deriv-drawer__footer test-class");
     });
diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx
index 9ceb5526..d37d45d0 100644
--- a/src/components/AppLayout/Header/index.tsx
+++ b/src/components/AppLayout/Header/index.tsx
@@ -1,7 +1,5 @@
 import { ComponentProps, PropsWithChildren } from "react";
 import clsx from "clsx";
-import { DerivLogo } from "./DerivLogo";
-import { MenuItem } from "./MenuItem";
 import "./Header.scss";
 
 /**
@@ -21,7 +19,5 @@ export const Header = ({
     </header>
 );
 
-Header.DerivLogo = DerivLogo;
-Header.MenuItem = MenuItem;
 
 Header.displayName = "Header";
diff --git a/src/components/AppLayout/Header/MenuItem/MenuItem.scss b/src/components/AppLayout/MenuItem/MenuItem.scss
similarity index 100%
rename from src/components/AppLayout/Header/MenuItem/MenuItem.scss
rename to src/components/AppLayout/MenuItem/MenuItem.scss
diff --git a/src/components/AppLayout/Header/MenuItem/index.tsx b/src/components/AppLayout/MenuItem/index.tsx
similarity index 100%
rename from src/components/AppLayout/Header/MenuItem/index.tsx
rename to src/components/AppLayout/MenuItem/index.tsx
diff --git a/src/components/AppLayout/__test__/DerivLogo.spec.tsx b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
index 86d61019..90561f45 100644
--- a/src/components/AppLayout/__test__/DerivLogo.spec.tsx
+++ b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { DerivLogo } from "../Header/DerivLogo";
+import { DerivLogo } from "../DerivLogo";
 
 describe("DerivLogo Component", () => {
     it("renders default logo with correct size", () => {
diff --git a/src/components/AppLayout/__test__/MenuItem.spec.tsx b/src/components/AppLayout/__test__/MenuItem.spec.tsx
index c93c9486..28b60b5e 100644
--- a/src/components/AppLayout/__test__/MenuItem.spec.tsx
+++ b/src/components/AppLayout/__test__/MenuItem.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MenuItem } from "../Header/MenuItem";
+import { MenuItem } from "../MenuItem";
 
 describe("MenuItem Component", () => {
     it('renders as a button when "as" prop is "button"', () => {
diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts
index b01cea9d..884326ae 100644
--- a/src/components/AppLayout/index.ts
+++ b/src/components/AppLayout/index.ts
@@ -1,4 +1,6 @@
+export { DerivLogo } from "./DerivLogo";
 export { Drawer } from "./Drawer";
 export { Footer } from "./Footer";
 export { Header } from "./Header";
+export { MenuItem } from "./MenuItem";
 export { Wrapper } from "./Wrapper";
diff --git a/src/main.ts b/src/main.ts
index c66997b8..f3cfc8cd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,5 +23,5 @@ export { ToggleSwitch } from "./components/ToggleSwitch";
 export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks";
 export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
-export { Header, Footer, Wrapper, Drawer } from "./components/AppLayout";
+export { Header, Footer, Wrapper, Drawer, DerivLogo, MenuItem } from "./components/AppLayout";
 export { ContextMenu } from "./components/ContextMenu";
diff --git a/stories/ContextMenu.stories.tsx b/stories/ContextMenu.stories.tsx
index fdce32bf..aebc322f 100644
--- a/stories/ContextMenu.stories.tsx
+++ b/stories/ContextMenu.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button, ContextMenu } from "../src/main";
-import { useEffect, useState } from "react";
+import { ContextMenu } from "../src/main";
 
 const meta = {
     title: "Components/ContextMenu",
@@ -11,7 +10,7 @@ const meta = {
     },
     tags: ["autodocs"],
     args: {
-        isOpen: false,
+        isOpen: true,
     },
     argTypes: {
         isOpen: {
@@ -28,21 +27,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     name: "Default ContextMenu",
-    args: {
-        isOpen: true,
-    },
     render: (args) => {
-        const [isOpen, setIsOpen] = useState(args.isOpen);
-
-        useEffect(() => {
-            setIsOpen(args.isOpen);
-        }, [args.isOpen]);
-
         return (
             <div style={{ width: "800px", height: "500px" }}>
                 <ContextMenu
-                    isOpen={isOpen}
-                    style={{ position: "absolute", top: 60, left: 10 }}
+                    isOpen={args.isOpen}
+                    style={{ position: "absolute", top: 10, left: 10 }}
                 >
                     <ul>
                         <li>Item 1</li>
@@ -50,13 +40,6 @@ export const Default: Story = {
                         <li>Item 3</li>
                     </ul>
                 </ContextMenu>
-                <Button
-                    style={{ position: "relative" }}
-                    size="sm"
-                    onClick={() => setIsOpen(!isOpen)}
-                >
-                    Toggle ContextMenu
-                </Button>
             </div>
         );
     },