Merge pull request #10 from RyosukeDTomita/feature/sigma-markdown-preview

feat: markdown preview

Author: RyosukeDTomita

README.md

@@ -49,15 +49,15 @@ URLのクエリ文字列にテキストを保存する、最小構成のメモ
 ### Local environment
 
 ```shell
-cd url-memo-app
+cd url-query-memo/url-memo-app
 npm install
 ```
 
 ```shell
 npm run dev
 ```
 
-go to http://localhost:3000/MyActivity/
+go to http://localhost:3000/url-query-memo
 
 
 ### GitHub settings

prompt.md

@@ -0,0 +1,174 @@
+# Kiroスタイル ドキュメント生成プロンプト
+
+## 概要
+このプロンプトテンプレートは、Kiroのspec-driven開発アプローチに基づいて、プロジェクトのドキュメントを生成するためのガイドラインです。Kiroは要件定義、設計、タスクを3つのマークダウンファイル（requirements.md、design.md、tasks.md）として管理し、コードベースと同期した「生きたドキュメント」を維持します。
+
+## プロンプトテンプレート
+
+### 1. Requirements.md 生成プロンプト
+
+```
+以下の情報を基に、Kiroスタイルのrequirements.mdを作成してください：
+
+プロジェクト名: [プロジェクト名]
+プロジェクトの概要: [プロジェクトの目的と基本的な説明]
+
+以下の形式に従ってください：
+
+1. **Introduction**セクション
+   - プロジェクトの背景と目的を日本語で詳細に説明
+   - ユーザーに提供する価値を明確に記述
+   - 技術的なアプローチの概要を含める
+
+2. **Requirements**セクション
+   各要件について以下を含める：
+   - 要件番号とタイトル（日本語）
+   - User Story形式：「ユーザーとして、[目的]したいので、[機能]が必要です。」
+   - Acceptance Criteria（受け入れ条件）：
+     - WHEN/THEN形式で具体的な動作を記述
+     - IF/THEN形式で条件分岐を記述
+     - 各条件は番号付きリストで整理
+
+重要な要件カテゴリ：
+- 基本機能要件
+- ユーザーインターフェース要件
+- データ管理要件
+- セキュリティ/プライバシー要件
+- パフォーマンス要件
+- アクセシビリティ要件
+
+各要件は測定可能で具体的な条件を含めてください。
+```
+
+### 2. Design.md 生成プロンプト
+
+```
+以下の要件定義を基に、Kiroスタイルのdesign.mdを作成してください：
+
+[requirements.mdの内容を貼り付け]
+
+技術スタック: [使用する技術]
+
+以下の形式に従ってください：
+
+1. **概要**
+   - プロジェクトの技術的な説明
+   - 主要な設計決定の理由
+
+2. **アーキテクチャ**
+   - システム全体の構成
+   - 技術スタックの詳細と選定理由
+   - デプロイメント戦略
+
+3. **アプリケーション構造**
+   - ディレクトリ構造をtreeコマンド形式で表示
+   - 各ディレクトリの役割を説明
+
+4. **コンポーネントとインターフェース**
+   - 主要コンポーネントのTypeScriptインターフェース定義
+   - プロパティの説明
+   - コンポーネント間の関係
+
+5. **カスタムフック**（該当する場合）
+   - フックの目的と使用方法
+   - TypeScript型定義
+
+6. **データモデル**
+   - アプリケーションで使用するデータ構造
+   - TypeScriptインターフェース定義
+
+7. **エラー処理**
+   - 想定されるエラーシナリオ
+   - エラー処理戦略
+
+8. **テスト戦略**
+   - ユニットテスト、統合テスト、E2Eテストの計画
+   - 使用するツールと重点領域
+
+9. **パフォーマンス最適化**
+   - 最適化のポイントと手法
+
+10. **セキュリティ考慮事項**
+    - セキュリティリスクと対策
+
+11. **アクセシビリティ**
+    - WCAG準拠のための施策
+
+コード例は実際に動作するTypeScriptコードとして記述してください。
+```
+
+### 3. Tasks.md 生成プロンプト
+
+```
+以下の要件定義と設計ドキュメントを基に、Kiroスタイルのtasks.mdを作成してください：
+
+[requirements.mdの内容]
+[design.mdの内容]
+
+以下の形式に従ってください：
+
+1. タスクはチェックボックス形式（- [ ]）で記述
+2. 階層構造で整理（大タスク、サブタスク）
+3. 各タスクに関連する要件番号を記載（_要件: X.X_）
+4. 実装順序を考慮した番号付け
+
+タスクカテゴリの例：
+- プロジェクトセットアップ
+- 基礎インフラ実装
+- コアコンポーネント開発
+- 機能実装
+- テスト実装
+- パフォーマンス最適化
+- デプロイメント設定
+- ドキュメント作成
+
+各タスクは：
+- 具体的で実行可能な内容
+- 1-3時間で完了できる粒度
+- 依存関係を考慮した順序
+- テスト作成を含める
+
+プログレッシブな開発を促進するため、最小動作可能な製品（MVP）から始めて、段階的に機能を追加する順序にしてください。
+```
+
+## 使用方法
+
+1. **新規プロジェクト開始時**
+   - まずrequirements.mdプロンプトを使用して要件を定義
+   - 次にdesign.mdプロンプトで技術設計を作成
+   - 最後にtasks.mdプロンプトで実装計画を立てる
+
+2. **既存プロジェクトのドキュメント化**
+   - 現在のコードベースを分析
+   - 上記のプロンプトを使用して各ドキュメントを生成
+   - 実際の実装と整合性を確認
+
+3. **ドキュメントの更新**
+   - 機能追加や変更時に、関連する全てのドキュメントを更新
+   - タスクの完了状況を反映
+   - 新しい要件や設計変更を追記
+
+## ベストプラクティス
+
+1. **一貫性の維持**
+   - 要件、設計、タスクの間で用語や参照を統一
+   - 要件番号を一貫して使用
+
+2. **具体性**
+   - 曖昧な表現を避け、測定可能な条件を記述
+   - 実装可能なレベルまで詳細化
+
+3. **段階的な詳細化**
+   - 最初は高レベルの概要から始める
+   - 実装が進むにつれて詳細を追加
+
+4. **コードとの同期**
+   - 実装の変更をドキュメントに反映
+   - ドキュメントの変更を実装に反映
+
+5. **日本語での記述**
+   - 要件と概要は日本語で記述
+   - コード例とインターフェースは英語
+   - 技術用語は適切に使い分ける
+
+このプロンプトテンプレートを使用することで、Kiroのようなspec-driven開発アプローチを採用し、プロジェクトの全体像を明確に保ちながら、効率的な開発を進めることができます。

