mokkun 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/bin/viewer.html +10 -2
- package/dist/example.html +2 -2
- package/dist/mokkun.css +1 -1
- package/dist/mokkun.esm.js +494 -488
- package/dist/mokkun.esm.js.map +1 -1
- package/dist/mokkun.js +79 -79
- package/dist/mokkun.js.map +1 -1
- package/dist/types/parser/yaml-parser.d.ts +0 -1
- package/dist/types/types/schema.d.ts +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,6 +37,67 @@ pnpm build
|
|
|
37
37
|
pnpm test
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
+
## AI でモック YAML を生成する
|
|
41
|
+
|
|
42
|
+
mokkun の YAML フォーマットは [JSON Schema](./schema.json) として公開されています。
|
|
43
|
+
この schema を AI のプロンプトに渡すだけで、誰でも mokkun 用の画面モック YAML を生成できます。
|
|
44
|
+
|
|
45
|
+
### schema.json の URL
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### プロンプト例
|
|
52
|
+
|
|
53
|
+
ChatGPT や Claude に以下のようなプロンプトを送ってください。
|
|
54
|
+
|
|
55
|
+
**基本**
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
以下の JSON Schema に準拠した YAML を生成してください。
|
|
59
|
+
https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
|
|
60
|
+
|
|
61
|
+
作りたい画面: ECサイトの商品一覧画面
|
|
62
|
+
- 検索フィルター（キーワード、カテゴリ、価格帯）
|
|
63
|
+
- 商品テーブル（商品名、価格、在庫数、ステータス）
|
|
64
|
+
- ページネーション
|
|
65
|
+
- 「商品登録」ボタン
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**複数画面を一括で生成**
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
以下の JSON Schema に準拠した YAML を生成してください。
|
|
72
|
+
https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
|
|
73
|
+
|
|
74
|
+
以下の画面を一つの YAML ファイルにまとめてください:
|
|
75
|
+
1. ログイン画面（メール + パスワード）
|
|
76
|
+
2. ユーザー一覧画面（テーブル + 検索）
|
|
77
|
+
3. ユーザー詳細画面（プロフィール編集フォーム）
|
|
78
|
+
画面間のナビゲーション（actions の navigate）も設定してください。
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 生成した YAML をモックとして表示する
|
|
82
|
+
|
|
83
|
+
AI が生成した YAML を `.yaml` ファイルとして保存し、`npx mokkun` で表示できます。
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
# 生成された YAML を保存
|
|
87
|
+
cat > my-screen.yaml << 'EOF'
|
|
88
|
+
# ここに AI が生成した YAML を貼り付け
|
|
89
|
+
EOF
|
|
90
|
+
|
|
91
|
+
# mokkun でモックアップを表示（ブラウザが自動で開きます）
|
|
92
|
+
npx mokkun my-screen.yaml
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
ポートを変更したい場合:
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
npx mokkun -p 8080 my-screen.yaml
|
|
99
|
+
```
|
|
100
|
+
|
|
40
101
|
## ディレクトリ構造
|
|
41
102
|
|
|
42
103
|
```
|
package/bin/viewer.html
CHANGED
|
@@ -139,7 +139,8 @@
|
|
|
139
139
|
<div class="toolbar-spacer"></div>
|
|
140
140
|
|
|
141
141
|
<div class="theme-toggle">
|
|
142
|
-
<button id="
|
|
142
|
+
<button id="lofi-theme" class="active">Lo-Fi</button>
|
|
143
|
+
<button id="light-theme">Light</button>
|
|
143
144
|
<button id="dark-theme">Dark</button>
|
|
144
145
|
</div>
|
|
145
146
|
</div>
|
|
@@ -154,9 +155,10 @@
|
|
|
154
155
|
(function() {
|
|
155
156
|
var mokkunInstance = null;
|
|
156
157
|
var screenSelect = document.getElementById('screen-select');
|
|
158
|
+
var lofiThemeBtn = document.getElementById('lofi-theme');
|
|
157
159
|
var lightThemeBtn = document.getElementById('light-theme');
|
|
158
160
|
var darkThemeBtn = document.getElementById('dark-theme');
|
|
159
|
-
var currentTheme = '
|
|
161
|
+
var currentTheme = 'lofi';
|
|
160
162
|
|
|
161
163
|
// YAML URL injected by CLI (or null for sample)
|
|
162
164
|
var yamlUrl = /* __YAML_URL__ */ null;
|
|
@@ -165,11 +167,17 @@
|
|
|
165
167
|
function setTheme(theme) {
|
|
166
168
|
currentTheme = theme;
|
|
167
169
|
document.body.classList.toggle('dark-theme', theme === 'dark');
|
|
170
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
171
|
+
lofiThemeBtn.classList.toggle('active', theme === 'lofi');
|
|
168
172
|
lightThemeBtn.classList.toggle('active', theme === 'light');
|
|
169
173
|
darkThemeBtn.classList.toggle('active', theme === 'dark');
|
|
170
174
|
if (mokkunInstance) mokkunInstance.setTheme(theme);
|
|
171
175
|
}
|
|
172
176
|
|
|
177
|
+
// Set initial theme
|
|
178
|
+
document.documentElement.setAttribute('data-theme', 'lofi');
|
|
179
|
+
|
|
180
|
+
lofiThemeBtn.addEventListener('click', function() { setTheme('lofi'); });
|
|
173
181
|
lightThemeBtn.addEventListener('click', function() { setTheme('light'); });
|
|
174
182
|
darkThemeBtn.addEventListener('click', function() { setTheme('dark'); });
|
|
175
183
|
|
package/dist/example.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Mokkun v0.1.
|
|
6
|
+
<title>Mokkun v0.1.4 - Example</title>
|
|
7
7
|
<!-- Load Mokkun CSS -->
|
|
8
8
|
<link rel="stylesheet" href="./mokkun.css">
|
|
9
9
|
<style>
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
<body>
|
|
60
60
|
<div id="mokkun-app">
|
|
61
61
|
<div class="demo-header">
|
|
62
|
-
<h1>Mokkun v0.1.
|
|
62
|
+
<h1>Mokkun v0.1.4</h1>
|
|
63
63
|
<p>YAML-based Presentation & Form Builder</p>
|
|
64
64
|
</div>
|
|
65
65
|
<div class="demo-controls">
|