chore: storybook (#15285)

Co-authored-by: David Hill <iamdavidhill@gmail.com>
2026-02-26 16:05:04 -06:00
parent 8c484a05b8
commit 05d77b7d47
85 changed files with 5407 additions and 9 deletions
@@ -0,0 +1,115 @@
+// @ts-nocheck
+import { createSignal } from "solid-js"
+import * as mod from "./line-comment"
+
+const docs = `### Overview
+Inline comment anchor and editor for code review or annotation flows.
+
+Pair with \`Diff\` or \`Code\` to align comments to lines.
+
+### API
+- \`LineCommentAnchor\`: position with \`top\`, control \`open\`, render custom children.
+- \`LineComment\`: convenience wrapper for displaying comment + selection label.
+- \`LineCommentEditor\`: controlled textarea with submit/cancel handlers.
+
+### Variants and states
+- Default display and editor display variants.
+
+### Behavior
+- Anchor positions relative to a containing element.
+- Editor submits on Enter (Shift+Enter for newline).
+
+### Accessibility
+- TODO: confirm ARIA labeling for comment button and editor textarea.
+
+### Theming/tokens
+- Uses \`data-component="line-comment"\` and related slots.
+
+`
+
+export default {
+  title: "UI/LineComment",
+  id: "components-line-comment",
+  component: mod.LineComment,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Default = {
+  render: () => (
+    <div
+      style={{
+        position: "relative",
+        height: "160px",
+        padding: "16px 16px 16px 40px",
+        border: "1px solid var(--border-weak)",
+        "border-radius": "8px",
+        "font-family": "var(--font-family-mono)",
+        "font-size": "12px",
+        color: "var(--text-weak)",
+      }}
+    >
+      <div>12 | const total = sum(values)</div>
+      <div>13 | return total / values.length</div>
+      <mod.LineComment open top={18} comment="Consider guarding against empty arrays." selection="L12-L13" />
+    </div>
+  ),
+}
+
+export const Editor = {
+  render: () => {
+    const [value, setValue] = createSignal("Add context for this change.")
+    return (
+      <div
+        style={{
+          position: "relative",
+          height: "220px",
+          padding: "16px 16px 16px 40px",
+          border: "1px solid var(--border-weak)",
+          "border-radius": "8px",
+          "font-family": "var(--font-family-mono)",
+          "font-size": "12px",
+          color: "var(--text-weak)",
+        }}
+      >
+        <div>40 | if (values.length === 0) return 0</div>
+        <mod.LineCommentEditor
+          top={24}
+          value={value()}
+          selection="L40"
+          onInput={setValue}
+          onCancel={() => setValue("")}
+          onSubmit={(next) => setValue(next)}
+        />
+      </div>
+    )
+  },
+}
+
+export const AnchorOnly = {
+  render: () => (
+    <div
+      style={{
+        position: "relative",
+        height: "120px",
+        padding: "16px 16px 16px 40px",
+        border: "1px solid var(--border-weak)",
+        "border-radius": "8px",
+        "font-family": "var(--font-family-mono)",
+        "font-size": "12px",
+        color: "var(--text-weak)",
+      }}
+    >
+      <div>20 | const ready = true</div>
+      <mod.LineCommentAnchor top={18} open={false}>
+        <div data-slot="line-comment-content">Anchor content</div>
+      </mod.LineCommentAnchor>
+    </div>
+  ),
+}