Skip to content

Commit 2f164f1

Browse files
committed
preview web page
1 parent d15da62 commit 2f164f1

22 files changed

+4705
-0
lines changed

web-preview/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

web-preview/README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Commit From Branch - Web Preview
2+
3+
A web-based configuration preview tool for the `commit-from-branch` npm package.
4+
5+
## Features
6+
7+
- 🎯 **Real-time Preview**: See how your commit messages will be transformed instantly
8+
- ⚙️ **Configuration Testing**: Test different configuration settings without making actual commits
9+
- 📚 **Example Scenarios**: Pre-built examples for common use cases
10+
- 📱 **Responsive Design**: Works on desktop and mobile devices
11+
12+
## Usage
13+
14+
1. **Configure Settings**: Set up your `includePattern`, `format`, `fallbackFormat`, and `exclude` patterns
15+
2. **Test Input**: Enter a branch name and commit message to see how they would be processed
16+
3. **View Results**: See the final commit message and processing details in real-time
17+
4. **Try Examples**: Use the example scenarios to understand different patterns
18+
19+
## Development
20+
21+
```bash
22+
# Install dependencies
23+
npm install
24+
25+
# Start development server
26+
npm run dev
27+
28+
# Build for production
29+
npm run build
30+
```
31+
32+
## Available Configuration Options
33+
34+
- **includePattern**: Glob patterns for branches to include (e.g., `feature/*`, `bugfix/*`)
35+
- **format**: Template for commit messages when ticket is found (e.g., `${ticket}: ${msg}`)
36+
- **fallbackFormat**: Template when no ticket is found (e.g., `${segs[0]}: ${msg}`)
37+
- **exclude**: Patterns to exclude certain sources
38+
39+
## Template Tokens
40+
41+
- `${ticket}`: Extracted ticket number (e.g., ABC-123)
42+
- `${msg}`: Original commit message
43+
- `${branch}`: Full branch name
44+
- `${segs[0]}`, `${segs[1]}`: Branch segments split by `/`
45+
- `${segments}`: All segments joined with `/`
46+
- `${prefix:n}`: First n segments joined with `/`
47+
48+
## Examples
49+
50+
Try the built-in example scenarios to understand:
51+
- JIRA ticket format patterns
52+
- Simple prefix additions
53+
- Template replacement modes
54+
- Skip conditions and duplicate detection
55+
56+
Visit http://localhost:5173 after running `npm run dev` to use the preview tool.

web-preview/eslint.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

web-preview/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Commit From Branch - Configuration Preview</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)