@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/stories/ChatInlineVideoPill.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+
+/**
+ * `ChatInlineVideoPill` is a small bare-inline span defined locally in
+ * `dispatch.tsx` for the `video` doc type. It is the ONLY entity-card that
+ * stays inline alongside surrounding markdown text (no card wrapper, no
+ * Ask/Display affordance) — by design, since the video player itself is
+ * hoisted out of the paragraph by the chat's pre-scan and rendered above.
+ *
+ * Re-implemented here byte-for-byte from `dispatch.tsx:318-326` so the
+ * story can render in isolation without the dispatch pipeline.
+ */
+function ChatInlineVideoPill({ title }: { title: string }) {
+  return (
+    <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs align-middle bg-ods-card border border-ods-border text-ods-text-primary">
+      <span aria-hidden="true" className="text-ods-text-secondary">
+        ▶
+      </span>
+      <span className="truncate max-w-[220px]">{title}</span>
+    </span>
+  )
+}
+
+const meta: Meta<typeof ChatInlineVideoPill> = {
+  title: 'Chat/EntityCards/ChatInlineVideoPill',
+  component: ChatInlineVideoPill,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Bare-inline pill rendered for the `video` doc type. Used as a sentinel inside a paragraph; the actual video player is hoisted out by the chat pre-scan and rendered above the assistant turn.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ChatColumnDecorator>
+        <p className="text-sm text-ods-text-primary leading-relaxed">
+          Here is the demo from last week&apos;s call: <Story /> — watch the part
+          where Jordan walks through the on-call rotation.
+        </p>
+      </ChatColumnDecorator>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'On-call rotation walkthrough',
+  },
+}
+
+export const LongTitleTruncates: Story = {
+  args: {
+    title:
+      'A very long video title that should truncate cleanly inside the pill so adjacent paragraph text stays on the same line',
+  },
+}