url-memo-app/__mocks__/dompurify.js

@@ -0,0 +1,6 @@
+const DOMPurify = {
+  sanitize: jest.fn((html) => html),
+};
+
+module.exports = DOMPurify;
+module.exports.default = DOMPurify;

url-memo-app/__mocks__/marked.js

@@ -0,0 +1,91 @@
+module.exports = {
+  marked: {
+    parse: jest.fn((text) => {
+      if (!text) return '';
+      
+      // Handle lists first
+      let html = text;
+      
+      // Convert unordered lists
+      const unorderedListRegex = /^- (.+)$/gm;
+      const unorderedMatches = [...text.matchAll(unorderedListRegex)];
+      if (unorderedMatches.length > 0) {
+        let listItems = '';
+        unorderedMatches.forEach(match => {
+          listItems += `<li>${match[1]}</li>`;
+        });
+        html = html.replace(unorderedListRegex, '');
+        html += `<ul>${listItems}</ul>`;
+      }
+      
+      // Convert ordered lists
+      const orderedListRegex = /^\d+\. (.+)$/gm;
+      const orderedMatches = [...text.matchAll(orderedListRegex)];
+      if (orderedMatches.length > 0) {
+        let listItems = '';
+        orderedMatches.forEach(match => {
+          listItems += `<li>${match[1]}</li>`;
+        });
+        html = html.replace(orderedListRegex, '');
+        html += `<ol>${listItems}</ol>`;
+      }
+      
+      // Other conversions
+      html = html
+        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/```javascript\n([^`]+)\n```/g, '<pre><code>$1</code></pre>')
+        .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
+        .replace(/^---$/gm, '<hr>');
+      
+      // Handle tables
+      if (text.includes('|')) {
+        const lines = text.split('\n');
+        let inTable = false;
+        let tableHtml = '';
+        
+        lines.forEach((line, index) => {
+          if (line.includes('|') && !line.includes('---')) {
+            const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell);
+            if (!inTable) {
+              tableHtml = '<table><thead><tr>';
+              cells.forEach(cell => {
+                tableHtml += `<th>${cell}</th>`;
+              });
+              tableHtml += '</tr></thead><tbody>';
+              inTable = true;
+            } else if (index > 1) {
+              tableHtml += '<tr>';
+              cells.forEach(cell => {
+                tableHtml += `<td>${cell}</td>`;
+              });
+              tableHtml += '</tr>';
+            }
+          }
+        });
+        
+        if (inTable) {
+          tableHtml += '</tbody></table>';
+          return tableHtml;
+        }
+      }
+      
+      // Wrap non-HTML content in paragraphs
+      const lines = html.split('\n').filter(line => line.trim());
+      html = lines.map(line => {
+        if (!line.match(/^<[^>]+>/)) {
+          return `<p>${line}</p>`;
+        }
+        return line;
+      }).join('');
+      
+      return html;
+    }),
+    setOptions: jest.fn(),
+  },
+};

url-memo-app/__mocks__/react-markdown.js

@@ -0,0 +1,15 @@
+// Mock for react-markdown
+const React = require('react');
+
+const ReactMarkdown = ({ children, components }) => {
+  if (!children) return null;
+  
+  // Simple mock that renders children as plain text
+  return React.createElement('div', { 
+    'data-testid': 'react-markdown',
+    dangerouslySetInnerHTML: { __html: children }
+  });
+};
+
+module.exports = ReactMarkdown;
+module.exports.default = ReactMarkdown;

url-memo-app/__mocks__/remark-gfm.js

@@ -0,0 +1,2 @@
+// Mock for remark-gfm
+module.exports = () => {};