Skip to content

Commit f5e2fcd

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
authored
Merge pull request #7058 from Rajesh-Nagarajan-11/steeper-comp
Added `Stepper` component to Sistent components page
2 parents 9ce0cb0 + b3c358f commit f5e2fcd

5 files changed

Lines changed: 696 additions & 18 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -95,29 +95,33 @@ export const content = [
9595
{ id: 66, link: "/projects/sistent/components/select/guidance", text: "Select" },
9696
{ id: 67, link: "/projects/sistent/components/select/code", text: "Select" },
9797

98-
{ id: 68, link: "/projects/sistent/components/switch", text: "Switch" },
99-
{ id: 69, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
100-
{ id: 70, link: "/projects/sistent/components/switch/code", text: "Switch" },
98+
{ id: 68, link: "/projects/sistent/components/stepper", text: "Stepper" },
99+
{ id: 69, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
100+
{ id: 70, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
101101

102-
{ id: 71, link: "/projects/sistent/components/tabs", text: "Tabs" },
103-
{ id: 72, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
104-
{ id: 73, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
102+
{ id: 71, link: "/projects/sistent/components/switch", text: "Switch" },
103+
{ id: 72, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
104+
{ id: 73, link: "/projects/sistent/components/switch/code", text: "Switch" },
105105

106-
{ id: 74, link: "/projects/sistent/components/text-field", text: "Text Field" },
107-
{ id: 75, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
108-
{ id: 76, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
106+
{ id: 74, link: "/projects/sistent/components/tabs", text: "Tabs" },
107+
{ id: 75, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
108+
{ id: 76, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
109109

110-
{ id: 77, link: "/projects/sistent/components/text-input", text: "Text Input" },
111-
{ id: 78, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
112-
{ id: 79, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
110+
{ id: 77, link: "/projects/sistent/components/text-field", text: "Text Field" },
111+
{ id: 78, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
112+
{ id: 79, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
113113

114-
{ id: 80, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
115-
{ id: 81, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
116-
{ id: 82, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
114+
{ id: 80, link: "/projects/sistent/components/text-input", text: "Text Input" },
115+
{ id: 81, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
116+
{ id: 82, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
117117

118-
{ id: 83, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
119-
{ id: 84, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
120-
{ id: 85, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
118+
{ id: 83, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
119+
{ id: 84, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
120+
{ id: 85, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
121+
122+
{ id: 86, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
123+
{ id: 87, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
124+
{ id: 88, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
121125

122126

123127

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,13 @@ const componentsData = [
223223
url: "/projects/sistent/components/iconbutton",
224224
src: "/iconbutton",
225225
},
226+
{
227+
id: 30,
228+
name: "Stepper",
229+
description: "Stepper provides a way to display progress through a sequence of logical steps.",
230+
url: "/projects/sistent/components/stepper",
231+
src: "/stepper",
232+
},
226233
];
227234

228235
module.exports = { componentsData };

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { CustomizedStepper, useStepper, SistentThemeProvider, Box, Typography, Button } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import PersonIcon from "@mui/icons-material/Person";
9+
import SettingsIcon from "@mui/icons-material/Settings";
10+
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
11+
12+
import TabButton from "../../../../../reusecore/Button";
13+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
14+
15+
const StepExample = ({ title, content }) => (
16+
<Box sx={{ p: 2, textAlign: "center" }}>
17+
<Typography variant="h6">{title}</Typography>
18+
<Typography variant="body2" color="textSecondary">
19+
{content}
20+
</Typography>
21+
</Box>
22+
);
23+
24+
const codes = [
25+
`import { CustomizedStepper, useStepper, Button, Box } from '@sistent/sistent';
26+
27+
const {
28+
activeStep,
29+
handleNext,
30+
goBack,
31+
stepLabels,
32+
icons,
33+
activeStepComponent: ActiveStepComponent
34+
} = useStepper({ steps: [
35+
{ label: 'User Info', component: StepOne, icon: PersonIcon },
36+
{ label: 'Settings', component: StepTwo, icon: SettingsIcon },
37+
{ label: 'Complete', component: StepThree, icon: CheckCircleIcon }
38+
] });
39+
40+
return (
41+
<div>
42+
<CustomizedStepper stepLabels={stepLabels} activeStep={activeStep} icons={icons}>
43+
<ActiveStepComponent />
44+
</CustomizedStepper>
45+
46+
<Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
47+
<Button onClick={goBack} disabled={activeStep === 0}>Back</Button>
48+
<Button onClick={handleNext}>Next</Button>
49+
</Box>
50+
</div>
51+
);`
52+
];
53+
54+
const StepperCode = () => {
55+
const location = useLocation();
56+
const { isDark } = useStyledDarkMode();
57+
58+
const {
59+
activeStep,
60+
handleNext,
61+
goBack,
62+
stepLabels,
63+
icons,
64+
activeStepComponent: ActiveStepComponent
65+
} = useStepper({
66+
steps: [
67+
{
68+
label: "User Info",
69+
component: () => <StepExample title="User Information" content="Enter your personal details" />,
70+
icon: PersonIcon
71+
},
72+
{
73+
label: "Settings",
74+
component: () => <StepExample title="Account Settings" content="Configure your preferences" />,
75+
icon: SettingsIcon
76+
},
77+
{
78+
label: "Complete",
79+
component: () => <StepExample title="Setup Complete" content="Review and finish" />,
80+
icon: CheckCircleIcon
81+
}
82+
]
83+
});
84+
85+
return (
86+
<SistentLayout title="Stepper">
87+
<div className="content">
88+
<a id="Identity">
89+
<h2>Stepper</h2>
90+
</a>
91+
<p>
92+
Code examples for implementing the Stepper component.
93+
</p>
94+
<div className="filterBtns">
95+
<TabButton
96+
className={
97+
location.pathname === "/projects/sistent/components/stepper"
98+
? "active"
99+
: ""
100+
}
101+
onClick={() => navigate("/projects/sistent/components/stepper")}
102+
title="Overview"
103+
/>
104+
<TabButton
105+
className={
106+
location.pathname ===
107+
"/projects/sistent/components/stepper/guidance"
108+
? "active"
109+
: ""
110+
}
111+
onClick={() =>
112+
navigate("/projects/sistent/components/stepper/guidance")
113+
}
114+
title="Guidance"
115+
/>
116+
<TabButton
117+
className={
118+
location.pathname === "/projects/sistent/components/stepper/code"
119+
? "active"
120+
: ""
121+
}
122+
onClick={() => navigate("/projects/sistent/components/stepper/code")}
123+
title="Code"
124+
/>
125+
</div>
126+
<div className="main-content">
127+
<p>
128+
The Stepper component uses the <code>useStepper</code> hook for state management
129+
and the <code>CustomizedStepper</code> component for rendering.
130+
</p>
131+
132+
<a id="stepper-with-navigation">
133+
<h2>Stepper with Navigation</h2>
134+
</a>
135+
<p>
136+
Enhanced stepper with navigation controls for user interaction.
137+
</p>
138+
<div className="showcase">
139+
<div className="items">
140+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
141+
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
142+
<CustomizedStepper
143+
stepLabels={stepLabels}
144+
activeStep={activeStep}
145+
icons={icons}
146+
>
147+
<ActiveStepComponent />
148+
</CustomizedStepper>
149+
150+
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 2 }}>
151+
<Button
152+
onClick={goBack}
153+
disabled={activeStep === 0}
154+
variant="outlined"
155+
size="small"
156+
>
157+
Back
158+
</Button>
159+
<Typography variant="caption" color="textSecondary" sx={{ alignSelf: "center" }}>
160+
Step {activeStep + 1} of {stepLabels.length}
161+
</Typography>
162+
<Button
163+
onClick={handleNext}
164+
disabled={activeStep === stepLabels.length - 1}
165+
variant="contained"
166+
size="small"
167+
>
168+
{activeStep === stepLabels.length - 1 ? "Finish" : "Next"}
169+
</Button>
170+
</Box>
171+
</Box>
172+
</SistentThemeProvider>
173+
</div>
174+
<CodeBlock name="stepper-navigation" code={codes[0]} />
175+
</div>
176+
</div>
177+
</div>
178+
</SistentLayout>
179+
);
180+
};
181+
182+
export default StepperCode;

0 commit comments

Comments
 (0)