Skip to content

Commit 9d33c71

Browse files
devvsakibdevvsakib
authored
Merge pull request #290 from devvsakib/development
YAML Formatter Tool added #286
2 parents a776173 + e4e98fa commit 9d33c71

File tree

6 files changed

+475
-52
lines changed

6 files changed

+475
-52
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"axios": "^1.2.2",
1717
"classnames": "^2.5.1",
1818
"framer-motion": "^10.8.3",
19+
"js-yaml": "^4.1.0",
1920
"lodash": "^4.17.21",
2021
"lucide-react": "^0.544.0",
2122
"prettier": "^3.3.3",

‎src/components/DevAreaTools/PasswordGenerator.jsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { useState } from "react";
2+
3+
export default function PasswordGenerator() {
4+
const [length, setLength] = useState(12);
5+
const [includeUpper, setIncludeUpper] = useState(true);
6+
const [includeLower, setIncludeLower] = useState(true);
7+
const [includeNumbers, setIncludeNumbers] = useState(true);
8+
const [includeSymbols, setIncludeSymbols] = useState(true);
9+
const [password, setPassword] = useState("");
10+
11+
const generatePassword = () => {
12+
let charset = "";
13+
if (includeUpper) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
14+
if (includeLower) charset += "abcdefghijklmnopqrstuvwxyz";
15+
if (includeNumbers) charset += "0123456789";
16+
if (includeSymbols) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
17+
if (!charset) return setPassword("⚠️ Select at least one option.");
18+
19+
let pass = "";
20+
for (let i = 0; i < length; i++) {
21+
pass += charset.charAt(Math.floor(Math.random() * charset.length));
22+
}
23+
setPassword(pass);
24+
};
25+
26+
const copyPassword = async () => {
27+
if (!password) return;
28+
await navigator.clipboard.writeText(password);
29+
};
30+
31+
return (
32+
<div className="min-h-screen text-white p-8 font-sans">
33+
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-500 drop-shadow-[0_0_10px_rgba(52,211,153,0.6)]">
34+
🔐 Password Generator
35+
</h2>
36+
37+
<div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(52,211,153,0.15)] space-y-4">
38+
<div className="flex items-center justify-between">
39+
<label className="text-sm text-slate-300">Password Length</label>
40+
<input
41+
type="number"
42+
min="4"
43+
max="64"
44+
value={length}
45+
onChange={(e) => setLength(Number(e.target.value))}
46+
className="w-20 text-center bg-[#0f172a] border border-slate-700 rounded-md p-1 text-sm text-slate-200 focus:border-emerald-500 outline-none"
47+
/>
48+
</div>
49+
50+
<div className="grid grid-cols-2 gap-3 mt-2">
51+
<label className="flex items-center gap-2 text-sm text-slate-300">
52+
<input type="checkbox" checked={includeUpper} onChange={() => setIncludeUpper(!includeUpper)} />
53+
Include Uppercase
54+
</label>
55+
<label className="flex items-center gap-2 text-sm text-slate-300">
56+
<input type="checkbox" checked={includeLower} onChange={() => setIncludeLower(!includeLower)} />
57+
Include Lowercase
58+
</label>
59+
<label className="flex items-center gap-2 text-sm text-slate-300">
60+
<input type="checkbox" checked={includeNumbers} onChange={() => setIncludeNumbers(!includeNumbers)} />
61+
Include Numbers
62+
</label>
63+
<label className="flex items-center gap-2 text-sm text-slate-300">
64+
<input type="checkbox" checked={includeSymbols} onChange={() => setIncludeSymbols(!includeSymbols)} />
65+
Include Symbols
66+
</label>
67+
</div>
68+
69+
<div className="flex gap-3 justify-center mt-4">
70+
<button
71+
onClick={generatePassword}
72+
className="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-500 to-green-400 hover:from-emerald-400 hover:to-green-300 shadow-[0_0_12px_rgba(52,211,153,0.4)] transition-all"
73+
>
74+
Generate
75+
</button>
76+
<button
77+
onClick={copyPassword}
78+
className={`px-5 py-2 rounded-lg border border-slate-600 hover:border-emerald-400 transition-all ${!password && "opacity-40 cursor-not-allowed"
79+
}`}
80+
disabled={!password}
81+
>
82+
Copy
83+
</button>
84+
</div>
85+
86+
<div>
87+
<h3 className="font-semibold text-emerald-400 mb-2">Generated Password</h3>
88+
<textarea
89+
readOnly
90+
className="w-full p-3 rounded-md bg-[#0f172a] border border-slate-700 text-slate-200 text-sm"
91+
rows="2"
92+
value={password}
93+
placeholder="Your secure password will appear here..."
94+
/>
95+
</div>
96+
</div>
97+
</div>
98+
);
99+
}

‎src/components/DevAreaTools/YAMLFormatter.jsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, { useState } from "react";
2+
import yaml from "js-yaml";
3+
4+
export default function YAMLFormatter() {
5+
const [input, setInput] = useState("");
6+
const [output, setOutput] = useState("");
7+
const [error, setError] = useState(null);
8+
9+
const handleFormat = () => {
10+
setError(null);
11+
try {
12+
const parsed = yaml.load(input);
13+
const formatted = yaml.dump(parsed, { indent: 2 });
14+
setOutput(formatted);
15+
} catch (err) {
16+
setError("Invalid YAML syntax.");
17+
}
18+
};
19+
20+
const handleMinify = () => {
21+
setError(null);
22+
try {
23+
const parsed = yaml.load(input);
24+
const minified = yaml.dump(parsed, { indent: 0, flowLevel: -1 }).replace(/\n/g, "");
25+
setOutput(minified);
26+
} catch (err) {
27+
setError("Invalid YAML syntax.");
28+
}
29+
};
30+
31+
const handleClear = () => {
32+
setInput("");
33+
setOutput("");
34+
setError(null);
35+
};
36+
37+
return (
38+
<div className="min-h-screen text-white p-8 font-sans">
39+
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-amber-500 drop-shadow-[0_0_10px_rgba(251,191,36,0.6)]">
40+
🧾 YAML Formatter
41+
</h2>
42+
43+
<div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(251,191,36,0.15)]">
44+
<p className="text-sm text-slate-400 mb-4 text-center">
45+
Paste your YAML below to <span className="text-amber-400 font-medium">format</span> or <span className="text-amber-400 font-medium">minify</span>.
46+
</p>
47+
48+
<textarea
49+
value={input}
50+
onChange={(e) => setInput(e.target.value)}
51+
placeholder="Paste YAML here..."
52+
className="w-full min-h-[100px] p-3 rounded-xl bg-[#0f172a] border border-slate-700 focus:border-amber-500 text-sm mb-4 outline-none text-slate-200"
53+
/>
54+
55+
<div className="flex gap-3 justify-center mb-5">
56+
<button
57+
onClick={handleFormat}
58+
className="px-5 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-yellow-400 hover:from-amber-400 hover:to-yellow-300 shadow-[0_0_12px_rgba(251,191,36,0.4)] transition-all"
59+
>
60+
Format
61+
</button>
62+
<button
63+
onClick={handleMinify}
64+
className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
65+
>
66+
Minify
67+
</button>
68+
<button
69+
onClick={handleClear}
70+
className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
71+
>
72+
Clear
73+
</button>
74+
</div>
75+
76+
{error && (
77+
<div className="mb-5 p-3 rounded-md bg-red-900/30 border border-red-500/30 text-red-300 text-sm">
78+
{error}
79+
</div>
80+
)}
81+
82+
<div>
83+
<h3 className="font-semibold text-amber-400 mb-2">Output</h3>
84+
<pre className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 h-60 overflow-auto text-xs text-slate-300 whitespace-pre-wrap">
85+
{output || "No formatted YAML yet"}
86+
</pre>
87+
</div>
88+
</div>
89+
90+
<p className="mt-6 text-center text-xs text-slate-500">
91+
🟡 This tool formats YAML locally in your browser.
92+
</p>
93+
</div>
94+
);
95+
}

‎src/pages/DevArea/DevTools.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import JWTDecoder from "../../components/DevAreaTools/JwtDecoder";
66
import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
77
import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
88
import Base64Tool from "../../components/DevAreaTools/Base64Tool";
9+
import YAMLFormatter from "../../components/DevAreaTools/YAMLFormatter";
10+
import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
911

