Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add Stack component documentation #6301

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: Add Stack component documentation #6301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
108 changes: 108 additions & 0 deletions src/sections/Projects/Sistent/components/stack/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
105 changes: 105 additions & 0 deletions src/sections/Projects/Sistent/components/stack/guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
39 changes: 39 additions & 0 deletions src/sections/Projects/Sistent/components/stack/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;