Merge pull request #19 from aum-deriv/deriv-com/aum/layout

[FEQ] aum/FEQ-1579/PageLayout-component

lib/components/Layout/PageLayout.scss

@@ -0,0 +1,25 @@
+.layout {
+    width: 100%;
+    display: flex;
+    gap: 1.5rem;
+    padding-top: 1.5rem;
+
+    @include mobile {
+        flex-direction: column;
+    }
+
+    &__left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__right {
+        display: flex;
+        flex-direction: column;
+    }
+}

lib/components/Layout/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDevice } from '../../hooks/useDevice';
+import './PageLayout.scss';
+
+type PageLayoutProps = {
+    left?: JSX.Element;
+    right?: JSX.Element;
+};
+
+export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
+    const {isMobile} = useDevice();
+
+    return <div className="layout">
+        {left && !isMobile && <div className="layout__left">{left}</div>}
+        {children && <div className="layout__content">{children}</div>}
+        {right && <div className="layout__right">{right}</div>}
+    </div>
+}

lib/components/PageLayout/PageLayout.scss

@@ -0,0 +1,25 @@
+.derivs-page-layout {
+    width: 100%;
+    display: flex;
+    gap: 1.5rem;
+    padding-top: 1.5rem;
+
+    @include mobile {
+        flex-direction: column;
+    }
+
+    &__left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__right {
+        display: flex;
+        flex-direction: column;
+    }
+}

lib/components/PageLayout/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDevice } from '../../hooks/useDevice';
+import './PageLayout.scss';
+
+type PageLayoutProps = {
+    left?: JSX.Element;
+    right?: JSX.Element;
+};
+
+export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
+    const {isMobile} = useDevice();
+
+    return <div className="derivs-page-layout">
+        {left && !isMobile && <div className="derivs-page-layout__left">{left}</div>}
+        {children && <div className="derivs-page-layout__content">{children}</div>}
+        {right && <div className="derivs-page-layout__right">{right}</div>}
+    </div>
+}

lib/main.ts

@@ -1,7 +1,10 @@
-export { Loader } from "./components/Loader";
 export { Button } from "./components/Button";
-export { Text } from "./components/Text";
+export { Input } from "./components/Input";
+export { PageLayout } from "./components/Layout";
+export { Loader } from "./components/Loader";
 export { Tab, Tabs } from "./components/Tabs";
+export { Text } from "./components/Text";
 export { Tooltip } from "./components/Tooltip";
 export {ToggleSwitch} from "./components/ToggleSwitch"
 export { Input } from "./components/Input";
+

src/stories/PageLayout.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { PageLayout } from "../../lib/components/PageLayout";
+
+const Pane: React.FC<React.PropsWithChildren<{ name: string }>> = ({
+    children,
+    name,
+}) => {
+    return (
+        <div
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                border: "solid 1px black",
+            }}
+        >
+            <span style={{ fontSize: "xx-large", fontWeight: "bold" }}>
+                {name} Pane
+            </span>
+            <span>{children}</span>
+        </div>
+    );
+};
+
+const meta = {
+    title: "Components/PageLayout",
+    component: PageLayout,
+    args: {
+        left: (
+            <Pane name="Left">
+                <div style={{ fontWeight: "bold" }}>
+                    *This pane is hidden in mobile view.
+                </div>
+                The content on the left. Change the preview size to see mobile
+                view.
+            </Pane>
+        ),
+        right: <Pane name="Right">The content on the right.</Pane>,
+        children: (
+            <Pane name="Content">
+                <div style={{ fontWeight: "bold" }}>
+                    The content is rendered here. The content can be passed as
+                    children.
+                </div>
+                <div style={{ textWrap: "wrap" }}>
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since the 1500s, when an unknown
+                    printer took a galley of type and scrambled it to make a
+                    type specimen book. It has survived not only five centuries,
+                    but also the leap into electronic typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with
+                    the release of Letraset sheets containing Lorem Ipsum
+                    passages, and more recently with desktop publishing software
+                    like Aldus PageMaker including versions of Lorem Ipsum.
+                </div>
+            </Pane>
+        ),
+    },
+    argTypes: {
+        left: {
+            control: false,
+            description:
+                "JSX element to be rendered on the left of the content as render-prop.",
+        },
+        right: {
+            control: false,
+            description:
+                "JSX element to be rendered on the right of the content as render-prop.",
+        },
+        children: {
+            control: false,
+            description: "Children to be rendered as the content.",
+        },
+    },
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    render: ({ children, left, right }) => (
+        <PageLayout left={left} right={right}>
+            {children}
+        </PageLayout>
+    ),
+} satisfies Meta<typeof PageLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+    name: "PageLayout",
+};