monol-plugin-scout 2.1.3 → 4.1.0

package/monol-plugin-scout-pkg/web/components/overview.js

@@ -0,0 +1,154 @@
+/**
+ * Scout Overview Component
+ * 오버뷰 탭 - 다른 컴포넌트들을 조합
+ */
+
+import { MonolComponent } from '/design-system/component-base.js';
+import { ScoutStatsCard } from './stats-card.js';
+import { ScoutPluginList } from './plugin-list.js';
+import { ScoutActivityChart } from './activity-chart.js';
+
+export class ScoutOverview extends MonolComponent {
+  constructor(container, options = {}) {
+    super(container, options);
+    this.components = {};
+  }
+
+  async init() {
+    this.render();
+    await this.initComponents();
+  }
+
+  render() {
+    this.container.innerHTML = this.html`
+      <div class="scout-overview">
+        <div class="overview-section">
+          <div id="scout-stats-container"></div>
+        </div>
+
+        <div class="overview-grid">
+          <div class="overview-main">
+            <div id="scout-chart-container"></div>
+          </div>
+          <div class="overview-sidebar">
+            <h3 class="section-title">Installed Plugins</h3>
+            <div id="scout-plugins-container"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  async initComponents() {
+    // Stats Card
+    this.components.stats = new ScoutStatsCard(
+      this.container.querySelector('#scout-stats-container'),
+      {
+        apiUrl: this.options.apiBaseUrl ? `${this.options.apiBaseUrl}/stats` : null,
+        stats: this.options.stats || { installed: 12, active: 8, score: 85, updates: 3 }
+      }
+    );
+    await this.components.stats.init();
+
+    // Activity Chart
+    this.components.chart = new ScoutActivityChart(
+      this.container.querySelector('#scout-chart-container'),
+      {
+        id: 'overview-activity',
+        title: 'Plugin Activity',
+        apiUrl: this.options.apiBaseUrl ? `${this.options.apiBaseUrl}/activity` : null
+      }
+    );
+    await this.components.chart.init();
+
+    // Plugin List
+    this.components.plugins = new ScoutPluginList(
+      this.container.querySelector('#scout-plugins-container'),
+      {
+        apiUrl: this.options.apiBaseUrl ? `${this.options.apiBaseUrl}/plugins` : null,
+        plugins: this.options.plugins || this.getMockPlugins()
+      }
+    );
+    await this.components.plugins.init();
+
+    // 컴포넌트 간 이벤트 연결
+    this.setupEventHandlers();
+  }
+
+  setupEventHandlers() {
+    // 플러그인 선택 시 이벤트 발행
+    this.components.plugins.on('plugin-select', (plugin) => {
+      this.emit('plugin-select', plugin);
+    });
+
+    // Stats 클릭 시 필터 적용
+    this.components.stats.on('stat-click', ({ type }) => {
+      if (type === 'active') {
+        this.components.plugins.state.filter = 'active';
+        this.components.plugins.render();
+      }
+    });
+  }
+
+  getMockPlugins() {
+    return [
+      { id: 'code-review', name: 'Code Review', icon: '🔍', version: '1.2.0', status: 'active', score: 92 },
+      { id: 'git-helper', name: 'Git Helper', icon: '📦', version: '2.0.1', status: 'active', score: 88 },
+      { id: 'test-runner', name: 'Test Runner', icon: '🧪', version: '1.5.0', status: 'active', score: 85 },
+      { id: 'doc-gen', name: 'Doc Generator', icon: '📝', version: '1.0.0', status: 'inactive', score: 78 },
+      { id: 'lint-fixer', name: 'Lint Fixer', icon: '✨', version: '1.1.0', status: 'active', score: 90 }
+    ];
+  }
+
+  // 외부에서 호출 가능한 메서드들
+  refreshStats() {
+    this.components.stats.fetchStats();
+  }
+
+  highlightPlugin(pluginId) {
+    this.components.plugins.selectPlugin(pluginId);
+  }
+
+  getSelectedPlugin() {
+    const id = this.components.plugins.state.selectedId;
+    return this.components.plugins.state.plugins.find(p => p.id === id);
+  }
+
+  destroy() {
+    Object.values(this.components).forEach(c => c.destroy());
+    super.destroy();
+  }
+}
+
+// CSS 스타일
+const style = document.createElement('style');
+style.textContent = `
+  .scout-overview {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 24px;
+  }
+  .scout-overview .overview-section {
+    margin-bottom: 8px;
+  }
+  .scout-overview .overview-grid {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 24px;
+  }
+  .scout-overview .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  @media (max-width: 1024px) {
+    .scout-overview .overview-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;
+document.head.appendChild(style);
+
+export default ScoutOverview;

package/monol-plugin-scout-pkg/web/components/plugin-list.js

@@ -0,0 +1,242 @@
+/**
+ * Scout Plugin List Component
+ * 설치된 플러그인 목록을 표시하는 컴포넌트
+ */
+
+import { MonolComponent } from '/design-system/component-base.js';
+
+export class ScoutPluginList extends MonolComponent {
+  constructor(container, options = {}) {
+    super(container, options);
+    this.state = {
+      plugins: options.plugins || [],
+      filter: 'all',
+      sortBy: 'name',
+      selectedId: null
+    };
+  }
+
+  async init() {
+    if (this.options.apiUrl) {
+      await this.fetchPlugins();
+    }
+    this.render();
+  }
+
+  async fetchPlugins() {
+    try {
+      const response = await fetch(this.options.apiUrl);
+      const data = await response.json();
+      this.state.plugins = data;
+    } catch (error) {
+      console.error('Failed to fetch plugins:', error);
+    }
+  }
+
+  getFilteredPlugins() {
+    let plugins = [...this.state.plugins];
+
+    // 필터 적용
+    if (this.state.filter !== 'all') {
+      plugins = plugins.filter(p => p.status === this.state.filter);
+    }
+
+    // 정렬 적용
+    plugins.sort((a, b) => {
+      switch (this.state.sortBy) {
+        case 'score': return (b.score || 0) - (a.score || 0);
+        case 'usage': return (b.usage || 0) - (a.usage || 0);
+        default: return (a.name || '').localeCompare(b.name || '');
+      }
+    });
+
+    return plugins;
+  }
+
+  render() {
+    const plugins = this.getFilteredPlugins();
+
+    this.container.innerHTML = this.html`
+      <div class="scout-plugin-list">
+        <div class="list-header">
+          <div class="list-filters">
+            <select class="filter-select" data-action="filter">
+              <option value="all" ${this.state.filter === 'all' ? 'selected' : ''}>All</option>
+              <option value="active" ${this.state.filter === 'active' ? 'selected' : ''}>Active</option>
+              <option value="inactive" ${this.state.filter === 'inactive' ? 'selected' : ''}>Inactive</option>
+            </select>
+            <select class="sort-select" data-action="sort">
+              <option value="name" ${this.state.sortBy === 'name' ? 'selected' : ''}>Name</option>
+              <option value="score" ${this.state.sortBy === 'score' ? 'selected' : ''}>Score</option>
+              <option value="usage" ${this.state.sortBy === 'usage' ? 'selected' : ''}>Usage</option>
+            </select>
+          </div>
+          <span class="list-count">${plugins.length} plugins</span>
+        </div>
+        <div class="list-items">
+          ${plugins.map(plugin => this.renderPlugin(plugin)).join('')}
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+  }
+
+  renderPlugin(plugin) {
+    const isSelected = this.state.selectedId === plugin.id;
+    const scoreColor = this.getScoreColor(plugin.score);
+
+    return this.html`
+      <div class="plugin-item ${isSelected ? 'selected' : ''}" data-id="${plugin.id}">
+        <div class="plugin-icon">${plugin.icon || '🔌'}</div>
+        <div class="plugin-info">
+          <div class="plugin-name">${plugin.name}</div>
+          <div class="plugin-meta">
+            <span class="plugin-version">v${plugin.version || '1.0.0'}</span>
+            <span class="plugin-status ${plugin.status}">${plugin.status || 'unknown'}</span>
+          </div>
+        </div>
+        <div class="plugin-score" style="color: ${scoreColor}">
+          ${plugin.score || '-'}
+        </div>
+      </div>
+    `;
+  }
+
+  getScoreColor(score) {
+    if (!score) return 'var(--text-muted)';
+    if (score >= 90) return 'var(--accent-green)';
+    if (score >= 75) return 'var(--accent-blue)';
+    if (score >= 60) return 'var(--accent-orange)';
+    return 'var(--accent-red)';
+  }
+
+  bindEvents() {
+    // 필터 변경
+    this.container.querySelector('[data-action="filter"]')?.addEventListener('change', (e) => {
+      this.state.filter = e.target.value;
+      this.render();
+      this.emit('filter-change', { filter: this.state.filter });
+    });
+
+    // 정렬 변경
+    this.container.querySelector('[data-action="sort"]')?.addEventListener('change', (e) => {
+      this.state.sortBy = e.target.value;
+      this.render();
+      this.emit('sort-change', { sortBy: this.state.sortBy });
+    });
+
+    // 플러그인 선택
+    this.container.querySelectorAll('.plugin-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const id = item.dataset.id;
+        this.state.selectedId = id;
+        const plugin = this.state.plugins.find(p => p.id === id);
+        this.render();
+        this.emit('plugin-select', plugin);
+      });
+    });
+  }
+
+  selectPlugin(id) {
+    this.state.selectedId = id;
+    this.render();
+  }
+
+  highlightPlugins(ids) {
+    this.container.querySelectorAll('.plugin-item').forEach(item => {
+      if (ids.includes(item.dataset.id)) {
+        item.classList.add('highlighted');
+      } else {
+        item.classList.remove('highlighted');
+      }
+    });
+  }
+}
+
+// CSS 스타일
+const style = document.createElement('style');
+style.textContent = `
+  .scout-plugin-list {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md, 8px);
+    overflow: hidden;
+  }
+  .scout-plugin-list .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-tertiary);
+  }
+  .scout-plugin-list .list-filters {
+    display: flex;
+    gap: 8px;
+  }
+  .scout-plugin-list select {
+    padding: 6px 10px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 12px;
+  }
+  .scout-plugin-list .list-count {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+  .scout-plugin-list .list-items {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+  .scout-plugin-list .plugin-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .scout-plugin-list .plugin-item:hover {
+    background: var(--bg-hover);
+  }
+  .scout-plugin-list .plugin-item.selected {
+    background: var(--bg-active, rgba(56, 139, 253, 0.1));
+    border-left: 3px solid var(--accent-blue);
+  }
+  .scout-plugin-list .plugin-item.highlighted {
+    background: var(--bg-active, rgba(56, 139, 253, 0.1));
+  }
+  .scout-plugin-list .plugin-icon {
+    font-size: 20px;
+  }
+  .scout-plugin-list .plugin-info {
+    flex: 1;
+  }
+  .scout-plugin-list .plugin-name {
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  .scout-plugin-list .plugin-meta {
+    display: flex;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-secondary);
+  }
+  .scout-plugin-list .plugin-status.active {
+    color: var(--accent-green);
+  }
+  .scout-plugin-list .plugin-status.inactive {
+    color: var(--text-muted);
+  }
+  .scout-plugin-list .plugin-score {
+    font-size: 18px;
+    font-weight: 700;
+  }
+`;
+document.head.appendChild(style);
+
+export default ScoutPluginList;

package/monol-plugin-scout-pkg/web/components/stats-card.js

@@ -0,0 +1,126 @@
+/**
+ * Scout Stats Card Component
+ * 플러그인 통계를 표시하는 카드 컴포넌트
+ */
+
+import { MonolComponent } from '/design-system/component-base.js';
+
+export class ScoutStatsCard extends MonolComponent {
+  constructor(container, options = {}) {
+    super(container, options);
+    this.state = {
+      stats: options.stats || {
+        installed: 0,
+        active: 0,
+        score: 0,
+        updates: 0
+      }
+    };
+  }
+
+  async init() {
+    if (this.options.apiUrl) {
+      await this.fetchStats();
+    }
+    this.render();
+  }
+
+  async fetchStats() {
+    try {
+      const response = await fetch(this.options.apiUrl);
+      const data = await response.json();
+      this.state.stats = data;
+    } catch (error) {
+      console.error('Failed to fetch stats:', error);
+    }
+  }
+
+  render() {
+    const { stats } = this.state;
+
+    this.container.innerHTML = this.html`
+      <div class="scout-stats-grid">
+        <div class="stat-card" data-stat="installed">
+          <div class="stat-icon">🔌</div>
+          <div class="stat-content">
+            <div class="stat-value">${stats.installed}</div>
+            <div class="stat-label">Installed</div>
+          </div>
+        </div>
+        <div class="stat-card" data-stat="active">
+          <div class="stat-icon">✅</div>
+          <div class="stat-content">
+            <div class="stat-value">${stats.active}</div>
+            <div class="stat-label">Active</div>
+          </div>
+        </div>
+        <div class="stat-card" data-stat="score">
+          <div class="stat-icon">⭐</div>
+          <div class="stat-content">
+            <div class="stat-value">${stats.score}</div>
+            <div class="stat-label">Avg Score</div>
+          </div>
+        </div>
+        <div class="stat-card" data-stat="updates">
+          <div class="stat-icon">🔄</div>
+          <div class="stat-content">
+            <div class="stat-value">${stats.updates}</div>
+            <div class="stat-label">Updates</div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 클릭 이벤트 바인딩
+    this.container.querySelectorAll('.stat-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const statType = card.dataset.stat;
+        this.emit('stat-click', { type: statType, value: stats[statType] });
+      });
+    });
+  }
+
+  updateStats(newStats) {
+    this.setState({ stats: { ...this.state.stats, ...newStats } });
+  }
+}
+
+// CSS 스타일 (컴포넌트 전용)
+const style = document.createElement('style');
+style.textContent = `
+  .scout-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 16px;
+  }
+  .scout-stats-grid .stat-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md, 8px);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .scout-stats-grid .stat-card:hover {
+    border-color: var(--accent-blue);
+    transform: translateY(-2px);
+  }
+  .scout-stats-grid .stat-icon {
+    font-size: 24px;
+  }
+  .scout-stats-grid .stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+  .scout-stats-grid .stat-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+`;
+document.head.appendChild(style);
+
+export default ScoutStatsCard;