From 32f1b770aa59787bfded135ec34614940086226b Mon Sep 17 00:00:00 2001
From: karan-palan <karanpalan007@gmail.com>
Date: Mon, 10 Mar 2025 14:57:04 +0530
Subject: [PATCH] docs: add Stack documentation

Signed-off-by: karan-palan <karanpalan007@gmail.com>
---
 .../Projects/Sistent/components/content.js    |   8 ++
 .../Projects/Sistent/components/stack/code.js | 108 ++++++++++++++++++
 .../Sistent/components/stack/guidance.js      | 105 +++++++++++++++++
 .../Sistent/components/stack/index.js         |  39 +++++++
 4 files changed, 260 insertions(+)
 create mode 100644 src/sections/Projects/Sistent/components/stack/code.js
 create mode 100644 src/sections/Projects/Sistent/components/stack/guidance.js
 create mode 100644 src/sections/Projects/Sistent/components/stack/index.js

diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js
index d622ff10b49d..c1eeb33bcf53 100644
--- a/src/sections/Projects/Sistent/components/content.js
+++ b/src/sections/Projects/Sistent/components/content.js
@@ -119,6 +119,14 @@ const componentsData = [
     url: "/projects/sistent/components/select",
     src: "/select",
   },
+  {
+    id: 16,
+    name: "Stack",
+    description:
+      "Stack arranges elements in a row or column with consistent spacing and alignment, simplifying layout creation.",
+    url: "/projects/sistent/components/stack",
+    src: "/stack",
+  },
 ];
 
 module.exports = { componentsData };
diff --git a/src/sections/Projects/Sistent/components/stack/code.js b/src/sections/Projects/Sistent/components/stack/code.js
new file mode 100644
index 000000000000..3f3a5bf0e660
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/stack/code.js
@@ -0,0 +1,108 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { Stack, SistentThemeProvider } from "@layer5/sistent";
+import { CodeBlock } from "../button/code-block";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<SistentThemeProvider>
+      <Stack direction="row" spacing={2}>
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+      </Stack>
+  </SistentThemeProvider>`,
+  `<SistentThemeProvider>
+      <Stack direction="column" spacing={3}>
+          <div>Item A</div>
+          <div>Item B</div>
+      </Stack>
+  </SistentThemeProvider>`,
+  `<SistentThemeProvider>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+          <div>Left</div>
+          <div>Right</div>
+      </Stack>
+  </SistentThemeProvider>`,
+];
+
+const StackCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Stack">
+      <div className="content">
+        <a id="Identity">
+          <h2>Stack</h2>
+        </a>
+        <p>
+          The Stack component is a flexible container that helps to arrange child elements
+          in a row or column layout with spacing and alignment options.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/stack" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/stack")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/stack/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/stack/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/stack/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/stack/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <h3>Horizontal Stack</h3>
+          <p>Stacks elements horizontally with spacing.</p>
+          <div className="showcase">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Stack direction="row" spacing={2}>
+                <div>Item 1</div>
+                <div>Item 2</div>
+                <div>Item 3</div>
+              </Stack>
+            </SistentThemeProvider>
+            <CodeBlock name="horizontal-stack" code={codes[0]} />
+          </div>
+
+          <h3>Vertical Stack</h3>
+          <p>Stacks elements vertically with larger spacing.</p>
+          <div className="showcase">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Stack direction="column" spacing={3}>
+                <div>Item A</div>
+                <div>Item B</div>
+              </Stack>
+            </SistentThemeProvider>
+            <CodeBlock name="vertical-stack" code={codes[1]} />
+          </div>
+
+          <h3>Alignment & Justification</h3>
+          <p>Stack items can be aligned and justified.</p>
+          <div className="showcase">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Stack direction="row" alignItems="center" justifyContent="space-between">
+                <div>Left</div>
+                <div>Right</div>
+              </Stack>
+            </SistentThemeProvider>
+            <CodeBlock name="alignment-justification" code={codes[2]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default StackCode;
diff --git a/src/sections/Projects/Sistent/components/stack/guidance.js b/src/sections/Projects/Sistent/components/stack/guidance.js
new file mode 100644
index 000000000000..63b5ad9b89bc
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/stack/guidance.js
@@ -0,0 +1,105 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+
+const StackGuidance = () => {
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Stack">
+      <div className="content">
+        <a id="Identity">
+          <h2>Stack</h2>
+        </a>
+        <p>
+          The Stack component arranges elements in a row or column with
+          consistent spacing and alignment. It’s best used for simple,
+          repetitive layouts, especially when you need uniform spacing between
+          items.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/stack"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/stack")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/stack/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/stack/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/stack/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/stack/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <h3>Best Practices</h3>
+          <ul>
+            <li>
+              <strong>Use Stack for simple layouts:</strong> For more complex
+              grids or responsive breakpoints, consider other layout components
+              (e.g., Grid).
+            </li>
+            <li>
+              <strong>Spacing control:</strong> Leverage <code>spacing</code> to
+              maintain consistent gaps between items.
+            </li>
+            <li>
+              <strong>Direction:</strong> Use <code>direction="row"</code> for
+              horizontal layouts or <code>direction="column"</code> for vertical
+              layouts.
+            </li>
+            <li>
+              <strong>Alignment:</strong> Combine <code>alignItems</code> and{" "}
+              <code>justifyContent</code> to position items. For instance,{" "}
+              <code>alignItems="center"</code> and{" "}
+              <code>justifyContent="space-between"</code>.
+            </li>
+          </ul>
+
+          <h3>Styling & Customization</h3>
+          <p>
+            Stack itself is a layout tool. For visual flair, wrap child elements
+            (e.g., <code>Box</code>) with backgrounds, borders, or other custom
+            styling. This approach keeps layout concerns (Stack) separate from
+            presentation (child components).
+          </p>
+
+          <h3>Real-World Usage</h3>
+          <ul>
+            <li>
+              <strong>Form Layouts:</strong> Stacking labels and inputs
+              vertically with consistent spacing.
+            </li>
+            <li>
+              <strong>Card Groups:</strong> Displaying multiple cards or panels
+              horizontally with even spacing.
+            </li>
+            <li>
+              <strong>Toolbar or Header:</strong> Aligning icons and navigation
+              links in a row with <code>justifyContent="space-between"</code>.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default StackGuidance;
diff --git a/src/sections/Projects/Sistent/components/stack/index.js b/src/sections/Projects/Sistent/components/stack/index.js
new file mode 100644
index 000000000000..6e4c5bdae090
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/stack/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { navigate } from "gatsby";
+
+import { Stack, SistentThemeProvider } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+
+const SistentStack = () => {
+
+  return (
+    <SistentLayout title="Stack">
+      <div className="content">
+        <a id="Identity">
+          <h2>Stack</h2>
+        </a>
+        <p>
+          The Stack component provides a simple way to arrange elements in a <strong/>row<strong/> or <strong/>column<strong/> with customizable spacing.
+        </p>
+        <div className="filterBtns">
+          <TabButton onClick={() => navigate("/projects/sistent/components/stack")} title="Overview" />
+          <TabButton onClick={() => navigate("/projects/sistent/components/stack/guidance")} title="Guidance" />
+          <TabButton onClick={() => navigate("/projects/sistent/components/stack/code")} title="Code" />
+        </div>
+        <div className="main-content">
+          <h3>Basic Usage</h3>
+          <SistentThemeProvider>
+            <Stack direction="row" spacing={2}>
+              <div>Item 1</div>
+              <div>Item 2</div>
+              <div>Item 3</div>
+            </Stack>
+          </SistentThemeProvider>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentStack;