Skip to content

Commit 76fc232

Browse files
253eosamclaude
253eosam
and
claude
committed
feat: improve web-preview UX with expanded scenarios and better layout
- Add 15 comprehensive example scenarios organized by categories (Basic/Advanced/Edge Cases) - Implement scroll-to-top behavior when clicking "Try This Example" buttons - Improve card layout with flexbox to position buttons at bottom consistently - Add category styling with section headers and proper spacing - Cover diverse real-world use cases: JIRA tickets, team workflows, hotfixes, releases, etc. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent d03b6bc commit 76fc232

File tree

2 files changed

+232
-56
lines changed

2 files changed

+232
-56
lines changed

‎web-preview/src/App.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,23 @@
255255
color: #666;
256256
}
257257

258+
.scenario-category {
259+
margin-bottom: 3rem;
260+
}
261+
262+
.scenario-category:last-child {
263+
margin-bottom: 0;
264+
}
265+
266+
.category-title {
267+
margin: 0 0 1.5rem 0;
268+
color: #374151;
269+
font-size: 1.3rem;
270+
font-weight: 600;
271+
padding-bottom: 0.5rem;
272+
border-bottom: 3px solid #e5e7eb;
273+
}
274+
258275
.examples-grid {
259276
display: grid;
260277
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -266,6 +283,9 @@
266283
border-radius: 8px;
267284
padding: 1.25rem;
268285
transition: all 0.2s;
286+
display: flex;
287+
flex-direction: column;
288+
height: 100%;
269289
}
270290

271291
.example-card:hover {
@@ -286,6 +306,7 @@
286306
}
287307

288308
.example-details {
309+
flex: 1;
289310
margin-bottom: 1.5rem;
290311
}
291312

@@ -317,6 +338,7 @@
317338
font-weight: 500;
318339
cursor: pointer;
319340
transition: opacity 0.2s;
341+
margin-top: auto;
320342
}
321343

322344
.example-apply-btn:hover {

‎web-preview/src/components/ExampleScenarios.tsx‎

Lines changed: 210 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -11,115 +11,269 @@ interface ExampleScenario {
1111
config: CommitFromBranchConfig;
1212
branch: string;
1313
message: string;
14+
category: string;
1415
}
1516

1617
const EXAMPLE_SCENARIOS: ExampleScenario[] = [
1718
{
18-
name: 'JIRA Ticket Format',
19+
name: '🎫 JIRA Ticket Format',
1920
description: 'Standard format with JIRA ticket prefix',
21+
category: 'Basic',
2022
config: {
2123
includePattern: ['feature/*', 'bugfix/*'],
2224
format: '${ticket}: ${msg}',
23-
fallbackFormat: '${segs[0]}: ${msg}',
25+
fallbackFormat: '[${seg0}] ${msg}',
2426
exclude: []
2527
},
2628
branch: 'feature/ABC-123/user-authentication',
2729
message: 'implement OAuth2 login flow'
2830
},
2931
{
30-
name: 'Simple Prefix',
32+
name: '📦 Simple Prefix',
3133
description: 'Simple branch prefix without ticket requirement',
34+
category: 'Basic',
3235
config: {
3336
includePattern: ['*'],
34-
format: '[${segs[0]}] ${msg}',
35-
fallbackFormat: '[${segs[0]}] ${msg}',
37+
format: '[${seg0}] ${msg}',
38+
fallbackFormat: '[${seg0}] ${msg}',
3639
exclude: []
3740
},
3841
branch: 'feature/user-profile',
3942
message: 'add profile picture upload'
4043
},
4144
{
42-
name: 'Template Replacement',
43-
description: 'Replace entire message with template',
45+
name: '🔥 Hotfix Emergency',
46+
description: 'Emergency hotfix with special formatting',
47+
category: 'Advanced',
4448
config: {
45-
includePattern: ['*'],
46-
format: '${ticket}: ${msg}',
47-
fallbackFormat: '${segs[0]}: ${msg}',
49+
includePattern: ['hotfix/*'],
50+
format: '🚨 HOTFIX ${ticket}: ${msg}',
51+
fallbackFormat: '🚨 HOTFIX [${seg0}]: ${msg}',
4852
exclude: []
4953
},
5054
branch: 'hotfix/URGENT-456/security-fix',
51-
message: 'fix security vulnerability'
55+
message: 'fix critical authentication bypass'
56+
},
57+
{
58+
name: '🏷️ Multi-Segment Branches',
59+
description: 'Using multiple branch segments in templates',
60+
category: 'Advanced',
61+
config: {
62+
includePattern: ['*'],
63+
format: '[${seg0}/${seg1}] ${ticket}: ${msg}',
64+
fallbackFormat: '[${seg0}/${seg1}] ${msg}',
65+
exclude: []
66+
},
67+
branch: 'feature/payments/stripe-integration',
68+
message: 'add payment processing with Stripe API'
5269
},
5370
{
54-
name: 'Skip Existing Prefix',
71+
name: '🚫 Skip Existing Prefix',
5572
description: 'Shows skip behavior when prefix already exists',
73+
category: 'Edge Cases',
5674
config: {
5775
includePattern: ['*'],
5876
format: '${ticket}: ${msg}',
59-
fallbackFormat: '${segs[0]}: ${msg}',
77+
fallbackFormat: '[${seg0}] ${msg}',
6078
exclude: []
6179
},
6280
branch: 'feature/DEF-789/api-refactor',
6381
message: 'DEF-789: refactor user API endpoints'
6482
},
6583
{
66-
name: 'Complex Pattern Matching',
67-
description: 'Include only specific patterns',
84+
name: '📋 Conventional Commits',
85+
description: 'Following conventional commit standards',
86+
category: 'Advanced',
87+
config: {
88+
includePattern: ['feat/*', 'fix/*', 'docs/*'],
89+
format: '${seg0}(${ticket}): ${msg}',
90+
fallbackFormat: '${seg0}: ${msg}',
91+
exclude: []
92+
},
93+
branch: 'feat/AUTH-456/oauth-integration',
94+
message: 'add Google OAuth integration'
95+
},
96+
{
97+
name: '🌟 Prefix Template',
98+
description: 'Using prefix token for branch segments',
99+
category: 'Advanced',
100+
config: {
101+
includePattern: ['*'],
102+
format: '[${prefix:2}] ${ticket}: ${msg}',
103+
fallbackFormat: '[${prefix:2}] ${msg}',
104+
exclude: []
105+
},
106+
branch: 'feature/backend/database/user-migration',
107+
message: 'migrate user table to new schema'
108+
},
109+
{
110+
name: '🎯 Team-based Branching',
111+
description: 'Different formats based on team prefixes',
112+
category: 'Advanced',
113+
config: {
114+
includePattern: ['frontend/*', 'backend/*', 'mobile/*'],
115+
format: '${seg0}: ${ticket} - ${msg}',
116+
fallbackFormat: '${seg0}: ${msg}',
117+
exclude: []
118+
},
119+
branch: 'frontend/WEB-789/component-library',
120+
message: 'create reusable button component'
121+
},
122+
{
123+
name: '🔍 Pattern Exclusion',
124+
description: 'Complex pattern matching with exclusions',
125+
category: 'Edge Cases',
68126
config: {
69-
includePattern: ['feature/*', 'hotfix/*'],
70-
format: '🚀 ${ticket}: ${msg}',
71-
fallbackFormat: '⚡ ${segs[0]}: ${msg}',
72-
exclude: ['template', 'merge']
127+
includePattern: ['feature/*', 'bugfix/*', 'improvement/*'],
128+
format: '${ticket}: ${msg}',
129+
fallbackFormat: '[${seg0}] ${msg}',
130+
exclude: ['template', 'merge', 'revert']
131+
},
132+
branch: 'improvement/PERF-321/database-optimization',
133+
message: 'optimize database queries for user search'
134+
},
135+
{
136+
name: '📝 Documentation Updates',
137+
description: 'Special format for documentation changes',
138+
category: 'Advanced',
139+
config: {
140+
includePattern: ['docs/*', 'readme/*'],
141+
format: '📚 ${ticket}: ${msg}',
142+
fallbackFormat: '📚 [${seg0}] ${msg}',
143+
exclude: []
73144
},
74-
branch: 'release/v1.2.0',
75-
message: 'prepare release candidate'
145+
branch: 'docs/update-installation-guide',
146+
message: 'update installation instructions for v2.0'
147+
},
148+
{
149+
name: '🧪 Testing Scenarios',
150+
description: 'Format for test-related branches',
151+
category: 'Advanced',
152+
config: {
153+
includePattern: ['test/*', 'testing/*'],
154+
format: '🧪 ${ticket}: ${msg}',
155+
fallbackFormat: '🧪 [${seg0}] ${msg}',
156+
exclude: []
157+
},
158+
branch: 'test/e2e-authentication',
159+
message: 'add end-to-end tests for login flow'
160+
},
161+
{
162+
name: '🎨 Design System',
163+
description: 'Format for design and UI related changes',
164+
category: 'Advanced',
165+
config: {
166+
includePattern: ['design/*', 'ui/*', 'style/*'],
167+
format: '🎨 ${ticket}: ${msg}',
168+
fallbackFormat: '🎨 [${seg0}] ${msg}',
169+
exclude: []
170+
},
171+
branch: 'design/DESIGN-123/color-palette-update',
172+
message: 'update primary color palette for accessibility'
173+
},
174+
{
175+
name: '🐛 Bug Tracking',
176+
description: 'Dedicated bug fix format with issue numbers',
177+
category: 'Basic',
178+
config: {
179+
includePattern: ['bugfix/*', 'fix/*'],
180+
format: '🐛 Fix ${ticket}: ${msg}',
181+
fallbackFormat: '🐛 Fix: ${msg}',
182+
exclude: []
183+
},
184+
branch: 'bugfix/BUG-999/memory-leak',
185+
message: 'resolve memory leak in event listeners'
186+
},
187+
{
188+
name: '🚀 Release Preparation',
189+
description: 'Format for release and deployment branches',
190+
category: 'Advanced',
191+
config: {
192+
includePattern: ['release/*', 'deploy/*'],
193+
format: '🚀 Release ${ticket}: ${msg}',
194+
fallbackFormat: '🚀 ${seg0}: ${msg}',
195+
exclude: []
196+
},
197+
branch: 'release/v2.1.0',
198+
message: 'prepare v2.1.0 with new payment features'
199+
},
200+
{
201+
name: '⚡ Performance Optimization',
202+
description: 'Format for performance improvement branches',
203+
category: 'Advanced',
204+
config: {
205+
includePattern: ['perf/*', 'performance/*', 'optimization/*'],
206+
format: '⚡ ${ticket}: ${msg}',
207+
fallbackFormat: '⚡ [${seg0}] ${msg}',
208+
exclude: []
209+
},
210+
branch: 'perf/PERF-555/lazy-loading',
211+
message: 'implement lazy loading for product images'
76212
}
77213
];
78214

79215
const ExampleScenarios: React.FC<ExampleScenariosProps> = ({ onApplyExample }) => {
216+
const groupedScenarios = EXAMPLE_SCENARIOS.reduce((acc, scenario) => {
217+
if (!acc[scenario.category]) {
218+
acc[scenario.category] = [];
219+
}
220+
acc[scenario.category].push(scenario);
221+
return acc;
222+
}, {} as Record<string, ExampleScenario[]>);
223+
224+
const categoryOrder = ['Basic', 'Advanced', 'Edge Cases'];
225+
80226
return (
81227
<div className="example-scenarios">
82228
<h2>📚 Example Scenarios</h2>
83229
<p className="examples-description">
84230
Try these common configuration patterns to see how they work
85231
</p>
86-
87-
<div className="examples-grid">
88-
{EXAMPLE_SCENARIOS.map((scenario, index) => (
89-
<div key={index} className="example-card">
90-
<div className="example-header">
91-
<h3>{scenario.name}</h3>
92-
<p>{scenario.description}</p>
93-
</div>
94-
95-
<div className="example-details">
96-
<div className="example-item">
97-
<strong>Branch:</strong> <code>{scenario.branch}</code>
98-
</div>
99-
<div className="example-item">
100-
<strong>Message:</strong> <code>{scenario.message}</code>
101-
</div>
102-
<div className="example-item">
103-
<strong>Format:</strong> <code>{scenario.config.format}</code>
104-
</div>
105-
<div className="example-item">
106-
<strong>Include:</strong> <code>{
107-
Array.isArray(scenario.config.includePattern)
108-
? scenario.config.includePattern.join(', ')
109-
: (scenario.config.includePattern || '*')
110-
}</code>
232+
233+
{categoryOrder.map(category => (
234+
<div key={category} className="scenario-category">
235+
<h3 className="category-title">{category}</h3>
236+
<div className="examples-grid">
237+
{groupedScenarios[category]?.map((scenario, index) => (
238+
<div key={index} className="example-card">
239+
<div className="example-header">
240+
<h4>{scenario.name}</h4>
241+
<p>{scenario.description}</p>
242+
</div>
243+
244+
<div className="example-details">
245+
<div className="example-item">
246+
<strong>Branch:</strong> <code>{scenario.branch}</code>
247+
</div>
248+
<div className="example-item">
249+
<strong>Message:</strong> <code>{scenario.message}</code>
250+
</div>
251+
<div className="example-item">
252+
<strong>Format:</strong> <code>{scenario.config.format}</code>
253+
</div>
254+
<div className="example-item">
255+
<strong>Include:</strong> <code>{
256+
Array.isArray(scenario.config.includePattern)
257+
? scenario.config.includePattern.join(', ')
258+
: (scenario.config.includePattern || '*')
259+
}</code>
260+
</div>
261+
</div>
262+
263+
<button
264+
className="example-apply-btn"
265+
onClick={() => {
266+
onApplyExample(scenario.config, scenario.branch, scenario.message);
267+
window.scrollTo({ top: 0, behavior: 'smooth' });
268+
}}
269+
>
270+
Try This Example
271+
</button>
111272
</div>
112-
</div>
113-
114-
<button
115-
className="example-apply-btn"
116-
onClick={() => onApplyExample(scenario.config, scenario.branch, scenario.message)}
117-
>
118-
Try This Example
119-
</button>
273+
))}
120274
</div>
121-
))}
122-
</div>
275+
</div>
276+
))}
123277
</div>
124278
);
125279
};

0 commit comments

Comments
 (0)