mokkun 0.1.5 → 0.2.0

package/README.md

@@ -78,6 +78,16 @@ https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
 画面間のナビゲーション（actions の navigate）も設定してください。
 ```
 
+### エディタで補完を使う
+
+YAML の先頭行に次のモードラインを書くと、[YAML Language Server](https://github.com/redhat-developer/yaml-language-server)（VS Code の YAML 拡張など）でキー補完とバリデーションが効きます。
+
+```yaml
+# yaml-language-server: $schema=https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
+```
+
+リポジトリ内では `.vscode/settings.json` の `"yaml.schemas": { "./schema.json": ["examples/*.yaml", "*.mokkun.yaml"] }` で、`examples/*.yaml` と `*.mokkun.yaml` に自動適用できます。
+
 ### 生成した YAML をモックとして表示する
 
 AI が生成した YAML を `.yaml` ファイルとして保存し、`npx mokkun` で表示できます。
@@ -161,8 +171,8 @@ mokkun/
 
 | コンポーネント | 説明 |
 |---------------|------|
-| app_header | アプリケーションヘッダー（ロゴ、テナント切替、ユーザーメニュー） |
-| app_navi | アプリナビゲーション（主要機能の切り替え） |
+| appHeader | アプリケーションヘッダー（ロゴ、テナント切替、ユーザーメニュー。`systemName` で左上のシステム名を指定） |
+| appNavi | アプリナビゲーション（主要機能の切り替え） |
 | heading | 見出し |
 | tabs | タブ |
 | accordion_panel | アコーディオン |
@@ -195,9 +205,11 @@ mokkun/
 
 ## YAML構造
 
+YAML のキーは camelCase が正規形です。snake_case のキー（teamkit の generate-ui 出力など）も互換として引き続き受け付けます。
+
 ```yaml
 view:
-  screen_name:
+  myScreen:
     title: "画面タイトル"
     description: "画面の説明"
     fields:
@@ -211,13 +223,13 @@ view:
         label: "送信"
         style: "primary"
 
-common_components:
-  component_name:
+commonComponents:
+  myComponent:
     type: "field_group"
     fields: []
 
 validations:
-  rule_name:
+  myRule:
     rules:
       required: true
       min: 1

package/bin/cli.mjs

@@ -13,8 +13,8 @@ const distDir = resolve(__dirname, '../dist')
 const args = process.argv.slice(2)
 let yamlFile = null
 let port = 3333
-let theme = 'lofi'
-const VALID_THEMES = ['lofi', 'light', 'dark']
+let theme = 'light'
+const VALID_THEMES = ['light', 'dark']
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--port' || args[i] === '-p') {
@@ -33,8 +33,8 @@ for (let i = 0; i < args.length; i++) {
 
 // Validate theme
 if (!VALID_THEMES.includes(theme)) {
-  console.error(`Error: Invalid theme "${theme}". Valid themes: ${VALID_THEMES.join(', ')}`)
-  process.exit(1)
+  console.warn(`Warning: Unknown theme "${theme}". Falling back to light. Valid themes: ${VALID_THEMES.join(', ')}`)
+  theme = 'light'
 }
 
 function printHelp() {
@@ -46,7 +46,7 @@ Usage:
 
 Options:
   -p, --port <port>    Port number (default: 3333)
-  -t, --theme <theme>  Theme: lofi, light, dark (default: lofi)
+  -t, --theme <theme>  Theme: light, dark (default: light)
   -h, --help           Show this help
 
 Examples:
@@ -94,7 +94,7 @@ function generateViewerHtml() {
   if (yamlFile) {
     html = html.replace('/* __YAML_URL__ */ null', JSON.stringify('/__yaml__/' + basename(yamlFile)))
   }
-  html = html.replace('/* __THEME__ */ \'lofi\'', JSON.stringify(theme))
+  html = html.replace('/* __THEME__ */ \'light\'', JSON.stringify(theme))
   return html
 }
 

package/bin/viewer.html

@@ -72,6 +72,9 @@
     }
 
     .toolbar-spacer { flex: 1; }
