wip

client/browser/src/contentScript/github/codeView.ts

@@ -114,7 +114,7 @@ function redraw(annotations: Annotation[]): void {
         if (lineEl) {
             const chipList = createItemChipList(
                 styledItemChipListParams({
-                    items,
+                    annotations: items,
                 })
             )
             lineEl.append(chipList)

client/browser/src/contentScript/github/pullRequestFilesView.ts

@@ -84,7 +84,7 @@ function redraw(file: DiffViewFileVersionData, annotations: Annotation[]): void
 
         const chipList = createItemChipList(
             styledItemChipListParams({
-                items: lineAnnotations.map(ann => ann.item),
+                annotations: lineAnnotations.map(ann => ann.item),
             })
         )
         lineEl.append(chipList)

lib/ui-react/package.json

@@ -24,7 +24,7 @@
     "prebuild": "mkdir -p dist && cp -R src/* dist/ && find dist/ -name '*.tsx' -delete",
     "build": "pnpm run --silent prebuild && tsc --build",
     "test": "vitest",
-    "storybook": "storybook dev --no-open --no-version-updates --no-release-notes",
+    "storybook": "storybook dev --no-version-updates",
     "prepublishOnly": "tsc --build --clean && pnpm run build"
   },
   "dependencies": {

lib/ui-react/src/chip/Chip.tsx

@@ -11,9 +11,7 @@ export const Chip: FunctionComponent<{
     annotation: Annotation
     className?: string
     popoverClassName?: string
-}> = ({ annotation: ann, className, popoverClassName }) => {
-    const hasDetail = Boolean(ann.ui?.detail)
-
+}> = ({ annotation, className, popoverClassName }) => {
     const [popoverVisible, setPopoverVisible] = useState(false)
     const showPopover = useCallback((): void => setPopoverVisible(true), [])
     const hidePopover = useCallback((): void => setPopoverVisible(false), [])
@@ -23,14 +21,14 @@ export const Chip: FunctionComponent<{
     return (
         <aside className={classNames(styles.chip, className)} ref={anchorRef}>
             <header onMouseEnter={showPopover} onMouseLeave={hidePopover} onFocus={showPopover} onBlur={hidePopover}>
-                <h4 className={styles.title}>{ann.title}</h4>
-                {ann.url && <a className={styles.stretchedLink} aria-hidden={true} href={ann.url} />}
+                <h4 className={styles.title}>{annotation.title}</h4>
+                {annotation.url && <a className={styles.stretchedLink} aria-hidden={true} href={annotation.url} />}
             </header>
-            {hasDetail && anchorRef.current && (
+            {annotation.ui?.detail && anchorRef.current && (
                 <Popover anchor={anchorRef.current} visible={popoverVisible}>
                     <aside className={classNames(styles.popoverContent, popoverClassName)}>
-                        {/* TODO(sqs): markdown */}
-                        {ann.ui?.detail}
+                        {/* TODO(sqs): support markdown */}
+                        {annotation.ui?.detail}
                     </aside>
                 </Popover>
             )}

lib/ui-standalone/package.json

@@ -24,7 +24,7 @@
     "prebuild": "mkdir -p dist && cp -R src/* dist/ && find dist/ -name '*.ts' -not -name '*.d.ts' -delete",
     "build": "pnpm run --silent prebuild && tsc --build",
     "test": "vitest",
-    "storybook": "storybook dev --no-open --no-version-updates --no-release-notes",
+    "storybook": "storybook dev --no-version-updates",
     "prepublishOnly": "tsc --build --clean && pnpm run build"
   },
   "dependencies": {

lib/ui-standalone/src/itemChip/ItemChip.module.css → lib/ui-standalone/src/chip/Chip.module.css

@@ -1,6 +1,6 @@
 /* TODO(sqs): dedupe with ui-react */
 
-.item {
+.chip {
     display: inline-flex;
     flex-direction: column;
     position: relative;
@@ -9,11 +9,7 @@
     padding: 2px 3px;
 }
 
-.item--has-detail {
-    cursor: pointer;
-}
-
-.item-header {
+.chip-header {
     display: flex;
     justify-content: space-between;
 }

lib/ui-standalone/src/chip/Chip.story.ts

@@ -0,0 +1,46 @@
+import { Annotation } from '@opencodegraph/schema'
+import type { Meta, StoryObj } from '@storybook/html'
+import { createChip } from './Chip'
+
+const meta: Meta = {
+    title: 'Chip',
+    decorators: [
+        story => {
+            const container = document.createElement('div')
+            container.style.maxWidth = '600px'
+            container.style.margin = '2rem auto'
+            container.style.border = 'solid 1px #ccc'
+            container.append(story())
+            return container
+        },
+    ],
+}
+
+export default meta
+
+const FIXTURE_ANN: Annotation = {
+    title: '📘 Docs: CSS in client/web',
+}
+
+export const Text: StoryObj = { render: () => createChip({ annotation: { ...FIXTURE_ANN } satisfies Annotation }) }
+
+export const Link: StoryObj = {
+    render: () => createChip({ annotation: { ...FIXTURE_ANN, url: 'https://example.com' } satisfies Annotation }),
+}
+
+export const Detail: StoryObj = {
+    render: () => createChip({ annotation: { ...FIXTURE_ANN, ui: { detail: 'View doc page' } } satisfies Annotation }),
+}
+
+export const Image: StoryObj = {
+    render: () =>
+        createChip({
+            annotation: {
+                ...FIXTURE_ANN,
+                ui: {
+                    detail: '<img src="https://lh3.googleusercontent.com/d_S5gxu_S1P6NR1gXeMthZeBzkrQMHdI5uvXrpn3nfJuXpCjlqhLQKH_hbOxTHxFhp5WugVOEcl4WDrv9rmKBDOMExhKU5KmmLFQVg" width=512 height=300 />',
+                    format: 'markdown',
+                },
+            } satisfies Annotation,
+        }),
+}

lib/ui-standalone/src/itemChip/ItemChip.ts → lib/ui-standalone/src/chip/Chip.ts

@@ -1,53 +1,51 @@
-import { type Item } from '@opencodegraph/schema'
+import { type Annotation } from '@opencodegraph/schema'
 import clsx from 'clsx'
-import styles from './ItemChip.module.css'
+import styles from './Chip.module.css'
 import { getPopoverDimensions } from './popover'
 
 /**
- * A single OpenCodeGraph item, displayed as a "chip".
+ * A single OpenCodeGraph annotation, displayed as a "chip".
  */
-export function createItemChip({
-    item,
+export function createChip({
+    annotation,
     className,
     popoverClassName,
 }: {
-    item: Item
+    annotation: Annotation
     className?: string
     popoverClassName?: string
 }): HTMLElement {
-    const hasDetail = Boolean(item.detail || item.image)
-
     const el = document.createElement('aside')
-    el.className = clsx(styles.item, hasDetail ? styles.itemHasDetail : null, className)
+    el.className = clsx(styles.item, className)
 
     const headerEl = document.createElement('header')
 
     const titleEl = document.createElement('h4')
     titleEl.className = styles.title
-    titleEl.innerText = item.title
+    titleEl.innerText = annotation.title
     headerEl.append(titleEl)
 
-    if (item.url) {
+    if (annotation.url) {
         const linkEl = document.createElement('a')
         linkEl.className = styles.stretchedLink
         linkEl.ariaHidden = 'true'
-        linkEl.href = item.url
+        linkEl.href = annotation.url
         headerEl.append(linkEl)
     }
 
-    if (item.url || hasDetail) {
+    if (annotation.url || annotation.ui) {
         headerEl.tabIndex = 0
     }
 
     el.append(headerEl)
 
-    if (hasDetail) {
+    if (annotation.ui?.detail) {
         const popoverEl = document.createElement('div')
         popoverEl.popover = 'auto'
         popoverEl.className = styles.popover
         popoverEl.append(
             createPopoverContent({
-                ...item,
+                ui: annotation.ui,
                 className: popoverClassName,
             })
         )
@@ -80,10 +78,10 @@ export function createItemChip({
 }
 
 function createPopoverContent({
-    detail,
-    image,
+    ui: { detail },
     className,
-}: Pick<Item, 'detail' | 'image'> & { className?: string }): HTMLElement {
+}: { ui: NonNullable<Annotation['ui']> } & { className?: string }): HTMLElement {
+    // TODO(sqs): support markdown
     const el = document.createElement('aside')
     el.className = clsx(styles.popoverContent, className)
 
@@ -93,45 +91,28 @@ function createPopoverContent({
         detailEl.innerText = detail
         el.append(detailEl)
     }
-    if (image) {
-        const imageContainerEl = document.createElement('div')
-        imageContainerEl.className = styles.imageContainer
-
-        const imageEl = document.createElement('img')
-        imageEl.className = styles.image
-        imageEl.src = image.url
-        if (image.width) {
-            imageEl.width = image.width
-        }
-        if (image.height) {
-            imageEl.height = image.height
-        }
-
-        imageContainerEl.append(imageEl)
-        el.append(imageContainerEl)
-    }
 
     return el
 }
 
 /**
- * A list of OCG items.
+ * A list of OpenCodeGraph chips.
  */
-export function createItemChipList({
-    items,
+export function createChipList({
+    annotations,
     className,
     chipClassName,
     popoverClassName,
 }: {
-    items: Item[]
+    annotations: Annotation[]
     className?: string
     chipClassName?: string
     popoverClassName?: string
 }): HTMLElement {
     const el = document.createElement('div')
     el.className = clsx(styles.list, className)
-    for (const item of items) {
-        el.append(createItemChip({ item, className: chipClassName, popoverClassName }))
+    for (const annotation of annotations) {
+        el.append(createChip({ annotation, className: chipClassName, popoverClassName }))
     }
     return el
 }

lib/ui-standalone/src/index.ts

@@ -1,3 +1,3 @@
+export { createChip as createItemChip, createChipList as createItemChipList } from './chip/Chip'
+export { getPopoverDimensions } from './chip/popover'
 export { createIndentationWrapper } from './indentationWrapper/IndentationWrapper'
-export { createItemChip, createItemChipList } from './itemChip/ItemChip'
-export { getPopoverDimensions } from './itemChip/popover'

package.json

@@ -50,7 +50,7 @@
     "js-yaml": "^4.1.0",
     "prettier": "3.0.3",
     "semver": "^7.5.4",
-    "storybook": "^7.0.26",
+    "storybook": "^7.6.6",
     "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^34.0.0",