Skip to content

Commit ce63744

Browse files
ARYANSHAH1567ARYANSHAH1567
authored
Merge branch 'master' into aryanshah/fix_dialog_code
2 parents b001d23 + fdadd45 commit ce63744

5 files changed

Lines changed: 428 additions & 151 deletions

File tree

‎onRenderBody.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ const MagicScriptTag = (props) => {
2626
}
2727
const root = document.documentElement;
2828
const iterate = (obj) => {
29-
Object.keys(obj).forEach(key => {
30-
if (typeof obj[key] === 'object') {
31-
iterate(obj[key])
32-
} else {
33-
root.style.setProperty("--" + key, obj[key])
34-
}
35-
})
29+
if (!obj) return;
30+
Object.keys(obj).forEach(key => {
31+
if (typeof obj[key] === 'object') {
32+
iterate(obj[key])
33+
} else {
34+
root.style.setProperty("--" + key, obj[key])
35+
}
36+
})
3637
}
3738
const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
3839
const theme = parsedTheme[colorMode]

‎src/components/SistentNavigation/toc.style.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,15 @@ const TOCWrapper = styled.div`
4242
margin-bottom: 1rem;
4343
}
4444
45+
.toc-list {
46+
flex-grow: 1;
47+
overflow-y: auto;
48+
padding-right: 0.5rem;
49+
max-height: 530px;
50+
position: sticky;
51+
z-index: 1000;
52+
}
53+
4554
.toc-sub-heading {
4655
color: ${(props) => props.theme.text};
4756
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

‎src/sections/Projects/Sistent/components/text-input/code.js‎

Lines changed: 216 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,64 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
4-
import { SistentLayout } from "../../sistent-layout";
4+
5+
import { SistentThemeProvider, Input } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
7+
58

69
import TabButton from "../../../../../reusecore/Button";
10+
import { SistentLayout } from "../../sistent-layout";
11+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
12+
13+
const codes = [
14+
"<Input placeholder=\"Enter your name\" />",
15+
`<Input
16+
label="Email Address"
17+
type="email"
18+
placeholder="example@domain.com"
19+
required
20+
/>`,
21+
`<Input
22+
placeholder="Share your thoughts..."
23+
multiline
24+
rows={4}
25+
/>`,
26+
`<Input color="primary" placeholder="Primary" />
27+
<Input color="secondary" placeholder="Secondary" />
28+
<Input color="success" placeholder="Success" />`,
29+
`<Input
30+
type="password"
31+
label="Password"
32+
placeholder="Enter password"
33+
required
34+
/>
35+
<Input
36+
type="number"
37+
label="Age"
38+
placeholder="25"
39+
/>
40+
<Input
41+
type="tel"
42+
label="Phone"
43+
placeholder="+1 (555) 123-4567"
44+
/>`,
45+
`<Input
46+
label="Username"
47+
placeholder="Enter username"
48+
error
49+
helperText="Username is already taken"
50+
/>`,
51+
`<Input
52+
label="Read-only Field"
53+
value="This field is disabled"
54+
disabled
55+
/>`
56+
];
757

858
const TextInputCode = () => {
959
const location = useLocation();
60+
const { isDark } = useStyledDarkMode();
61+
const [inputValue, setInputValue] = useState("");
1062

1163
return (
1264
<SistentLayout title="Text Input">
@@ -15,11 +67,9 @@ const TextInputCode = () => {
1567
<h2>Text Input</h2>
1668
</a>
1769
<p>
18-
Text inputs are important elements that help users interact with an
19-
experience by providing text commands that will in turn return
20-
expected results. These commands can range from providing a free range
21-
of personal information to entering a limited number of characters for
22-
a use case.
70+
Input components provide users with the ability to enter text data in forms and interfaces.
71+
They support various input types, validation states, and customization options for creating
72+
effective data collection experiences.
2373
</p>
2474
<div className="filterBtns">
2575
<TabButton
@@ -56,10 +106,167 @@ const TextInputCode = () => {
56106
title="Code"
57107
/>
58108
</div>
59-
<div className="main-content">Sorry, this page is still under work</div>
109+
<div className="main-content">
110+
<p>
111+
The <code>Input</code> component is essential for collecting user data in forms.
112+
It provides immediate feedback during data entry, supports various input types,
113+
and maintains consistency with your application's design system.
114+
</p>
115+
116+
<a id="Basic Input">
117+
<h2>Basic Text Input</h2>
118+
</a>
119+
<p>
120+
A simple input field for collecting single-line text data. This is the most common
121+
form of text input used across applications.
122+
</p>
123+
<div className="showcase">
124+
<div className="items">
125+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
126+
<Input placeholder="Enter your name" />
127+
</SistentThemeProvider>
128+
</div>
129+
<CodeBlock name="input-basic" code={codes[0]} />
130+
</div>
131+
132+
<a id="Input with Label">
133+
<h2>Labeled Input</h2>
134+
</a>
135+
<p>
136+
Inputs with labels provide better accessibility and user guidance. Labels clearly
137+
identify the purpose of each input field and support screen readers.
138+
</p>
139+
<div className="showcase">
140+
<div className="items">
141+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
142+
<Input
143+
label="Email Address"
144+
type="email"
145+
placeholder="example@domain.com"
146+
required
147+
/>
148+
</SistentThemeProvider>
149+
</div>
150+
<CodeBlock name="input-labeled" code={codes[1]} />
151+
</div>
152+
153+
<a id="Multiline Input">
154+
<h2>Multiline Text Input</h2>
155+
</a>
156+
<p>
157+
For longer text content that may span multiple lines. The multiline input
158+
automatically expands to accommodate content and provides users with adequate space.
159+
</p>
160+
<div className="showcase">
161+
<div className="items">
162+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
163+
<Input
164+
placeholder="Share your thoughts..."
165+
multiline
166+
rows={4}
167+
/>
168+
</SistentThemeProvider>
169+
</div>
170+
<CodeBlock name="input-multiline" code={codes[2]} />
171+
</div>
172+
173+
<a id="Color Options">
174+
<h2>Color Options</h2>
175+
</a>
176+
<p>
177+
Input components support various color themes to match your application's
178+
design system. Colors can convey different meanings or states within your interface.
179+
</p>
180+
<div className="showcase">
181+
<div className="items">
182+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
183+
<div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: "flex-start" }}>
184+
<Input color="primary" placeholder="Primary" />
185+
<Input color="secondary" placeholder="Secondary" />
186+
<Input color="success" placeholder="Success" />
187+
</div>
188+
</SistentThemeProvider>
189+
</div>
190+
<CodeBlock name="input-colors" code={codes[3]} />
191+
</div>
192+
193+
<a id="Input Types">
194+
<h2>Different Input Types</h2>
195+
</a>
196+
<p>
197+
Various input types provide specialized behavior and validation for different
198+
data formats. Choose the appropriate type to enhance user experience and data quality.
199+
</p>
200+
<div className="showcase">
201+
<div className="items">
202+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
203+
<div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: "flex-start" }}>
204+
<Input
205+
type="password"
206+
label="Password"
207+
placeholder="Enter password"
208+
required
209+
/>
210+
<Input
211+
type="number"
212+
label="Age"
213+
placeholder="25"
214+
/>
215+
<Input
216+
type="tel"
217+
label="Phone"
218+
placeholder="+1 (555) 123-4567"
219+
/>
220+
</div>
221+
</SistentThemeProvider>
222+
</div>
223+
<CodeBlock name="input-types" code={codes[4]} />
224+
</div>
225+
226+
<a id="Error State">
227+
<h2>Error State</h2>
228+
</a>
229+
<p>
230+
Error states provide visual feedback when validation fails. Combined with helper text,
231+
they guide users toward resolving input issues effectively.
232+
</p>
233+
<div className="showcase">
234+
<div className="items">
235+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
236+
<Input
237+
label="Username"
238+
placeholder="Enter username"
239+
error
240+
helperText="Username is already taken"
241+
/>
242+
</SistentThemeProvider>
243+
</div>
244+
<CodeBlock name="input-error" code={codes[5]} />
245+
</div>
246+
247+
<a id="Disabled State">
248+
<h2>Disabled State</h2>
249+
</a>
250+
<p>
251+
Disabled inputs are non-interactive and typically used for read-only data
252+
or when certain conditions haven't been met to enable the input.
253+
</p>
254+
<div className="showcase">
255+
<div className="items">
256+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
257+
<Input
258+
label="Read-only Field"
259+
value="This field is disabled"
260+
disabled
261+
/>
262+
</SistentThemeProvider>
263+
</div>
264+
<CodeBlock name="input-disabled" code={codes[6]} />
265+
</div>
266+
</div>
60267
</div>
61268
</SistentLayout>
62269
);
63270
};
64271

65-
export default TextInputCode;
272+
export default TextInputCode;

0 commit comments

Comments
 (0)