1012
const DevTools = () => {
1113
const { tool } = useParams();
@@ -16,7 +18,9 @@ const DevTools = () => {
1618
"json-formatter": <JSONFormatter />,
1719
"url-encoder-decoder": <URLEncoderDecoder />,
1820
"xml-formatter": <XmlFormatter />,
21+
"yaml-formatter": <YAMLFormatter />,
1922
"base64": <Base64Tool />,
23+
"password-generator": <PasswordGenerator />,
2024
}
2125

2226

‎src/pages/DevArea/index.jsx‎

Lines changed: 137 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@ const DevArea = () => {
2626
isAvailable: true
2727
},
2828
{
29-
name: "URL Encoder/Decoder",
30-
link: "/devarea/url-encoder-decoder",
31-
isAvailable: true
29+
name: "URL Encoder/Decoder",
30+
link: "/devarea/url-encoder-decoder",
31+
isAvailable: true
3232
},
33-
3433
{
3534
name: "XML Formatter",
3635
link: "/devarea/xml-formatter",
@@ -39,13 +38,146 @@ const DevArea = () => {
3938
{
4039
name: "YAML Formatter",
4140
link: "/devarea/yaml-formatter",
42-
isAvailable: false
41+
isAvailable: true
4342
},
4443
{
4544
name: "CSV Formatter",
4645
link: "/devarea/csv-formatter",
4746
isAvailable: false
4847
},
48+
// Text & String Tools
49+
{
50+
name: "Text Diff Checker",
51+
link: "/devarea/text-diff",
52+
isAvailable: false
53+
},
54+
{
55+
name: "Case Converter",
56+
link: "/devarea/case-converter",
57+
isAvailable: false
58+
},
59+
{
60+
name: "String Length Counter",
61+
link: "/devarea/string-counter",
62+
isAvailable: false
63+
},
64+
{
65+
name: "Lorem Ipsum Generator",
66+
link: "/devarea/lorem-ipsum",
67+
isAvailable: false
68+
},
69+
// Encoding & Hashing
70+
{
71+
name: "Hash Generator (MD5, SHA)",
72+
link: "/devarea/hash-generator",
73+
isAvailable: false
74+
},
75+
{
76+
name: "UUID Generator",
77+
link: "/devarea/uuid-generator",
78+
isAvailable: false
79+
},
80+
{
81+
name: "HTML Encoder/Decoder",
82+
link: "/devarea/html-encoder-decoder",
83+
isAvailable: false
84+
},
85+
// Code & Data
86+
{
87+
name: "SQL Formatter",
88+
link: "/devarea/sql-formatter",
89+
isAvailable: false
90+
},
91+
{
92+
name: "Regex Tester",
93+
link: "/devarea/regex-tester",
94+
isAvailable: false
95+
},
96+
{
97+
name: "JSON to CSV",
98+
link: "/devarea/json-to-csv",
99+
isAvailable: false
100+
},
101+
{
102+
name: "CSV to JSON",
103+
link: "/devarea/csv-to-json",
104+
isAvailable: false
105+
},
106+
{
107+
name: "Code Minifier",
108+
link: "/devarea/code-minifier",
109+
isAvailable: false
110+
},
111+
{
112+
name: "Code Beautifier",
113+
link: "/devarea/code-beautifier",
114+
isAvailable: false
115+
},
116+
// Color & Design
117+
{
118+
name: "Color Converter",
119+
link: "/devarea/color-converter",
120+
isAvailable: false
121+
},
122+
{
123+
name: "Color Picker",
124+
link: "/devarea/color-picker",
125+
isAvailable: false
126+
},
127+
{
128+
name: "Gradient Generator",
129+
link: "/devarea/gradient-generator",
130+
isAvailable: false
131+
},
132+
// Time & Date
133+
{
134+
name: "Unix Timestamp Converter",
135+
link: "/devarea/timestamp-converter",
136+
isAvailable: false
137+
},
138+
{
139+
name: "Cron Expression Generator",
140+
link: "/devarea/cron-generator",
141+
isAvailable: false
142+
},
143+
// Image & Media
144+
{
145+
name: "Image to Base64",
146+
link: "/devarea/image-to-base64",
147+
isAvailable: false
148+
},
149+
{
150+
name: "QR Code Generator",
151+
link: "/devarea/qr-code-generator",
152+
isAvailable: false
153+
},
154+
// Network & API
155+
{
156+
name: "API Tester",
157+
link: "/devarea/api-tester",
158+
isAvailable: false
159+
},
160+
{
161+
name: "HTTP Status Codes",
162+
link: "/devarea/http-status-codes",
163+
isAvailable: false
164+
},
165+
{
166+
name: "IP Address Lookup",
167+
link: "/devarea/ip-lookup",
168+
isAvailable: false
169+
},
170+
// Security
171+
{
172+
name: "Password Generator",
173+
link: "/devarea/password-generator",
174+
isAvailable: true
175+
},
176+
{
177+
name: "Bcrypt Generator/Checker",
178+
link: "/devarea/bcrypt",
179+
isAvailable: true
180+
}
49181
]
50182
return <Layout>
51183
<div className="px-5 md:px-10">

0 commit comments

Comments
 (0)