@dfosco/storyboard 0.5.0-alpha.0

package/src/core/comments/queries.js

@@ -0,0 +1,245 @@
+/**
+ * GraphQL query and mutation strings for the comments system.
+ */
+
+/** Search for a discussion by title — full data (used by drawer) */
+export const SEARCH_DISCUSSION = `
+  query SearchDiscussion($query: String!) {
+    search(query: $query, type: DISCUSSION, first: 1) {
+      nodes {
+        ... on Discussion {
+          id
+          title
+          body
+          url
+          comments(first: 100) {
+            nodes {
+              id
+              body
+              createdAt
+              author {
+                login
+                avatarUrl
+              }
+              replies(first: 50) {
+                nodes {
+                  id
+                  body
+                  createdAt
+                  author {
+                    login
+                    avatarUrl
+                  }
+                  reactionGroups {
+                    content
+                    users(first: 0) { totalCount }
+                    viewerHasReacted
+                  }
+                }
+              }
+              reactionGroups {
+                content
+                users(first: 0) { totalCount }
+                viewerHasReacted
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+/** Search for a discussion — lightweight (pins only: id, body for metadata, author) */
+export const SEARCH_DISCUSSION_LIGHTWEIGHT = `
+  query SearchDiscussionLightweight($query: String!) {
+    search(query: $query, type: DISCUSSION, first: 1) {
+      nodes {
+        ... on Discussion {
+          id
+          title
+          url
+          comments(first: 100) {
+            nodes {
+              id
+              body
+              author {
+                login
+                avatarUrl
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+/** Fetch full detail for a single comment by node ID */
+export const GET_COMMENT_DETAIL = `
+  query GetCommentDetail($id: ID!) {
+    node(id: $id) {
+      ... on DiscussionComment {
+        id
+        body
+        createdAt
+        author {
+          login
+          avatarUrl
+        }
+        replies(first: 50) {
+          nodes {
+            id
+            body
+            createdAt
+            author {
+              login
+              avatarUrl
+            }
+            reactionGroups {
+              content
+              users(first: 0) { totalCount }
+              viewerHasReacted
+            }
+          }
+        }
+        reactionGroups {
+          content
+          users(first: 0) { totalCount }
+          viewerHasReacted
+        }
+      }
+    }
+  }
+`
+
+/** Get the discussion category ID by name */
+export const GET_CATEGORY_ID = `
+  query GetCategoryId($owner: String!, $name: String!, $slug: String!) {
+    repository(owner: $owner, name: $name) {
+      id
+      discussionCategory(slug: $slug) {
+        id
+      }
+      discussionCategories(first: 25) {
+        nodes {
+          id
+          name
+          slug
+        }
+      }
+    }
+  }
+`
+
+/** Create a new discussion */
+export const CREATE_DISCUSSION = `
+  mutation CreateDiscussion($repositoryId: ID!, $categoryId: ID!, $title: String!, $body: String!) {
+    createDiscussion(input: { repositoryId: $repositoryId, categoryId: $categoryId, title: $title, body: $body }) {
+      discussion {
+        id
+        title
+        url
+      }
+    }
+  }
+`
+
+/** Add a comment to a discussion */
+export const ADD_COMMENT = `
+  mutation AddComment($discussionId: ID!, $body: String!) {
+    addDiscussionComment(input: { discussionId: $discussionId, body: $body }) {
+      comment {
+        id
+        body
+        createdAt
+        author {
+          login
+          avatarUrl
+        }
+      }
+    }
+  }
+`
+
+/** Reply to a discussion comment */
+export const ADD_REPLY = `
+  mutation AddReply($discussionId: ID!, $replyToId: ID!, $body: String!) {
+    addDiscussionComment(input: { discussionId: $discussionId, body: $body, replyToId: $replyToId }) {
+      comment {
+        id
+        body
+        createdAt
+        author {
+          login
+          avatarUrl
+        }
+      }
+    }
+  }
+`
+
+/** Update a discussion comment body */
+export const UPDATE_COMMENT = `
+  mutation UpdateComment($commentId: ID!, $body: String!) {
+    updateDiscussionComment(input: { commentId: $commentId, body: $body }) {
+      comment {
+        id
+        body
+      }
+    }
+  }
+`
+
+/** Delete a discussion comment */
+export const DELETE_COMMENT = `
+  mutation DeleteComment($commentId: ID!) {
+    deleteDiscussionComment(input: { id: $commentId }) {
+      comment {
+        id
+      }
+    }
+  }
+`
+
+/** Add a reaction */
+export const ADD_REACTION = `
+  mutation AddReaction($subjectId: ID!, $content: ReactionContent!) {
+    addReaction(input: { subjectId: $subjectId, content: $content }) {
+      reaction {
+        content
+      }
+    }
+  }
+`
+
+/** Remove a reaction */
+export const REMOVE_REACTION = `
+  mutation RemoveReaction($subjectId: ID!, $content: ReactionContent!) {
+    removeReaction(input: { subjectId: $subjectId, content: $content }) {
+      reaction {
+        content
+      }
+    }
+  }
+`
+
+/** List all discussions in a category */
+export const LIST_DISCUSSIONS = `
+  query ListDiscussions($owner: String!, $name: String!, $categoryId: ID!) {
+    repository(owner: $owner, name: $name) {
+      discussions(first: 50, categoryId: $categoryId) {
+        nodes {
+          id
+          title
+          body
+          url
+          createdAt
+          comments {
+            totalCount
+          }
+        }
+      }
+    }
+  }
+`

package/src/core/comments/ui/AuthModal.jsx

@@ -0,0 +1,114 @@
+/**
+ * AuthModal — PAT entry modal for comments authentication.
+ * Uses shadcn Button, Input, Label, Alert, Avatar.
+ */
+
+import { useState, useEffect, useRef } from 'react'
+import { setToken, validateToken } from '../auth.js'
+import { getCommentsConfig } from '../config.js'
+import { Button } from '../../lib/components/ui/button/index.js'
+import { Input } from '../../lib/components/ui/input/index.js'
+import { Label } from '../../lib/components/ui/label/index.js'
+import * as Alert from '../../lib/components/ui/alert/index.js'
+import * as Avatar from '../../lib/components/ui/avatar/index.js'
+
+export default function AuthModal({ onDone, onClose, initialError = null }) {
+  const [token, setTokenValue] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState(null)
+  const [user, setUser] = useState(null)
+  const inputRef = useRef(null)
+
+  const commentsConfig = getCommentsConfig()
+  const repoOwner = commentsConfig?.repo?.owner || 'github'
+  const repoName = commentsConfig?.repo?.name || 'storyboard'
+  const repoSlug = `${repoOwner}/${repoName}`
+  const tokenTemplateName = 'Storyboard Comments'
+  const tokenTemplateDescription =
+    `Token for enabling comments on ${repoSlug} prototype. Configure as:\n\n` +
+    `Owner: ${repoOwner}\n` +
+    'Expiration: 366 days (recommended)\n' +
+    `Repository access: Only select repositories > ${repoSlug}\n` +
+    'Permissions: Repositories > Discussions > Access: Read and Write'
+  const tokenCreateUrl =
+    `https://github.com/settings/personal-access-tokens/new?` +
+    new URLSearchParams({
+      name: tokenTemplateName,
+      description: tokenTemplateDescription,
+    }).toString()
+
+  useEffect(() => {
+    setError(initialError)
+    inputRef.current?.focus()
+  }, [])
+
+  async function submit() {
+    const val = token.trim()
+    if (!val) return
+    setSubmitting(true); setError(null)
+    try { const result = await validateToken(val); setToken(val); setUser(result) }
+    catch (err) { setError(err.message) }
+    finally { setSubmitting(false) }
+  }
+
+  function done() { if (user) onDone?.(user) }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' && !user) submit()
+  }
+
+  return (
+    <div className="bg-popover text-popover-foreground border border-border rounded-lg shadow-lg overflow-hidden max-w-[600px] w-full font-sans">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h2 className="text-medium font-semibold">Sign in for comments</h2>
+        <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close" className="h-7 w-7 text-muted-foreground">&#215;</Button>
+      </div>
+      <div className="p-4 space-y-3">
+        {error && <Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>}
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Leave comments for other users to see and respond, and react to! Storyboard comments use Discussions as a back-end and require a GitHub PAT to be enabled.
+        </p>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Create a <a className="text-primary underline" href={tokenCreateUrl} target="_blank" rel="noopener">GitHub Fine-Grained Personal Access Token</a> with the settings below to get started:
+        </p>
+        <div className="px-3 py-2 bg-muted border border-border rounded text-xs text-muted-foreground leading-relaxed">
+          <div className="mb-1"><strong className="text-foreground">Fine-grained Personal Access Token</strong></div>
+          <div>Owner: <code className="px-1 bg-background rounded font-mono text-foreground">{repoOwner}</code></div>
+          <div>Expiration: <code className="px-1 bg-background rounded font-mono text-foreground">366 days</code> (recommended)</div>
+          <div>Repository access: <code className="px-1 bg-background rounded font-mono text-foreground">Only select repositories &gt; {repoSlug}</code></div>
+          <div>Permissions: <code className="px-1 bg-background rounded font-mono text-foreground">Repositories &gt; Discussions &gt; Access: Read and Write</code></div>
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="sb-auth-token-input">Personal Access Token</Label>
+          <Input
+            id="sb-auth-token-input"
+            type="password"
+            placeholder="github_pat_… or ghp_…"
+            autoComplete="off"
+            spellCheck={false}
+            className="font-mono"
+            value={token}
+            onChange={(e) => setTokenValue(e.target.value)}
+            ref={inputRef}
+            onKeyDown={handleKeydown}
+          />
+        </div>
+        {user && (
+          <div className="flex items-center py-1 gap-3">
+            <Avatar.Root className="h-10 w-10"><Avatar.Image src={user.avatarUrl} alt={user.login} /><Avatar.Fallback>{user.login[0]?.toUpperCase()}</Avatar.Fallback></Avatar.Root>
+            <div className="text-sm"><span className="text-foreground">{user.login}</span><span className="block text-xs text-success mt-0.5">&#10003; Signed in</span></div>
+          </div>
+        )}
+        <Alert.Root variant="warning" className="bg-amber-100 border-amber-300">
+          <Alert.Description className="text-amber-700">
+            ⚠️ Comments are an experimental feature and may be unstable.
+          </Alert.Description>
+        </Alert.Root>
+      </div>
+      <div className="flex items-center justify-end px-4 py-3 border-t border-border gap-2">
+        <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+        <Button size="sm" disabled={submitting} onClick={user ? done : submit}>{user ? 'Done' : (submitting ? 'Validating\u2026' : 'Sign in')}</Button>
+      </div>
+    </div>
+  )
+}

package/src/core/comments/ui/CommentOverlay.js

@@ -0,0 +1,52 @@
+/**
+ * Comment overlay UI utilities (vanilla JS).
+ *
+ * Provides menu items for the DevTools integration.
+ */
+
+import { isAuthenticated } from '../auth.js'
+import { toggleCommentMode } from '../commentMode.js'
+import { openAuthModal, signOut } from './authModal.js'
+import { openCommentsDrawer } from './commentsDrawer.js'
+
+/**
+ * Get menu items for the DevTools comments section.
+ * @returns {Array<{ label: string, icon: string, onClick: () => void }>}
+ */
+export function getCommentsMenuItems() {
+  const items = []
+
+  if (!isAuthenticated()) {
+    items.push({
+      label: 'Sign in for comments',
+      icon: '💬',
+      onClick: () => {
+        openAuthModal()
+      },
+    })
+  } else {
+    items.push({
+      label: 'Toggle comments',
+      icon: '💬',
+      onClick: () => {
+        toggleCommentMode()
+      },
+    })
+    items.push({
+      label: 'See all comments',
+      icon: '📋',
+      onClick: () => {
+        openCommentsDrawer()
+      },
+    })
+    items.push({
+      label: 'Sign out of comments',
+      icon: '🚪',
+      onClick: () => {
+        signOut()
+      },
+    })
+  }
+
+  return items
+}