Skip to content

Commit ffc106c

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
guidance.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent e3eefd0 commit ffc106c

1 file changed

Lines changed: 299 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/stepper

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

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
import React, { useState } from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { CustomizedStepper, useStepper, SistentThemeProvider, Box, Typography, Button } from "@sistent/sistent";
5+
import { SistentLayout } from "../../sistent-layout";
6+
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
import PersonIcon from "@mui/icons-material/Person";
10+
import SettingsIcon from "@mui/icons-material/Settings";
11+
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
12+
import DescriptionIcon from "@mui/icons-material/Description";
13+
import CodeIcon from "@mui/icons-material/Code";
14+
import IntegrationInstructionsIcon from "@mui/icons-material/IntegrationInstructions";
15+
16+
const StepOne = () => (
17+
<Box sx={{ p: 2 }}>
18+
<Typography variant="h6" gutterBottom>
19+
User Information
20+
</Typography>
21+
<Typography variant="body1">
22+
Please provide your basic information to get started with the setup process.
23+
</Typography>
24+
</Box>
25+
);
26+
27+
const StepTwo = () => (
28+
<Box sx={{ p: 2 }}>
29+
<Typography variant="h6" gutterBottom>
30+
Account Settings
31+
</Typography>
32+
<Typography variant="body1">
33+
Configure your account preferences and notification settings.
34+
</Typography>
35+
</Box>
36+
);
37+
38+
const StepThree = () => (
39+
<Box sx={{ p: 2 }}>
40+
<Typography variant="h6" gutterBottom>
41+
Payment Information
42+
</Typography>
43+
<Typography variant="body1">
44+
Enter your payment details to complete the account setup.
45+
</Typography>
46+
</Box>
47+
);
48+
49+
50+
// How to use stepper components
51+
const HowToStep1 = () => (
52+
<Box sx={{ p: 2 }}>
53+
<Typography variant="h6" gutterBottom>
54+
1. Import Dependencies
55+
</Typography>
56+
<Typography variant="body1">
57+
Import CustomizedStepper, useStepper from @sistent/sistent and your icons
58+
</Typography>
59+
</Box>
60+
);
61+
62+
const HowToStep2 = () => (
63+
<Box sx={{ p: 2 }}>
64+
<Typography variant="h6" gutterBottom>
65+
2. Create Step Components
66+
</Typography>
67+
<Typography variant="body1">
68+
Define components for each step content (e.g., StepOne, StepTwo, StepThree)
69+
</Typography>
70+
</Box>
71+
);
72+
73+
const HowToStep3 = () => (
74+
<Box sx={{ p: 2 }}>
75+
<Typography variant="h6" gutterBottom>
76+
3. Configure useStepper Hook
77+
</Typography>
78+
<Typography variant="body1">
79+
Call useStepper with steps array containing label, component, and icon
80+
</Typography>
81+
</Box>
82+
);
83+
84+
const HowToStep4 = () => (
85+
<Box sx={{ p: 2 }}>
86+
<Typography variant="h6" gutterBottom>
87+
4. Render Stepper
88+
</Typography>
89+
<Typography variant="body1">
90+
Use CustomizedStepper with stepLabels, activeStep, icons and ActiveStepComponent
91+
</Typography>
92+
</Box>
93+
);
94+
95+
const StepperGuidance = () => {
96+
const location = useLocation();
97+
const { isDark } = useStyledDarkMode();
98+
99+
// Linear stepper example
100+
const {
101+
activeStep: linearActiveStep,
102+
handleNext: linearNext,
103+
goBack: linearBack,
104+
stepLabels: linearLabels,
105+
icons: linearIcons,
106+
activeStepComponent: LinearActiveComponent
107+
} = useStepper({
108+
steps: [
109+
{ label: "User Info", component: StepOne, icon: PersonIcon },
110+
{ label: "Settings", component: StepTwo, icon: SettingsIcon },
111+
{ label: "Complete", component: StepThree, icon: CheckCircleIcon }
112+
]
113+
});
114+
115+
// How to use stepper example
116+
const {
117+
activeStep: howToActiveStep,
118+
handleNext: howToNext,
119+
goBack: howToBack,
120+
stepLabels: howToLabels,
121+
icons: howToIcons,
122+
activeStepComponent: HowToActiveComponent
123+
} = useStepper({
124+
steps: [
125+
{ label: "Import", component: HowToStep1, icon: CodeIcon },
126+
{ label: "Create Components", component: HowToStep2, icon: DescriptionIcon },
127+
{ label: "Configure Hook", component: HowToStep3, icon: SettingsIcon },
128+
{ label: "Render", component: HowToStep4, icon: IntegrationInstructionsIcon }
129+
]
130+
});
131+
132+
return (
133+
<SistentLayout title="Stepper">
134+
<div className="content">
135+
<a id="Identity">
136+
<h2>Stepper</h2>
137+
</a>
138+
<p>
139+
This guide provides comprehensive information on when and how to use
140+
steppers effectively in your applications.
141+
</p>
142+
<div className="filterBtns">
143+
<TabButton
144+
className={
145+
location.pathname === "/projects/sistent/components/stepper"
146+
? "active"
147+
: ""
148+
}
149+
onClick={() => navigate("/projects/sistent/components/stepper")}
150+
title="Overview"
151+
/>
152+
<TabButton
153+
className={
154+
location.pathname ===
155+
"/projects/sistent/components/stepper/guidance"
156+
? "active"
157+
: ""
158+
}
159+
onClick={() =>
160+
navigate("/projects/sistent/components/stepper/guidance")
161+
}
162+
title="Guidance"
163+
/>
164+
<TabButton
165+
className={
166+
location.pathname === "/projects/sistent/components/stepper/code"
167+
? "active"
168+
: ""
169+
}
170+
onClick={() => navigate("/projects/sistent/components/stepper/code")}
171+
title="Code"
172+
/>
173+
</div>
174+
<div className="main-content">
175+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
176+
177+
<a id="basic-stepper">
178+
<h2>Basic Stepper Example</h2>
179+
</a>
180+
<p>
181+
Simple 3-step workflow perfect for getting started with steppers. Ideal for linear processes.
182+
</p>
183+
184+
<div className="showcase">
185+
<div className="items">
186+
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
187+
<CustomizedStepper
188+
stepLabels={linearLabels}
189+
activeStep={linearActiveStep}
190+
icons={linearIcons}
191+
>
192+
<LinearActiveComponent />
193+
</CustomizedStepper>
194+
195+
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 2 }}>
196+
<Button
197+
onClick={linearBack}
198+
disabled={linearActiveStep === 0}
199+
variant="outlined"
200+
size="small"
201+
>
202+
Back
203+
</Button>
204+
<Typography variant="caption" color="textSecondary" sx={{ alignSelf: "center" }}>
205+
Step {linearActiveStep + 1} of {linearLabels.length}
206+
</Typography>
207+
<Button
208+
onClick={linearNext}
209+
disabled={linearActiveStep === linearLabels.length - 1}
210+
variant="contained"
211+
size="small"
212+
>
213+
{linearActiveStep === linearLabels.length - 1 ? "Finish" : "Next"}
214+
</Button>
215+
</Box>
216+
</Box>
217+
</div>
218+
</div>
219+
220+
<a id="how-to-use">
221+
<h2>How to Use</h2>
222+
</a>
223+
<p>
224+
Step-by-step guide to implement steppers in application.
225+
</p>
226+
227+
<div className="showcase">
228+
<div className="items">
229+
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
230+
<CustomizedStepper
231+
stepLabels={howToLabels}
232+
activeStep={howToActiveStep}
233+
icons={howToIcons}
234+
orientation="vertical"
235+
>
236+
<HowToActiveComponent />
237+
</CustomizedStepper>
238+
239+
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 2 }}>
240+
<Button
241+
onClick={howToBack}
242+
disabled={howToActiveStep === 0}
243+
variant="outlined"
244+
size="small"
245+
>
246+
Previous
247+
</Button>
248+
<Typography variant="caption" color="textSecondary" sx={{ alignSelf: "center" }}>
249+
Step {howToActiveStep + 1} of {howToLabels.length}
250+
</Typography>
251+
<Button
252+
onClick={howToNext}
253+
disabled={howToActiveStep === howToLabels.length - 1}
254+
variant="contained"
255+
size="small"
256+
>
257+
{howToActiveStep === howToLabels.length - 1 ? "Done" : "Next"}
258+
</Button>
259+
</Box>
260+
</Box>
261+
</div>
262+
</div>
263+
264+
<a id="best-practices">
265+
<h2>Best Practices</h2>
266+
</a>
267+
<br/>
268+
<h3>Step Design</h3>
269+
<ul>
270+
<li>Keep step labels short and descriptive (1-3 words)</li>
271+
<li>Use meaningful icons that relate to step content</li>
272+
<li>Limit to 3-7 steps maximum for better usability</li>
273+
<li>Group related tasks into single steps</li>
274+
</ul>
275+
276+
<h3>Navigation</h3>
277+
<ul>
278+
<li>Always provide a "Back" button (except on first step)</li>
279+
<li>Disable "Next" until current step is valid</li>
280+
<li>Use clear action labels: "Continue", "Next", "Finish"</li>
281+
<li>Show progress indicator (current step / total steps)</li>
282+
</ul>
283+
284+
<h3>User Experience</h3>
285+
<ul>
286+
<li>Validate input before allowing progression</li>
287+
<li>Save progress automatically when possible</li>
288+
<li>Provide clear error messages with solutions</li>
289+
<li>Allow users to edit previous steps</li>
290+
<li>Show completion status for each step</li>
291+
</ul>
292+
</SistentThemeProvider>
293+
</div>
294+
</div>
295+
</SistentLayout>
296+
);
297+
};
298+
299+
export default StepperGuidance;

0 commit comments

Comments
 (0)