Skip to content

Commit fd012ce

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Added other props to the input
Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
1 parent e2acba5 commit fd012ce

3 files changed

Lines changed: 358 additions & 77 deletions

File tree

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

Lines changed: 172 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,64 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44

55
import { SistentThemeProvider, Input } from "@sistent/sistent";
66
import { CodeBlock } from "../button/code-block";
7-
import { SistentLayout } from "../../sistent-layout";
8-
import { Row } from "../../../../../reusecore/Layout";
7+
8+
99
import TabButton from "../../../../../reusecore/Button";
10+
import { SistentLayout } from "../../sistent-layout";
1011
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1112

1213
const codes = [
1314
"<Input placeholder=\"Enter your name\" />",
15+
`<Input
16+
label="Email Address"
17+
type="email"
18+
placeholder="example@domain.com"
19+
required
20+
/>`,
1421
`<Input
1522
placeholder="Share your thoughts..."
1623
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"
1744
/>`,
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+
/>`
1856
];
1957

2058
const TextInputCode = () => {
2159
const location = useLocation();
2260
const { isDark } = useStyledDarkMode();
61+
const [inputValue, setInputValue] = useState("");
2362

2463
return (
2564
<SistentLayout title="Text Input">
@@ -28,8 +67,9 @@ const TextInputCode = () => {
2867
<h2>Text Input</h2>
2968
</a>
3069
<p>
31-
The <code>Input</code> component enables users to enter text data in forms and interfaces.
32-
It provides a clean, accessible way to collect user information with support for different input types and multiline text.
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.
3373
</p>
3474
<div className="filterBtns">
3575
<TabButton
@@ -68,42 +108,160 @@ const TextInputCode = () => {
68108
</div>
69109
<div className="main-content">
70110
<p>
71-
The Input component provides flexible text input capabilities with minimal configuration.
72-
It integrates with Sistent's theming system while maintaining native HTML input behavior
73-
for optimal performance and accessibility.
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.
74114
</p>
75115

76116
<a id="Basic Input">
77-
<h2>Basic Input</h2>
117+
<h2>Basic Text Input</h2>
78118
</a>
79119
<p>
80-
A simple input field for collecting single-line text data. This is the most common form of text input.
120+
A simple input field for collecting single-line text data. This is the most common
121+
form of text input used across applications.
81122
</p>
82123
<div className="showcase">
83124
<div className="items">
84125
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
85126
<Input placeholder="Enter your name" />
86127
</SistentThemeProvider>
87128
</div>
88-
<CodeBlock name="basic-input" code={codes[0]} />
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]} />
89151
</div>
90152

91153
<a id="Multiline Input">
92-
<h2>Multiline Input</h2>
154+
<h2>Multiline Text Input</h2>
93155
</a>
94156
<p>
95-
For longer text content that may span multiple lines. The input automatically expands vertically as users type.
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.
96159
</p>
97160
<div className="showcase">
98161
<div className="items">
99162
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
100163
<Input
101164
placeholder="Share your thoughts..."
102165
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
103261
/>
104262
</SistentThemeProvider>
105263
</div>
106-
<CodeBlock name="multiline-input" code={codes[1]} />
264+
<CodeBlock name="input-disabled" code={codes[6]} />
107265
</div>
108266
</div>
109267
</div>

0 commit comments

Comments
 (0)