Skip to content

Commit 17fd6c9

Browse files
Ayushmore1214Ayushmore1214
committed
[Docs] Add Dialog component with overview, guidance, and code examples
Signed-off-by: Ayush More <ayushmore42595@gmail.com>
1 parent 68daf27 commit 17fd6c9

4 files changed

Lines changed: 199 additions & 0 deletions

File tree

‎src/sections/Projects/Sistent/components/content.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@ const componentsData = [
126126
url: "/projects/sistent/components/icons",
127127
src: "/icons"
128128
},
129+
{
130+
id: 17,
131+
name: "Dialog",
132+
description: "Dialogs display important prompts or confirmation requests that interrupt user interaction flow.",
133+
url: "/projects/sistent/components/dialog",
134+
src: "/dialog",
135+
},
136+
129137
];
130138

131139
module.exports = { componentsData };

‎src/sections/Projects/Sistent/components/dialog/code.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { useState } from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import {
6+
Dialog, DialogTitle, DialogContent, DialogActions, Button, SistentThemeProvider
7+
} from "@layer5/sistent";
8+
9+
import { SistentLayout } from "../../sistent-layout";
10+
import TabButton from "../../../../../reusecore/Button";
11+
import { CodeBlock } from "../button/code-block";
12+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
13+
14+
const dialogCodeExample = `
15+
<Button onClick={handleOpen}>Open Dialog</Button>
16+
<Dialog open={open} onClose={handleClose}>
17+
<DialogTitle>Dialog Title</DialogTitle>
18+
<DialogContent>This is a dialog example.</DialogContent>
19+
<DialogActions>
20+
<Button onClick={handleClose}>Cancel</Button>
21+
<Button color="primary" onClick={handleClose}>Confirm</Button>
22+
</DialogActions>
23+
</Dialog>
24+
`;
25+
26+
const DialogCode = () => {
27+
const location = useLocation();
28+
const { isDark } = useStyledDarkMode();
29+
const [open, setOpen] = useState(false);
30+
31+
return (
32+
<SistentLayout title="Dialog Code">
33+
<div className="content">
34+
<a id="Identity">
35+
<h2>Dialog</h2>
36+
</a>
37+
<p>
38+
This section provides code examples and snippets to help you implement Dialogs quickly.
39+
</p>
40+
41+
<div className="filterBtns">
42+
<TabButton
43+
title="Overview"
44+
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
45+
onClick={() => navigate("/projects/sistent/components/dialog")}
46+
/>
47+
<TabButton
48+
title="Guidance"
49+
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
50+
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
51+
/>
52+
<TabButton
53+
title="Code"
54+
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
55+
onClick={() => navigate("/projects/sistent/components/dialog/code")}
56+
/>
57+
</div>
58+
59+
<div className="main-content">
60+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
61+
<Button onClick={() => setOpen(true)}>Launch Dialog</Button>
62+
<Dialog open={open} onClose={() => setOpen(false)}>
63+
<DialogTitle>Sample Dialog</DialogTitle>
64+
<DialogContent>This is the content of the dialog.</DialogContent>
65+
<DialogActions>
66+
<Button onClick={() => setOpen(false)}>Cancel</Button>
67+
<Button color="primary" onClick={() => setOpen(false)}>Ok</Button>
68+
</DialogActions>
69+
</Dialog>
70+
</SistentThemeProvider>
71+
72+
<CodeBlock name="dialog-basic" code={dialogCodeExample} />
73+
</div>
74+
</div>
75+
</SistentLayout>
76+
);
77+
};
78+
79+
export default DialogCode;

‎src/sections/Projects/Sistent/components/dialog/guidance.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, SistentThemeProvider } from "@layer5/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
import { Row } from "../../../../../reusecore/Layout";
10+
11+
const DialogGuidance = () => {
12+
const location = useLocation();
13+
const { isDark } = useStyledDarkMode();
14+
const [open, setOpen] = React.useState(false);
15+
16+
return (
17+
<SistentLayout title="Dialog">
18+
<div className="content">
19+
<a id="Functionality">
20+
<h2>Dialog Functionality</h2>
21+
</a>
22+
<p>
23+
Dialogs interrupt users with critical information or actions.
24+
Use them for alerts, confirmations, or forms that require immediate attention.
25+
</p>
26+
27+
<Row $Hcenter className="image-container">
28+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
29+
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
30+
<Dialog open={open} onClose={() => setOpen(false)}>
31+
<DialogTitle>Delete Item</DialogTitle>
32+
<DialogContent>Are you sure you want to delete this item?</DialogContent>
33+
<DialogActions>
34+
<Button onClick={() => setOpen(false)}>Cancel</Button>
35+
<Button color="secondary" onClick={() => setOpen(false)}>Delete</Button>
36+
</DialogActions>
37+
</Dialog>
38+
</SistentThemeProvider>
39+
</Row>
40+
</div>
41+
</SistentLayout>
42+
);
43+
};
44+
45+
export default DialogGuidance;

‎src/sections/Projects/Sistent/components/dialog/index.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, SistentThemeProvider } from "@layer5/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
10+
const SistentDialog = () => {
11+
const { isDark } = useStyledDarkMode();
12+
const location = useLocation();
13+
const [open, setOpen] = React.useState(false);
14+
15+
const handleOpen = () => setOpen(true);
16+
const handleClose = () => setOpen(false);
17+
18+
return (
19+
<SistentLayout title="Dialog">
20+
<div className="content">
21+
<a id="Identity">
22+
<h2>Dialog</h2>
23+
</a>
24+
<p>
25+
The `Dialog` component provides a modal UI that interrupts the user's flow to display important content or interactions.
26+
It's commonly used for confirmations, forms, or alerts.
27+
</p>
28+
<div className="filterBtns">
29+
<TabButton
30+
title="Overview"
31+
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
32+
onClick={() => navigate("/projects/sistent/components/dialog")}
33+
/>
34+
<TabButton
35+
title="Guidance"
36+
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
37+
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
38+
/>
39+
<TabButton
40+
title="Code"
41+
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
42+
onClick={() => navigate("/projects/sistent/components/dialog/code")}
43+
/>
44+
</div>
45+
46+
<div className="main-content">
47+
<a id="Basic Usage">
48+
<h3>Basic Usage</h3>
49+
</a>
50+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
51+
<Button onClick={handleOpen}>Open Dialog</Button>
52+
<Dialog open={open} onClose={handleClose}>
53+
<DialogTitle>Dialog Title</DialogTitle>
54+
<DialogContent>This is a simple dialog box.</DialogContent>
55+
<DialogActions>
56+
<Button onClick={handleClose}>Cancel</Button>
57+
<Button onClick={handleClose} color="primary">Confirm</Button>
58+
</DialogActions>
59+
</Dialog>
60+
</SistentThemeProvider>
61+
</div>
62+
</div>
63+
</SistentLayout>
64+
);
65+
};
66+
67+
export default SistentDialog;

0 commit comments

Comments
 (0)