npm - @lon-ask/dockit - Versions diffs - 0.1.1 → 0.1.4 - Mend

@lon-ask/dockit 0.1.1 → 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.

Files changed (140) hide show

package/apps/client/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dockit — Documentation Hub</title>
-    <script type="module" crossorigin src="/assets/index-CqOXxsEZ.js"></script>
+    <script type="module" crossorigin src="/assets/index-DzadxeQH.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DwvaANnI.css">
   </head>
   <body class="antialiased">

package/apps/client/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dockit — Documentation Hub</title>
+  </head>
+  <body class="antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/apps/client/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "@dockit/client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7"
+  }
+}

package/apps/client/src/App.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout';
+import EntryList from './components/EntryList';
+import EntryForm from './components/EntryForm';
+import EntryDetail from './components/EntryDetail';
+export default function App() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<EntryList />} />
+        <Route path="/entries/new" element={<EntryForm />} />
+        <Route path="/entries/:id/edit" element={<EntryForm />} />
+        <Route path="/entries/:id" element={<EntryDetail />} />
+      </Routes>
+    </Layout>
+  );
+}

package/apps/client/src/api/client.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import type { Entry, EntryDetail, Source, SourceConfig, BuildStatusResponse, SearchResult } from '../types';
+const BASE = '/api';
+async function request<T>(url: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${url}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(body.error || `Request failed: ${res.status}`);
+  }
+  return res.json();
+}
+export const api = {
+  entries: {
+    list: () => request<Entry[]>('/entries'),
+    get: (id: string) => request<EntryDetail>(`/entries/${id}`),
+    create: (data: { name: string; version: string; description?: string }) =>
+      request<Entry>('/entries', { method: 'POST', body: JSON.stringify(data) }),
+    update: (id: string, data: { name?: string; version?: string; description?: string }) =>
+      request<Entry>(`/entries/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+    delete: (id: string) =>
+      request<{ success: boolean }>(`/entries/${id}`, { method: 'DELETE' }),
+  },
+  sources: {
+    create: (entryId: string, data: { type: string; label: string; config: SourceConfig }) =>
+      request<Source>(`/entries/${entryId}/sources`, { method: 'POST', body: JSON.stringify(data) }),
+    update: (id: string, data: { label?: string; config?: SourceConfig }) =>
+      request<Source>(`/sources/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+    delete: (id: string) =>
+      request<{ success: boolean }>(`/sources/${id}`, { method: 'DELETE' }),
+  },
+  build: {
+    trigger: (entryId: string) =>
+      request<{ buildId: string; status: string }>(`/entries/${entryId}/build`, { method: 'POST' }),
+    status: (entryId: string) =>
+      request<BuildStatusResponse>(`/entries/${entryId}/build-status`),
+    cliScript: (entryId: string) =>
+      fetch(`${BASE}/entries/${entryId}/cli-script`).then((r) => r.text()),
+  },
+  search: (entryId: string, q: string) =>
+    request<SearchResult[]>(`/entries/${entryId}/search?q=${encodeURIComponent(q)}`),
+  searchGlobal: (q: string) =>
+    request<Array<SearchResult & { entryId: string; entryName: string; entryVersion: string }>>(`/search?q=${encodeURIComponent(q)}`),
+  bundleUrl: (entryId: string) => `${BASE}/bundle/${entryId}/`,
+};

package/apps/client/src/components/BuildPanel.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+import { useEffect, useState, useRef } from 'react';
+import { Terminal, ChevronDown, ChevronRight, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
+import type { BuildStatusResponse } from '../types';
+import { api } from '../api/client';
+interface Props {
+  entryId: string;
+  refreshKey: number;
+}
+export default function BuildPanel({ entryId, refreshKey }: Props) {
+  const [status, setStatus] = useState<BuildStatusResponse | null>(null);
+  const [open, setOpen] = useState(false);
+  const logEndRef = useRef<HTMLDivElement>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        const data = await api.build.status(entryId);
+        setStatus(data);
+        if (data.status === 'building') {
+          setOpen(true);
+        }
+        if (data.status === 'ready' || data.status === 'error') {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+        }
+      } catch {
+        // ignored
+      }
+    };
+    fetch();
+    intervalRef.current = setInterval(fetch, 1500);
+    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+  }, [entryId, refreshKey]);
+  if (!status || status.status === 'none') return null;
+  const accentColor = status.status === 'ready' ? 'bg-success' :
+                      status.status === 'error' ? 'bg-danger' : 'bg-warning';
+  return (
+    <div className="bg-surface ring-1 ring-border rounded-lg overflow-hidden">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 px-3 py-2 hover:bg-bg-alt transition-colors text-left"
+      >
+        {open ? <ChevronDown size={14} className="text-text-muted" /> : <ChevronRight size={14} className="text-text-muted" />}
+        <Terminal size={14} className="text-text-dim" />
+        <span className="text-xs font-medium text-text">Build Log</span>
+        <span className="flex items-center gap-1 ml-auto">
+          {status.status === 'building' && <Loader2 size={12} className="animate-spin text-warning" />}
+          {status.status === 'ready' && <CheckCircle size={12} className="text-success" />}
+          {status.status === 'error' && <AlertCircle size={12} className="text-danger" />}
+          <span className={`text-[11px] font-medium ${
+            status.status === 'ready' ? 'text-success' :
+            status.status === 'error' ? 'text-danger' :
+            'text-warning'
+          }`}>
+            {status.status.charAt(0).toUpperCase() + status.status.slice(1)}
+          </span>
+        </span>
+      </button>
+      {open && (
+        <div className="relative">
+          <div className={`absolute left-0 top-0 bottom-0 w-0.5 ${accentColor}`} />
+          <div className="bg-terminal-bg text-terminal-fg p-3 pl-4 max-h-48 overflow-auto font-mono text-[11px] leading-relaxed">
+            <pre className="whitespace-pre-wrap">{status.log || 'Waiting for build to start...'}</pre>
+            <div ref={logEndRef} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/client/src/components/DocViewer.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+import { ExternalLink, Maximize2, Minimize2, FileWarning, FileText } from 'lucide-react';
+import { api } from '../api/client';
+interface Props {
+  entryId: string;
+  selectedFile?: string;
+}
+export default function DocViewer({ entryId, selectedFile }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const [error, setError] = useState(false);
+  const url = selectedFile
+    ? `${api.bundleUrl(entryId)}${selectedFile}`
+    : api.bundleUrl(entryId);
+  useEffect(() => { setError(false); }, [selectedFile]);
+  if (!selectedFile) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+        <div className="w-14 h-14 rounded-2xl bg-bg-alt flex items-center justify-center">
+          <FileText size={26} className="text-text-muted" />
+        </div>
+        <div>
+          <p className="text-sm text-text-dim font-medium">No document selected</p>
+          <p className="text-xs text-text-muted mt-1">Search for a document and click a result to view it here.</p>
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+        <div className="w-14 h-14 rounded-2xl bg-bg-alt flex items-center justify-center">
+          <FileWarning size={26} className="text-text-muted" />
+        </div>
+        <div>
+          <p className="text-sm text-text-dim font-medium">Could not load document</p>
+          <p className="text-xs text-text-muted mt-1">The documentation may not be built yet. Click &ldquo;Build&rdquo; to generate it.</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={`flex flex-col h-full ${expanded ? 'fixed inset-0 z-40 bg-bg p-4' : ''}`}>
+      <div className="flex items-center gap-2 mb-2 shrink-0">
+        <span className="text-xs text-text-muted font-mono truncate flex-1">{selectedFile}</span>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="p-1 rounded text-text-muted hover:text-text hover:bg-bg-alt transition-colors"
+          title={expanded ? 'Exit fullscreen' : 'Fullscreen'}
+        >
+          {expanded ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
+        </button>
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="p-1 rounded text-text-muted hover:text-text hover:bg-bg-alt transition-colors"
+          title="Open in new tab"
+        >
+          <ExternalLink size={14} />
+        </a>
+      </div>
+      <iframe
+        src={url}
+        onError={() => setError(true)}
+        className="flex-1 w-full ring-1 ring-border rounded-lg bg-surface min-h-0"
+        title="Documentation Viewer"
+      />
+    </div>
+  );
+}

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

@@ -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 || '';
+  }
+}