@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/src/canvas/widgets/LinkPreview.module.css

@@ -1,37 +1,77 @@
+/* ── Plain link-preview card ──────────────────────────────────────── */
+
+.container {
+  position: relative;
+}
+
 .card {
   display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  text-decoration: none;
-  color: inherit;
-  min-width: 240px;
-  transition: background 150ms;
+  flex-direction: column;
+  width: 320px;
+  border-radius: 6px;
+  border: 2px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
-.card:hover {
-  background: var(--bgColor-muted, #f6f8fa);
+:global([data-sb-canvas-theme^='dark']) .card {
+  border-color: var(--borderColor-default, #3d444d);
 }
 
-.icon {
-  font-size: 20px;
-  flex-shrink: 0;
+/* Hide own border when parent widget slot is selected (avoid double focus ring) */
+:global([data-widget-selected]) .card {
+  border-color: transparent;
 }
 
-.text {
-  overflow: hidden;
-  min-width: 0;
+.ogImage {
+  width: 100%;
+  max-height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 
 .title {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.35;
   color: var(--fgColor-default, #1f2328);
-  white-space: nowrap;
+  cursor: text;
+  word-break: break-word;
+}
+
+.titleInput {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--fgColor-default, #1f2328);
+  width: 100%;
+}
+
+.description {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--fgColor-muted, #656d76);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .url {
@@ -49,3 +89,331 @@
   text-decoration: underline;
   color: var(--fgColor-accent, #0969da);
 }
+
+/* ── GitHub issue / discussion card ──────────────────────────────── */
+
+.issueCard {
+  display: flex;
+  flex-direction: column;
+  width: 580px;
+  min-height: 300px;
+  border-radius: 10px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.issueCardCollapsed {
+  max-height: 800px;
+}
+
+.typeBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.issueBodyScrollable {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+}
+
+.issueHeader {
+  padding: 24px 24px 0;
+}
+
+.issueTitle {
+  margin: 0 0 4px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueTitleLink {
+  color: var(--fgColor-default, #1f2328) !important;
+  text-decoration: none !important;
+}
+
+.issueTitleLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.issueNumber {
+  font-size: 32px;
+  font-weight: 400;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueContext {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueByline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 24px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.issueBylineLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.authorLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none !important;
+  color: var(--fgColor-default, #1f2328) !important;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.authorLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.bylineText {
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bylineText strong {
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+/* ── Issue body (rendered markdown) ──────────────────────────────── */
+
+.issueBody {
+  padding: 16px 24px 24px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueBody :global(*) {
+  pointer-events: none;
+}
+
+.issueBody a {
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.issueBody a:hover {
+  text-decoration: underline;
+}
+
+.issueBody img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+}
+
+.issueBody video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+.issueBody h1 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 16px 0 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h1:first-child {
+  margin-top: 0;
+}
+
+.issueBody h2 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 14px 0 6px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 12px 0 4px;
+  line-height: 1.3;
+}
+
+.issueBody p {
+  margin: 0 0 12px;
+}
+
+.issueBody code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.issueBody ul {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: disc;
+}
+
+.issueBody ol {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: decimal;
+}
+
+.issueBody li {
+  margin: 0 0 4px;
+  display: list-item;
+}
+
+.issueBody li > ul,
+.issueBody li > ol {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+/* Accent-color checkboxes */
+.issueBody input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+  accent-color: var(--fgColor-accent, #0969da);
+}
+
+.issueBody li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -24px;
+}
+
+/* GFM: Strikethrough */
+.issueBody del {
+  text-decoration: line-through;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* GFM: Tables */
+.issueBody table {
+  border-collapse: collapse;
+  margin: 12px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.issueBody th,
+.issueBody td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.issueBody th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* Code blocks */
+.issueBody pre {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 12px 0;
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  line-height: 1.4;
+}
+
+.issueBody pre code {
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Blockquotes */
+.issueBody blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 12px 0;
+  padding: 4px 16px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* Horizontal rules */
+.issueBody hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
+/* Details/summary — show content expanded, no collapse UI */
+.issueBody details {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.issueBody summary {
+  display: none;
+}
+
+.error {
+  margin: 0;
+  padding: 0 24px 12px;
+  font-size: 12px;
+  color: var(--fgColor-danger, #cf222e);
+}

package/src/canvas/widgets/LinkPreview.test.jsx

@@ -0,0 +1,193 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import LinkPreview from './LinkPreview.jsx'
+
+describe('LinkPreview', () => {
+  it('renders GitHub issue card with markdown body and author byline', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-1"
+        props={{
+          url: 'https://github.com/dfosco/storyboard/issues/42',
+          title: '#42 Ship GitHub embeds',
+          github: {
+            context: 'GitHub · dfosco/storyboard · Issue #42',
+            body: '## Summary\n\nThis is a **bold** point.\n\n- Item one\n- Item two',
+            authors: ['dfosco'],
+            createdAt: '2026-01-01T00:00:00Z',
+          },
+        }}
+      />,
+    )
+
+    // Title split: text + muted number
+    expect(screen.getByText('Ship GitHub embeds')).toBeInTheDocument()
+    expect(screen.getByText('#42')).toBeInTheDocument()
+
+    // Markdown body renders headings, bold, lists
+    const headings = container.querySelectorAll('h2')
+    expect(headings.length).toBeGreaterThanOrEqual(1)
+    // Find the body heading (not the title)
+    const summaryHeading = Array.from(headings).find(h => h.textContent === 'Summary')
+    expect(summaryHeading).toBeTruthy()
+    expect(container.querySelectorAll('li')).toHaveLength(2)
+
+    // Author byline
+    expect(screen.getByText('dfosco')).toBeInTheDocument()
+  })
+
+  it('does not render GitHub layout for non-GitHub links', () => {
+    render(
+      <LinkPreview
+        id="link-2"
+        props={{
+          url: 'https://example.com/docs',
+          title: 'Example docs',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Example docs')).toBeInTheDocument()
+    expect(screen.getByText('example.com')).toBeInTheDocument()
+  })
+
+  it('renders plain link-preview without github data', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-3"
+        props={{
+          url: 'https://figma.com/design/abc',
+          title: 'My design',
+          width: 320,
+          height: 120,
+        }}
+      />,
+    )
+
+    expect(screen.getByText('My design')).toBeInTheDocument()
+    // No issue card rendered
+    expect(container.querySelector('header')).toBeNull()
+  })
+
+  it('renders OG image when present', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-4"
+        props={{
+          url: 'https://example.com',
+          title: 'With image',
+          ogImage: 'https://example.com/og.png',
+        }}
+      />,
+    )
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    expect(img.src).toBe('https://example.com/og.png')
+  })
+
+  it('does not render image element when ogImage is absent', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-5"
+        props={{
+          url: 'https://example.com',
+          title: 'No image',
+        }}
+      />,
+    )
+
+    expect(container.querySelector('img')).toBeNull()
+  })
+
+  it('hides broken OG image on error', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-6"
+        props={{
+          url: 'https://example.com',
+          title: 'Broken image',
+          ogImage: 'https://example.com/broken.png',
+        }}
+      />,
+    )
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    fireEvent.error(img)
+    expect(img.style.display).toBe('none')
+  })
+
+  it('renders description when present', () => {
+    render(
+      <LinkPreview
+        id="link-7"
+        props={{
+          url: 'https://example.com',
+          title: 'With desc',
+          description: 'A short description of the page',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('A short description of the page')).toBeInTheDocument()
+  })
+
+  it('enters edit mode on double-click and saves on change', () => {
+    const onUpdate = vi.fn()
+    render(
+      <LinkPreview
+        id="link-8"
+        props={{
+          url: 'https://example.com',
+          title: 'Editable title',
+        }}
+        onUpdate={onUpdate}
+      />,
+    )
+
+    const titleEl = screen.getByText('Editable title')
+    fireEvent.doubleClick(titleEl)
+
+    const input = document.querySelector('input[type="text"]')
+    expect(input).toBeTruthy()
+    expect(input.value).toBe('Editable title')
+
+    fireEvent.change(input, { target: { value: 'New title' } })
+    expect(onUpdate).toHaveBeenCalledWith({ title: 'New title' })
+  })
+
+  it('does not enter edit mode when onUpdate is missing', () => {
+    render(
+      <LinkPreview
+        id="link-9"
+        props={{
+          url: 'https://example.com',
+          title: 'Read-only',
+        }}
+      />,
+    )
+
+    const titleEl = screen.getByText('Read-only')
+    fireEvent.doubleClick(titleEl)
+
+    // Should not show an input
+    expect(document.querySelector('input[type="text"]')).toBeNull()
+  })
+
+  it('shows fallback text when title is empty', () => {
+    render(
+      <LinkPreview
+        id="link-10"
+        props={{
+          url: 'https://example.com/page',
+        }}
+        onUpdate={() => {}}
+      />,
+    )
+
+    // Falls back to hostname — appears in both title and URL
+    const matches = screen.getAllByText('example.com')
+    expect(matches.length).toBeGreaterThanOrEqual(1)
+  })
+})