package/src/stories/CustomerInterviewCard.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { CustomerInterviewCard } from '../components/chat/entity-cards'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+import { customerInterview } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof CustomerInterviewCard> = {
+  title: 'Chat/EntityCards/CustomerInterviewCard',
+  component: CustomerInterviewCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for the `customer_interview` doc type. The presence of `main_video_url` drives the play-button overlay on the cover. User + MSP badge overlay is shown in both sizes.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ChatInlineSm: Story = {
+  args: {
+    interview: customerInterview,
+    href: '/customer-interviews/' + customerInterview.slug,
+    size: 'sm',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const Default: Story = {
+  args: {
+    interview: customerInterview,
+    href: '/customer-interviews/' + customerInterview.slug,
+    size: 'default',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}

package/src/stories/DataRoomDocCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { DataRoomDocCard } from '../components/chat/entity-cards'
+import {
+  ChatColumnDecorator,
+  makeAnchorProps,
+} from './__fixtures__/chat-card-decorator'
+import {
+  dataRoomDocItem,
+  openframeDocsMarkdownItem,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof DataRoomDocCard> = {
+  title: 'Chat/EntityCards/DataRoomDocCard',
+  component: DataRoomDocCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Inline card rendered in chat for `data_room_doc` and `markdown` doc types. The same component covers both — `sourceRepo` drives the badge label (e.g. "Data room" vs "OpenFrame Docs"). `badgeText` is a REQUIRED prop; the dispatch resolves it via `SOURCE_LABELS_BY_TABLE` before rendering.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DataRoom: Story = {
+  args: {
+    item: dataRoomDocItem,
+    badgeText: 'Data room',
+    anchorProps: makeAnchorProps(dataRoomDocItem.url ?? '#'),
+  },
+}
+
+export const KnowledgeBaseMarkdown: Story = {
+  args: {
+    item: openframeDocsMarkdownItem,
+    badgeText: 'OpenFrame Docs',
+    anchorProps: makeAnchorProps(openframeDocsMarkdownItem.url ?? '#'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Same component, `markdown` doc type — drives the "OpenFrame Docs" badge via `sourceRepo: "openframe-docs"`.',
+      },
+    },
+  },
+}

package/src/stories/GenericEntityCard.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { GenericEntityCard } from '../components/chat/entity-cards'
+import {
+  ChatColumnDecorator,
+  makeAnchorProps,
+} from './__fixtures__/chat-card-decorator'
+import {
+  financialKpiItem,
+  capTableItem,
+  profitLossItem,
+  balanceSheetItem,
+  cashFlowItem,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof GenericEntityCard> = {
+  title: 'Chat/EntityCards/GenericEntityCard',
+  component: GenericEntityCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Fallback card for doc types that don\'t need a bespoke renderer. Covers `financial_kpi`, `cap_table`, `profit_loss`, `balance_sheet`, `cash_flow`. The flexible `facts` array drives the key-value strip at the bottom; `badge` drives the colored chip on the right.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FinancialKpi: Story = {
+  args: {
+    item: financialKpiItem,
+    anchorProps: makeAnchorProps(financialKpiItem.url ?? '#'),
+  },
+}
+
+export const CapTable: Story = {
+  args: {
+    item: capTableItem,
+    anchorProps: makeAnchorProps(capTableItem.url ?? '#'),
+  },
+}
+
+export const ProfitLoss: Story = {
+  args: {
+    item: profitLossItem,
+    anchorProps: makeAnchorProps(profitLossItem.url ?? '#'),
+  },
+}
+
+export const BalanceSheet: Story = {
+  args: {
+    item: balanceSheetItem,
+    anchorProps: makeAnchorProps(balanceSheetItem.url ?? '#'),
+  },
+}
+
+export const CashFlow: Story = {
+  args: {
+    item: cashFlowItem,
+    anchorProps: makeAnchorProps(cashFlowItem.url ?? '#'),
+  },
+}

package/src/stories/GitHubActivityCard.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { GitHubActivityCard } from '../components/chat/entity-cards'
+import {
+  ChatColumnDecorator,
+  makeAnchorProps,
+} from './__fixtures__/chat-card-decorator'
+import {
+  githubCommitItem,
+  githubPullRequestItem,
+  githubPrReviewItem,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof GitHubActivityCard> = {
+  title: 'Chat/EntityCards/GitHubActivityCard',
+  component: GitHubActivityCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Inline card rendered in chat for the `github_commit`, `github_pull_request` and `github_pr_review` doc types (plus their `_public` variants). Pure presentation — caller passes resolved `anchorProps`. The card derives `owner/repo` from the URL when `item.repo` is omitted, shortens long commit SHAs and parses `[review:STATE]` markers from review titles to drive the state badge color.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Commit: Story = {
+  args: {
+    item: githubCommitItem,
+    variant: 'compact',
+    anchorProps: makeAnchorProps(githubCommitItem.url ?? '#'),
+  },
+}
+
+export const PullRequest: Story = {
+  args: {
+    item: githubPullRequestItem,
+    variant: 'compact',
+    anchorProps: makeAnchorProps(githubPullRequestItem.url ?? '#'),
+  },
+}
+
+export const PullRequestReview: Story = {
+  args: {
+    item: githubPrReviewItem,
+    variant: 'compact',
+    anchorProps: makeAnchorProps(githubPrReviewItem.url ?? '#'),
+  },
+}
+
+export const RowVariant: Story = {
+  args: {
+    item: githubPullRequestItem,
+    variant: 'row',
+    anchorProps: makeAnchorProps(githubPullRequestItem.url ?? '#'),
+  },
+}

package/src/stories/HubspotTicketCard.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { HubspotTicketCard } from '../components/chat/entity-cards'
+import {
+  ChatColumnDecorator,
+  makeAnchorProps,
+} from './__fixtures__/chat-card-decorator'
+import { hubspotTicketItem } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof HubspotTicketCard> = {
+  title: 'Chat/EntityCards/HubspotTicketCard',
+  component: HubspotTicketCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Inline card rendered in chat for `hubspot_ticket`, `hubspot_ticket_anon` and `hubspot_ticket_self` doc types. The same component handles all three — the server-side mapper redacts `customerCompany` (anon) and `url` (anon + self) before sending. Status/priority badges drive the visual.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Full: Story = {
+  args: {
+    item: hubspotTicketItem,
+    variant: 'compact',
+    anchorProps: makeAnchorProps(hubspotTicketItem.url ?? '#'),
+  },
+}
+
+export const Anon: Story = {
+  args: {
+    item: {
+      ...hubspotTicketItem,
+      // anon variant: strip customer company + URL
+      customerCompany: null,
+      url: null,
+    },
+    variant: 'compact',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Anon variant — `customerCompany` and `url` are nulled server-side; the card falls back to a non-clickable shell.',
+      },
+    },
+  },
+}
+
+export const SelfTicket: Story = {
+  args: {
+    item: {
+      ...hubspotTicketItem,
+      // self variant: ticket owned by the chatting user; admin URL stripped
+      title: 'Your ticket: cannot configure NinjaOne RMM connector',
+      customerCompany: null,
+      url: null,
+      status: 'NEW',
+      statusLabel: 'Awaiting agent',
+      priority: 'MEDIUM',
+    },
+    variant: 'compact',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Self-ticket variant — shown to a chat user looking at their own ticket; admin URL is stripped.',
+      },
+    },
+  },
+}
+
+export const ClosedTicket: Story = {
+  args: {
+    item: {
+      ...hubspotTicketItem,
+      status: 'CLOSED',
+      statusLabel: 'Closed',
+      priority: 'LOW',
+    },
+    variant: 'compact',
+    anchorProps: makeAnchorProps(hubspotTicketItem.url ?? '#'),
+  },
+}
+
+export const RowVariant: Story = {
+  args: {
+    item: hubspotTicketItem,
+    variant: 'row',
+    anchorProps: makeAnchorProps(hubspotTicketItem.url ?? '#'),
+  },
+}

package/src/stories/InvestorUpdateCard.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { InvestorUpdateCard } from '../components/chat/entity-cards'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+import { investorUpdate } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof InvestorUpdateCard> = {
+  title: 'Chat/EntityCards/InvestorUpdateCard',
+  component: InvestorUpdateCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for the `investor_update` doc type. Period badge ("Mar 2025 - May 2025") is composed via `formatInvestorUpdatePeriod`. `sm` size is the compact chat-inline card.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ChatInlineSm: Story = {
+  args: {
+    update: investorUpdate,
+    href: '/investor-updates/' + investorUpdate.slug,
+    size: 'sm',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const Default: Story = {
+  args: {
+    update: investorUpdate,
+    href: '/investor-updates/' + investorUpdate.slug,
+    size: 'default',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}

package/src/stories/OnboardingGuideCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { OnboardingGuideCard } from '../components/chat/entity-cards'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+import { onboardingGuide } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof OnboardingGuideCard> = {
+  title: 'Chat/EntityCards/OnboardingGuideCard',
+  component: OnboardingGuideCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for the `onboarding_guide` doc type. Three densities — `catalog` (hero + author grid), `default` (horizontal step-card) and `sm` (chat-inline compact). The chat dispatch always passes `size="sm"` plus `displayAction: true` so the Ask/Display affordance shows below.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ChatInlineSm: Story = {
+  args: {
+    guide: onboardingGuide,
+    href: '/guides/' + onboardingGuide.slug,
+    size: 'sm',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const Default: Story = {
+  args: {
+    guide: onboardingGuide,
+    href: '/guides/' + onboardingGuide.slug,
+    size: 'default',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const Catalog: Story = {
+  args: {
+    guide: onboardingGuide,
+    href: '/guides/' + onboardingGuide.slug,
+    size: 'catalog',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}

package/src/stories/ProductReleaseCard.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ProductReleaseCard } from '../components/chat/entity-cards'
+import {
+  ChatColumnDecorator,
+  makeAnchorProps,
+} from './__fixtures__/chat-card-decorator'
+import {
+  productReleaseSmProps,
+  productReleaseLgProps,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof ProductReleaseCard> = {
+  title: 'Chat/EntityCards/ProductReleaseCard',
+  component: ProductReleaseCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for the `product_release` doc type. Two densities — `sm` is the chat-inline compact form, `lg` is the rich catalog row used on `/releases`, the DevCenter tab and the investor-update related-content section. Both share the same flat prop signature (no `item` wrapper).',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ChatInlineSm: Story = {
+  args: {
+    ...productReleaseSmProps,
+    size: 'sm',
+    anchorProps: makeAnchorProps('/releases/2-5-0'),
+  },
+}
+
+export const ChatInlineSmWithVideoCover: Story = {
+  args: {
+    ...productReleaseSmProps,
+    hasVideoCover: true,
+    size: 'sm',
+    anchorProps: makeAnchorProps('/releases/2-5-0'),
+  },
+}
+
+export const Large: Story = {
+  args: {
+    ...productReleaseLgProps,
+    size: 'lg',
+    anchorProps: makeAnchorProps('/releases/2-5-0'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Rich large card used everywhere a product release is the focal item. Includes hero cover, version pill, changelog stats strip and a 4-cell metadata grid footer (Type / Status / Released / Author).',
+      },
+    },
+  },
+}

package/src/stories/ProgramCard.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ProgramCard } from '../components/chat/entity-cards'
+import { DEFAULT_PROGRAM_CONFIGS } from '../components/chat/entity-cards/program-card-defaults'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+import {
+  podcastItem,
+  webinarItem,
+  eventItem,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof ProgramCard> = {
+  title: 'Chat/EntityCards/ProgramCard',
+  component: ProgramCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Generic card for the `podcast`, `webinar` and `event` doc types. Behavior is driven by the `config` prop (`DEFAULT_PROGRAM_CONFIGS[type]` ships safe minimum config for compact chat rendering; embedders can override per type with full catalog config). `sm` size is what the chat dispatch uses.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PodcastSm: Story = {
+  args: {
+    config: DEFAULT_PROGRAM_CONFIGS.podcast,
+    item: podcastItem,
+    size: 'sm',
+    href: '/podcasts/' + podcastItem.id,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const WebinarSm: Story = {
+  args: {
+    config: DEFAULT_PROGRAM_CONFIGS.webinar,
+    item: webinarItem,
+    size: 'sm',
+    href: '/webinars/' + webinarItem.id,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const EventSm: Story = {
+  args: {
+    config: DEFAULT_PROGRAM_CONFIGS.event,
+    item: eventItem,
+    size: 'sm',
+    href: '/events/' + eventItem.id,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const PodcastDefault: Story = {
+  args: {
+    config: DEFAULT_PROGRAM_CONFIGS.podcast,
+    item: podcastItem,
+    size: 'default',
+    href: '/podcasts/' + podcastItem.id,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Full default density. Not used inline in chat but rendered on the podcast catalog page.',
+      },
+    },
+  },
+}

package/src/stories/RoadmapCard.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { RoadmapCard } from '../components/chat/entity-cards'
+import { ChatColumnDecorator } from './__fixtures__/chat-card-decorator'
+import {
+  roadmapFeatureItem,
+  roadmapDeliveryItem,
+  roadmapInternalTaskItem,
+} from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof RoadmapCard> = {
+  title: 'Chat/EntityCards/RoadmapCard',
+  component: RoadmapCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for the `roadmap_item`, `delivery_item` and `internal_task` doc types. The `cardType` prop drives the icon (Feature / Delivery / Bug-shaped task) in the `sm` chat-inline variant. `default` size renders the full rich card with vote buttons + screenshot gallery; in chat the vote handlers are stubbed.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const RoadmapItemSm: Story = {
+  args: {
+    item: roadmapFeatureItem,
+    href: '/roadmap/' + roadmapFeatureItem.id,
+    size: 'sm',
+    cardType: 'roadmap_item',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const DeliveryItemSm: Story = {
+  args: {
+    item: roadmapDeliveryItem,
+    href: '/delivery/' + roadmapDeliveryItem.id,
+    size: 'sm',
+    cardType: 'delivery_item',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const InternalTaskSm: Story = {
+  args: {
+    item: roadmapInternalTaskItem,
+    href: '/internal-tasks/' + roadmapInternalTaskItem.id,
+    size: 'sm',
+    cardType: 'internal_task',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+}
+
+export const RoadmapItemDefault: Story = {
+  args: {
+    item: roadmapFeatureItem,
+    size: 'default',
+    cardType: 'roadmap_item',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Full rich roadmap card — vote buttons, screenshot gallery, status pill and target version. Used on the public roadmap page.',
+      },
+    },
+  },
+}