+    .toolbar-section[hidden] { display: none; }
+    .toolbar select { min-width: 120px; }
+    .toolbar select option:disabled { color: #8a8aa8; }
 
     #mokkun-app {
       margin-top: 60px;
@@ -113,6 +116,16 @@
         </select>
       </div>
 
+      <!-- v2 文書のときだけ表示: 状態（通常 / 成功 / エラー / 空 / 読み込み中）とロール -->
+      <div class="toolbar-section" id="state-section" hidden>
+        <label for="state-select">状態:</label>
+        <select id="state-select"></select>
+      </div>
+      <div class="toolbar-section" id="role-section" hidden>
+        <label for="role-select">ロール:</label>
+        <select id="role-select"></select>
+      </div>
+
       <div class="toolbar-spacer"></div>
     </div>
 
@@ -127,8 +140,8 @@
       var mokkunInstance = null;
       var screenSelect = document.getElementById('screen-select');
 
-      // Theme injected by CLI (default: lofi)
-      var currentTheme = /* __THEME__ */ 'lofi';
+      // Theme injected by CLI (default: light)
+      var currentTheme = /* __THEME__ */ 'light';
 
       // YAML URL injected by CLI (or null for sample)
       var yamlUrl = /* __YAML_URL__ */ null;
@@ -137,12 +150,58 @@
       document.body.classList.toggle('dark-theme', currentTheme === 'dark');
       document.documentElement.setAttribute('data-theme', currentTheme);
 
+      var stateSelect = document.getElementById('state-select');
+      var roleSelect = document.getElementById('role-select');
+      var params = new URLSearchParams(window.location.search);
+      // 状態の表示名はライブラリ（Mokkun.utils）のものを使う
+      var STATE_LABELS = Mokkun.utils.V2_STATE_LABELS;
+
+      // 状態セレクト: 現在の画面が持つ states.* に対応するものだけ選べる
+      function refreshStateSelect() {
+        var section = document.getElementById('state-section');
+        if (!mokkunInstance || !mokkunInstance.schemaV2) { section.hidden = true; return; }
+        section.hidden = false;
+        var enabled = mokkunInstance.getAvailableStates();
+        stateSelect.innerHTML = '';
+        Object.keys(STATE_LABELS).forEach(function(key) {
+          var opt = document.createElement('option');
+          opt.value = key;
+          opt.textContent = STATE_LABELS[key];
+          opt.disabled = enabled.indexOf(key) < 0;
+          stateSelect.appendChild(opt);
+        });
+        stateSelect.value = mokkunInstance.viewState;
+      }
+
+      // ロールセレクト: app.roles（と「すべて」）。roles が無い文書では出さない
+      function buildRoleSelect() {
+        var section = document.getElementById('role-section');
+        var schema = mokkunInstance && mokkunInstance.schemaV2;
+        var roles = (schema && schema.app.roles) || [];
+        section.hidden = roles.length === 0;
+        roleSelect.innerHTML = '';
+        [''].concat(roles).forEach(function(role) {
+          var opt = document.createElement('option');
+          opt.value = role;
+          opt.textContent = role || 'すべて';
+          roleSelect.appendChild(opt);
+        });
+        roleSelect.value = mokkunInstance.role || '';
+      }
+
       // Screen change
       screenSelect.addEventListener('change', function() {
         if (mokkunInstance && screenSelect.value) {
           mokkunInstance.showScreen(screenSelect.value);
+          refreshStateSelect();
         }
       });
+      stateSelect.addEventListener('change', function() {
+        if (mokkunInstance) mokkunInstance.setState(stateSelect.value);
+      });
+      roleSelect.addEventListener('change', function() {
+        if (mokkunInstance) mokkunInstance.setRole(roleSelect.value || undefined);
+      });
 
       // Sample YAML for when no file is specified
       var sampleYaml = [
@@ -185,7 +244,11 @@
         var options = {
           container: '#mokkun-app',
           theme: currentTheme,
+          initialScreen: params.get('screen') || undefined,
+          initialState: params.get('state') || undefined,
+          role: params.get('role') || undefined,
           onReady: function(instance) {
+            mokkunInstance = instance;
             var screens = instance.getScreenNames();
             screenSelect.innerHTML = '';
             screens.forEach(function(name) {
@@ -194,7 +257,19 @@
               opt.textContent = name;
               screenSelect.appendChild(opt);
             });
-            screenSelect.value = screens[0] || '';
+            screenSelect.value = instance.currentScreen || screens[0] || '';
+            refreshStateSelect();
+            buildRoleSelect();
+            // 旧フォーマットへ変換したときに落ちるキーはコンソールにだけ出す（画面には出さない）
+            if (instance.schemaV2) {
+              Mokkun.utils.compileV2Warnings(instance.schemaV2).forEach(function(w) {
+                console.warn('[mokkun] 旧フォーマット変換: ' + w.path + ': ' + w.message);
+              });
+            }
+          },
+          onNavigate: function(from, to) {
+            screenSelect.value = to;
+            refreshStateSelect();
           },
           onError: function(error) {
             document.getElementById('mokkun-app').innerHTML =

package/dist/example.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mokkun v0.2.0 - Example</title>
+  <!-- Load Mokkun CSS -->
+  <link rel="stylesheet" href="./mokkun.css">
+  <style>
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--mokkun-bg-primary, #f5f5f5);
+    }
+    #mokkun-app {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .demo-header {
+      text-align: center;
+      padding: 20px 0;
+      margin-bottom: 20px;
+      border-bottom: 1px solid var(--mokkun-border-color, #ddd);
+    }
+    .demo-header h1 {
+      margin: 0 0 8px 0;
+      color: var(--mokkun-text-primary, #333);
+    }
+    .demo-header p {
+      margin: 0;
+      color: var(--mokkun-text-secondary, #666);
+    }
+    .demo-controls {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+    .demo-controls button {
+      padding: 8px 16px;
+      border: 1px solid var(--mokkun-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--mokkun-bg-secondary, #fff);
+      color: var(--mokkun-text-primary, #333);
+      cursor: pointer;
+    }
+    .demo-controls button:hover {
+      background: var(--mokkun-bg-hover, #f0f0f0);
+    }
+    .demo-controls button.active {
+      background: var(--mokkun-primary, #007bff);
+      color: white;
+      border-color: var(--mokkun-primary, #007bff);
+    }
+  </style>
+</head>
+<body>
+  <div id="mokkun-app">
+    <div class="demo-header">
+      <h1>Mokkun v0.2.0</h1>
+      <p>YAML-based Presentation & Form Builder</p>
+    </div>
+    <div class="demo-controls">
+      <button onclick="setTheme('light')" id="theme-light">Light</button>
+      <button onclick="setTheme('dark')" id="theme-dark">Dark</button>
+      <button onclick="setTheme('bootstrap')" id="theme-bootstrap">Bootstrap</button>
+    </div>
+    <div id="content"></div>
+  </div>
+
+  <!-- Load Mokkun JS (UMD bundle) -->
+  <script src="./mokkun.js"></script>
+
+  <script>
+    // Sample YAML content
+    const yamlContent = `
+view:
+  demo:
+    title: お問い合わせフォーム
+    description: 以下のフォームに必要事項をご記入ください
+    fields:
+      - id: name
+        type: text
+        label: お名前
+        required: true
+        placeholder: 山田 太郎
+      - id: email
+        type: text
+        label: メールアドレス
+        input_type: email
+        required: true
+        placeholder: example@email.com
+      - id: category
+        type: select
+        label: お問い合わせ種別
+        required: true
+        options:
+          - label: 選択してください
+            value: ""
+          - label: 製品について
+            value: product
+          - label: サービスについて
+            value: service
+          - label: その他
+            value: other
+      - id: message
+        type: textarea
+        label: お問い合わせ内容
+        rows: 5
+        required: true
+        placeholder: お問い合わせ内容をご記入ください
+      - id: newsletter
+        type: checkbox
+        label: メールマガジンを受け取る
+    actions:
+      - id: submit
+        type: submit
+        label: 送信する
+        style: primary
+      - id: reset
+        type: reset
+        label: クリア
+        style: secondary
+
+  wizard_demo:
+    title: ウィザードデモ
+    description: ステップ形式の入力フォーム
+    wizard:
+      show_progress: true
+      allow_back: true
+      steps:
+        - id: step1
+          title: 基本情報
+          fields:
+            - id: company
+              type: text
+              label: 会社名
+              required: true
+            - id: department
+              type: text
+              label: 部署名
+        - id: step2
+          title: 連絡先
+          fields:
+            - id: phone
+              type: text
+              label: 電話番号
+              placeholder: "03-1234-5678"
+            - id: fax
+              type: text
+              label: FAX番号
+        - id: step3
+          title: 確認
+          description: 入力内容をご確認ください
+          fields:
+            - id: terms
+              type: checkbox
+              label: 利用規約に同意する
+              required: true
+`;
+
+    let mokkunInstance = null;
+    let currentTheme = 'light';
+
+    // Initialize Mokkun
+    async function initMokkun() {
+      try {
+        mokkunInstance = await Mokkun.init({
+          container: '#content',
+          yamlContent: yamlContent,
+          theme: currentTheme,
+          onReady: function(instance) {
+            console.log('Mokkun initialized!');
+            console.log('Available screens:', instance.getScreenNames());
+            console.log('Version:', Mokkun.VERSION);
+            updateThemeButtons();
+          },
+          onError: function(error) {
+            console.error('Mokkun initialization failed:', error);
+            document.getElementById('content').innerHTML =
+              '<div style="color: red; padding: 20px;">Error: ' + error.message + '</div>';
+          },
+          onSubmit: function(screenName, formData) {
+            console.log('Form submitted:', { screenName, formData });
+            alert('フォームが送信されました！\nコンソールでデータを確認できます。');
+          }
+        });
+      } catch (error) {
+        console.error('Failed to initialize:', error);
+      }
+    }
+
+    // Theme switching
+    function setTheme(themeId) {
+      currentTheme = themeId;
+      if (mokkunInstance) {
+        mokkunInstance.setTheme(themeId);
+      }
+      updateThemeButtons();
+    }
+
+    function updateThemeButtons() {
+      document.querySelectorAll('.demo-controls button').forEach(btn => {
+        btn.classList.remove('active');
+      });
+      const activeBtn = document.getElementById('theme-' + currentTheme);
+      if (activeBtn) {
+        activeBtn.classList.add('active');
+      }
+    }
+
+    // Screen navigation
+    window.showScreen = function(screenName) {
+      if (mokkunInstance) {
+        mokkunInstance.showScreen(screenName);
+      }
+    };
+
+    // Initialize on page load
+    initMokkun();
+  </script>
+</body>
+</html>