@lon-ask/dockit 0.1.0 → 0.1.2

package/apps/client/src/components/EntryDetail.tsx

@@ -0,0 +1,322 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate, Link, useSearchParams } from 'react-router-dom';
+import {
+  ArrowLeft, Pencil, Trash2, Play, Download, Plus,
+  Package, GitBranch, FileArchive, FileText, Github, Loader2,
+  CheckCircle, AlertCircle, Clock, MoreHorizontal, FileCode, Network,
+} from 'lucide-react';
+import type { EntryDetail as EntryDetailType, Source, SourceType, SourceConfig } from '../types';
+import { api } from '../api/client';
+import SourceForm from './SourceForm';
+import BuildPanel from './BuildPanel';
+import SearchBar from './SearchBar';
+import DocViewer from './DocViewer';
+
+const TYPE_ICONS: Record<SourceType, typeof Package> = {
+  zip: FileArchive,
+  antora: GitBranch,
+  maven: Package,
+  asciidoc: FileText,
+  'github-markdown': Github,
+  'source-code': FileCode,
+};
+
+const TYPE_LABELS: Record<SourceType, string> = {
+  zip: 'ZIP',
+  antora: 'Antora',
+  maven: 'Maven',
+  asciidoc: 'AsciiDoc',
+  'github-markdown': 'GitHub Markdown',
+  'source-code': 'Source Code',
+};
+
+const statusConfig: Record<string, { icon: typeof CheckCircle; color: string; bg: string; label: string }> = {
+  pending:  { icon: Clock, color: 'text-text-muted', bg: 'bg-bg-alt', label: 'Pending' },
+  building: { icon: Loader2, color: 'text-warning', bg: 'bg-warning/5', label: 'Building' },
+  ready:    { icon: CheckCircle, color: 'text-success', bg: 'bg-success/5', label: 'Ready' },
+  error:    { icon: AlertCircle, color: 'text-danger', bg: 'bg-danger/5', label: 'Error' },
+};
+
+export default function EntryDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const [entry, setEntry] = useState<EntryDetailType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sourceFormOpen, setSourceFormOpen] = useState(false);
+  const [editingSource, setEditingSource] = useState<Source | null>(null);
+  const [formRevision, setFormRevision] = useState(0);
+  const [buildKey, setBuildKey] = useState(0);
+  const [sourceMenuOpen, setSourceMenuOpen] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<string | undefined>(undefined);
+
+  const fetchEntry = useCallback(async () => {
+    if (!id) return;
+    try {
+      const data = await api.entries.get(id);
+      setEntry(data);
+      setError(null);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => { fetchEntry(); }, [fetchEntry]);
+
+  useEffect(() => {
+    const doc = searchParams.get('doc');
+    if (doc) {
+      setSelectedFile(doc);
+    }
+  }, [searchParams]);
+
+  const handleDeleteEntry = async () => {
+    if (!entry) return;
+    if (!confirm(`Delete entry "${entry.name}" and all its data permanently?`)) return;
+    try {
+      await api.entries.delete(entry.id);
+      navigate('/');
+    } catch (err) {
+      alert(`Failed to delete: ${(err as Error).message}`);
+    }
+  };
+
+  const handleAddSource = async (data: { type: SourceType; label: string; config: SourceConfig }) => {
+    if (!entry) return;
+    await api.sources.create(entry.id, data);
+    await fetchEntry();
+  };
+
+  const handleEditSource = async (data: { type: SourceType; label: string; config: SourceConfig }) => {
+    if (!editingSource) return;
+    await api.sources.update(editingSource.id, { label: data.label, config: data.config });
+    setEditingSource(null);
+    await fetchEntry();
+  };
+
+  const handleDeleteSource = async (source: Source) => {
+    if (!confirm(`Remove source "${source.label}"?`)) return;
+    await api.sources.delete(source.id);
+    await fetchEntry();
+  };
+
+  const handleBuild = async () => {
+    if (!entry) return;
+    try {
+      await api.build.trigger(entry.id);
+      setBuildKey((k) => k + 1);
+      await fetchEntry();
+    } catch (err) {
+      alert(`Build failed: ${(err as Error).message}`);
+    }
+  };
+
+  const handleDownloadScript = async () => {
+    if (!entry) return;
+    try {
+      const script = await api.build.cliScript(entry.id);
+      const blob = new Blob([script], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      const slug = entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+      a.download = `dockit-build-${slug}.sh`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      alert(`Failed to generate script: ${(err as Error).message}`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 size={24} className="animate-spin text-text-muted" />
+      </div>
+    );
+  }
+
+  if (error || !entry) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <AlertCircle size={32} className="text-danger" />
+        <p className="text-sm text-danger">{error || 'Entry not found'}</p>
+        <Link to="/" className="text-sm text-primary hover:underline">Back to entries</Link>
+      </div>
+    );
+  }
+
+  const status = statusConfig[entry.status] || statusConfig.pending;
+  const StatusIcon = status.icon;
+
+  return (
+    <div className="flex h-full">
+      {/* Left panel: config */}
+      <div className="w-[420px] shrink-0 border-r border-border overflow-auto p-5">
+        {/* Header */}
+        <div className="flex items-center gap-2 mb-4">
+          <button
+            onClick={() => navigate('/')}
+            className="p-1.5 rounded-md text-text-dim hover:text-text hover:bg-bg-alt transition-colors"
+          >
+            <ArrowLeft size={16} />
+          </button>
+          <div className="flex-1 min-w-0">
+            <h1 className="text-lg font-semibold text-text truncate">{entry.name}</h1>
+          </div>
+          <Link
+            to={`/entries/${entry.id}/edit`}
+            className="p-1.5 rounded-md text-text-dim hover:text-text hover:bg-bg-alt transition-colors"
+            title="Edit"
+          >
+            <Pencil size={14} />
+          </Link>
+          <button
+            onClick={handleDeleteEntry}
+            className="p-1.5 rounded-md text-text-dim hover:text-danger hover:bg-danger/5 transition-colors"
+            title="Delete"
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+
+        {/* Meta */}
+        <div className="flex items-center gap-3 mb-4">
+          <span className="text-xs text-text-dim font-mono bg-bg-alt px-2 py-0.5 rounded">{entry.version}</span>
+          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${status.color} ${status.bg}`}>
+            <StatusIcon size={11} className={entry.status === 'building' ? 'animate-spin' : ''} />
+            {status.label}
+          </span>
+        </div>
+
+        {entry.description && (
+          <p className="text-sm text-text-dim mb-4 leading-relaxed">{entry.description}</p>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 mb-5">
+          <button
+            onClick={handleBuild}
+            disabled={entry.status === 'building'}
+            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+          >
+            <Play size={14} />
+            Build
+          </button>
+          <button
+            onClick={handleDownloadScript}
+            className="flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium ring-1 ring-border text-text-dim hover:bg-bg-alt hover:text-text transition-colors"
+            title="Download CLI script"
+          >
+            <Download size={14} />
+          </button>
+        </div>
+
+        {/* Sources */}
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-2.5">
+            <h3 className="text-xs font-semibold text-text-dim uppercase tracking-wider">
+              Sources ({entry.sources.length})
+            </h3>
+            <button
+              onClick={() => { setEditingSource(null); setFormRevision(r => r + 1); setSourceFormOpen(true); }}
+              className="flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium text-primary hover:bg-primary/10 transition-colors"
+            >
+              <Plus size={12} />
+              Add
+            </button>
+          </div>
+
+          {entry.sources.length === 0 ? (
+            <div className="bg-bg-alt ring-1 ring-border rounded-lg p-4 text-center">
+              <p className="text-xs text-text-muted">No sources yet</p>
+            </div>
+          ) : (
+            <div className="space-y-1.5">
+              {entry.sources.map((source) => {
+                const Icon = TYPE_ICONS[source.type];
+                return (
+                  <div key={source.id} className="flex items-center gap-2.5 bg-surface ring-1 ring-border rounded-lg px-3 py-2 group/src">
+                    <Icon size={14} className="text-text-muted shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-text truncate">{source.label}</p>
+                      <p className="text-[11px] text-text-muted font-mono truncate">{getConfigSummary(source)}</p>
+                    </div>
+                    <span className="text-[10px] text-text-muted uppercase tracking-wider shrink-0">{TYPE_LABELS[source.type]}</span>
+                    {Boolean((source.config as Record<string, unknown>)?.graphifyEnabled) && (
+                      <Network size={11} className="text-accent shrink-0" aria-label="Knowledge graph enabled" />
+                    )}
+                    <div className="relative">
+                      <button
+                        onClick={() => setSourceMenuOpen(sourceMenuOpen === source.id ? null : source.id)}
+                        className="p-1 rounded text-text-muted hover:text-text opacity-0 group-hover/src:opacity-100 transition-all"
+                      >
+                        <MoreHorizontal size={13} />
+                      </button>
+                      {sourceMenuOpen === source.id && (
+                        <>
+                          <div className="fixed inset-0 z-10" onClick={() => setSourceMenuOpen(null)} />
+                          <div className="absolute right-0 top-full mt-1 z-20 bg-surface ring-1 ring-border rounded-lg shadow-lg py-1 w-28">
+                            <button
+                              onClick={() => { setEditingSource(source); setFormRevision(r => r + 1); setSourceFormOpen(true); setSourceMenuOpen(null); }}
+                              className="w-full text-left px-3 py-1.5 text-xs text-text hover:bg-bg-alt transition-colors"
+                            >
+                              Edit
+                            </button>
+                            <button
+                              onClick={() => { handleDeleteSource(source); setSourceMenuOpen(null); }}
+                              className="w-full text-left px-3 py-1.5 text-xs text-danger hover:bg-danger/5 transition-colors"
+                            >
+                              Remove
+                            </button>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Build Log */}
+        <BuildPanel entryId={entry.id} refreshKey={buildKey} />
+      </div>
+
+      {/* Right panel: search + viewer */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="p-4 border-b border-border">
+          <SearchBar entryId={entry.id} onSelectFile={setSelectedFile} scopeLabel="Entry only" />
+        </div>
+        <div className="flex-1 overflow-auto p-4">
+          <DocViewer entryId={entry.id} selectedFile={selectedFile} />
+        </div>
+      </div>
+
+      <SourceForm
+        key={formRevision}
+        open={sourceFormOpen}
+        onClose={() => { setSourceFormOpen(false); setEditingSource(null); }}
+        onCreate={editingSource ? handleEditSource : handleAddSource}
+        initial={editingSource ? { type: editingSource.type, label: editingSource.label, config: editingSource.config } : undefined}
+      />
+    </div>
+  );
+}
+
+function getConfigSummary(source: Source): string {
+  const c = source.config as Record<string, string>;
+  switch (source.type) {
+    case 'zip': return c.localPath || c.url || '';
+    case 'maven': return `${c.groupId || '?'}:${c.artifactId || '?'}:${c.version || '?'}`;
+    case 'antora': return c.localPath || c.repoUrl || c.zipPath || '';
+    case 'asciidoc': return c.localPath || c.repoUrl || c.zipPath || '';
+    case 'github-markdown': return c.localPath || c.repoUrl || '';
+    case 'source-code': return c.localPath || c.repoUrl || c.zipPath || '';
+  }
+}

package/apps/client/src/components/EntryForm.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ArrowLeft, Save } from 'lucide-react';
+import { api } from '../api/client';
+
+export default function EntryForm() {
+  const { id } = useParams<{ id: string }>();
+  const isEdit = Boolean(id);
+  const navigate = useNavigate();
+
+  const [name, setName] = useState('');
+  const [version, setVersion] = useState('');
+  const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(isEdit);
+
+  useEffect(() => {
+    if (!id) return;
+    api.entries.get(id).then((data) => {
+      setName(data.name);
+      setVersion(data.version);
+      setDescription(data.description);
+    }).catch((err) => setError((err as Error).message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !version.trim()) {
+      setError('Name and version are required');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      if (isEdit && id) {
+        await api.entries.update(id, { name: name.trim(), version: version.trim(), description: description.trim() });
+      } else {
+        await api.entries.create({ name: name.trim(), version: version.trim(), description: description.trim() });
+      }
+      navigate('/');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="py-20 text-center text-sm text-text-muted">Loading...</div>;
+  }
+
+  return (
+    <div className="p-6 md:p-8 max-w-xl">
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-1.5 text-sm text-text-dim hover:text-text mb-6 transition-colors"
+      >
+        <ArrowLeft size={16} />
+        Back
+      </button>
+
+      <h1 className="text-xl font-semibold text-text mb-6">
+        {isEdit ? 'Edit Entry' : 'Create New Entry'}
+      </h1>
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Quarkus"
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Version</label>
+          <input
+            type="text"
+            value={version}
+            onChange={(e) => setVersion(e.target.value)}
+            placeholder="e.g. 3.8.0"
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Description <span className="text-text-muted font-normal">(optional)</span></label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Brief description of this documentation entry"
+            rows={3}
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all resize-none"
+          />
+        </div>
+
+        {error && (
+          <div className="px-3 py-2 bg-danger/5 ring-1 ring-danger/20 rounded-lg text-sm text-danger">
+            {error}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={saving}
+          className="flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+        >
+          <Save size={16} />
+          {saving ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Entry'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/apps/client/src/components/EntryList.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Plus, BookOpen, Clock, CheckCircle, AlertCircle, Loader2, Trash2, Package } from 'lucide-react';
+import type { Entry } from '../types';
+import { api } from '../api/client';
+
+const statusConfig: Record<string, { icon: typeof CheckCircle; color: string; bg: string; label: string }> = {
+  pending:  { icon: Clock, color: 'text-text-muted', bg: 'bg-bg-alt', label: 'Pending' },
+  building: { icon: Loader2, color: 'text-warning', bg: 'bg-warning/5', label: 'Building' },
+  ready:    { icon: CheckCircle, color: 'text-success', bg: 'bg-success/5', label: 'Ready' },
+  error:    { icon: AlertCircle, color: 'text-danger', bg: 'bg-danger/5', label: 'Error' },
+};
+
+export default function EntryList() {
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const fetchEntries = async () => {
+    try {
+      setLoading(true);
+      const data = await api.entries.list();
+      setEntries(data);
+      setError(null);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchEntries(); }, []);
+
+  const handleDelete = async (e: React.MouseEvent, id: string, name: string) => {
+    e.stopPropagation();
+    if (!confirm(`Delete entry "${name}" and all its data?`)) return;
+    try {
+      await api.entries.delete(id);
+      setEntries((prev) => prev.filter((e) => e.id !== id));
+    } catch (err) {
+      alert(`Failed to delete: ${(err as Error).message}`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 size={24} className="animate-spin text-text-muted" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <AlertCircle size={32} className="text-danger" />
+        <p className="text-sm text-danger">{error}</p>
+        <button onClick={fetchEntries} className="text-sm text-primary hover:underline">Retry</button>
+      </div>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-5">
+        <div className="w-16 h-16 rounded-2xl bg-bg-alt flex items-center justify-center">
+          <BookOpen size={28} className="text-text-muted" />
+        </div>
+        <div className="text-center max-w-xs">
+          <h2 className="text-lg font-semibold text-text">No documentation entries yet</h2>
+          <p className="text-sm text-text-dim mt-1.5">Create your first entry to start building your documentation hub.</p>
+        </div>
+        <Link
+          to="/entries/new"
+          className="flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors"
+        >
+          <Plus size={16} />
+          New Entry
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 md:p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-semibold text-text">Documentation Hub</h1>
+          <p className="text-sm text-text-dim mt-0.5">{entries.length} entr{entries.length === 1 ? 'y' : 'ies'}</p>
+        </div>
+        <Link
+          to="/entries/new"
+          className="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors"
+        >
+          <Plus size={15} />
+          New Entry
+        </Link>
+      </div>
+
+      <div className="ring-1 ring-border rounded-xl overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-bg-alt text-xs text-text-dim uppercase tracking-wider">
+              <th className="text-left px-4 py-2.5 font-medium">Name</th>
+              <th className="text-left px-4 py-2.5 font-medium w-24">Version</th>
+              <th className="text-left px-4 py-2.5 font-medium w-20">Status</th>
+              <th className="text-left px-4 py-2.5 font-medium w-20">Sources</th>
+              <th className="text-left px-4 py-2.5 font-medium hidden md:table-cell">Description</th>
+              <th className="w-10"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => {
+              const status = statusConfig[entry.status] || statusConfig.pending;
+              const StatusIcon = status.icon;
+              const animClass = entry.status === 'building' ? 'animate-spin' : '';
+              return (
+                <tr
+                  key={entry.id}
+                  onClick={() => navigate(`/entries/${entry.id}`)}
+                  className="border-t border-border hover:bg-bg-alt/50 cursor-pointer transition-colors group"
+                >
+                  <td className="px-4 py-3">
+                    <span className="text-sm font-medium text-text group-hover:text-primary transition-colors">
+                      {entry.name}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-text-dim font-mono">{entry.version}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${status.color} ${status.bg}`}>
+                      <StatusIcon size={11} className={animClass} />
+                      {status.label}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-text-dim">
+                      {entry.source_count ?? 0}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 hidden md:table-cell">
+                    <span className="text-xs text-text-dim truncate block max-w-xs">
+                      {entry.description || '—'}
+                    </span>
+                  </td>
+                  <td className="px-2 py-3">
+                    <button
+                      onClick={(e) => handleDelete(e, entry.id, entry.name)}
+                      className="p-1 rounded text-text-muted hover:text-danger opacity-0 group-hover:opacity-100 transition-all"
+                      title="Delete"
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}