@flamingo-stack/openframe-frontend-core 0.0.550-1809.4788.1 → 0.0.550-1809.4789.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.550-1809.4788.1",
+  "version": "0.0.550-1809.4789.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/stories/EmployeeEntryCard.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { EmployeeEntryCard, EmployeeEntryBadge } from '../components/chat/entity-cards/employee-entry-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { howIWorkEntry, whatIShippedEntry } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof EmployeeEntryCard> = {
+  title: 'Chat/EntityCards/EmployeeEntryCard',
+  component: EmployeeEntryCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'THE people-hub employee-entry engine. `WhatIShippedCard` and `HowIWorkCard` are thin bindings over it — they differ only in which date column they format and which extra badges they add — so the states exercised here are the states of every employee-entry card. Cover falls back featured_image → main_video_thumbnail → placeholderUrl.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Published: Story = {
+  args: {
+    entry: whatIShippedEntry,
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const Draft: Story = {
+  args: {
+    entry: { ...whatIShippedEntry, status: 'draft' },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const Archived: Story = {
+  args: {
+    entry: { ...whatIShippedEntry, status: 'archived' },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const WithExtraBadges: Story = {
+  args: {
+    entry: howIWorkEntry,
+    dateLabel: 'Aug 16, 2026',
+    extraBadges: (
+      <>
+        <EmployeeEntryBadge>Marketing</EmployeeEntryBadge>
+        <EmployeeEntryBadge>Intermediate</EmployeeEntryBadge>
+      </>
+    ),
+  },
+}
+
+/** Cover falls back to the video frame when there is no featured image. */
+export const VideoThumbnailFallback: Story = {
+  args: {
+    entry: {
+      ...whatIShippedEntry,
+      featured_image: null,
+      main_video_thumbnail:
+        'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=675&fit=crop',
+    },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+/** The auto-created-draft state: no title yet, no summary, no cover — the card
+ *  must still read as a specific entity, not an error. */
+export const EmptyDraft: Story = {
+  args: {
+    entry: {
+      title: null,
+      summary: null,
+      status: 'draft',
+      featured_image: null,
+      main_video_thumbnail: null,
+      author: whatIShippedEntry.author,
+    },
+    dateLabel: null,
+    untitledLabel: 'Untitled session',
+  },
+}
+
+/** Related-rail mode: the whole card is a link (never combined with actions). */
+export const AsAnchor: Story = {
+  args: {
+    entry: whatIShippedEntry,
+    dateLabel: 'Jul 2026',
+    anchorProps: makeAnchorProps('/what-i-shipped/billing-flow'),
+  },
+}

package/src/stories/HowIWorkCard.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { HowIWorkCard, HowIWorkCardSkeleton } from '../components/chat/entity-cards/how-i-work-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { howIWorkEntry } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof HowIWorkCard> = {
+  title: 'Chat/EntityCards/HowIWorkCard',
+  component: HowIWorkCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for a `how_i_work` session — a thin binding over `EmployeeEntryCard` that maps `session_date` to the meta date and adds the discipline badge. Engine states (statuses, cover fallbacks, empty draft) are covered by the EmployeeEntryCard stories.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    entry: howIWorkEntry,
+  },
+}
+
+/** Related-rail click-through — the whole card is one anchor. */
+export const AsAnchor: Story = {
+  args: {
+    entry: howIWorkEntry,
+    anchorProps: makeAnchorProps('/how-i-work/' + 'competitive-research-claude'),
+  },
+}
+
+/** No discipline picked yet (fresh draft) — badge row shows status only. */
+export const NoDiscipline: Story = {
+  args: {
+    entry: { ...howIWorkEntry, discipline: null, status: 'draft' },
+  },
+}
+
+export const Skeleton: StoryObj = {
+  render: () => <HowIWorkCardSkeleton />,
+}

package/src/stories/StatusFilterComponent.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { StatusFilterComponent } from '../components/features/status-filter-component'
+
+const meta: Meta<typeof StatusFilterComponent> = {
+  title: 'Features/StatusFilterComponent',
+  component: StatusFilterComponent,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'THE single-select facet filter row. Renders its own "All" button and drops any option valued `all`, so callers pass real options only. The `label` prop lets one component serve every facet axis (Status, Discipline, Level) — hand-rolling a look-alike row produces markup identical to this one, and React then pairs the copy against this component during hydration and reports a text mismatch (the bug that motivated the prop).',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Default label. Interactive — pills toggle the selection. */
+export const Status: Story = {
+  render: function StatusStory() {
+    const [status, setStatus] = useState('all')
+    return (
+      <StatusFilterComponent
+        selectedStatus={status}
+        onStatusChange={setStatus}
+        statusOptions={[
+          { value: 'draft', label: 'Draft (1)' },
+          { value: 'published', label: 'Published (3)' },
+          { value: 'archived', label: 'Archived (1)' },
+        ]}
+      />
+    )
+  },
+}
+
+/** Relabeled: the same row serving a data-derived Discipline facet, counts in
+ *  the labels — how the people-hub How I Work dashboard uses it. */
+export const RelabeledFacet: Story = {
+  render: function DisciplineStory() {
+    const [discipline, setDiscipline] = useState('all')
+    return (
+      <StatusFilterComponent
+        label="Discipline"
+        selectedStatus={discipline}
+        onStatusChange={setDiscipline}
+        statusOptions={[
+          { value: 'engineering', label: 'Engineering (4)' },
+          { value: 'marketing', label: 'Marketing (2)' },
+          { value: 'sales', label: 'Sales (0)' },
+        ]}
+      />
+    )
+  },
+}
+
+/** Viewer may see every option but select only one (people-hub "Everyone" view
+ *  for non-management: pinned to Published, the rest visible but disabled). */
+export const DisabledValues: Story = {
+  args: {
+    label: 'Status',
+    selectedStatus: 'published',
+    onStatusChange: () => {},
+    statusOptions: [
+      { value: 'draft', label: 'Draft' },
+      { value: 'published', label: 'Published' },
+      { value: 'archived', label: 'Archived' },
+    ],
+    disabledValues: ['all', 'draft', 'archived'],
+  },
+}

package/src/stories/WhatIShippedCard.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { WhatIShippedCard, WhatIShippedCardSkeleton } from '../components/chat/entity-cards/what-i-shipped-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { whatIShippedEntry } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof WhatIShippedCard> = {
+  title: 'Chat/EntityCards/WhatIShippedCard',
+  component: WhatIShippedCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for a monthly `what_i_shipped` entry — a thin binding over `EmployeeEntryCard` that maps `entry_month` to the meta date. Engine states (statuses, cover fallbacks, empty draft) are covered by the EmployeeEntryCard stories.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    entry: whatIShippedEntry,
+  },
+}
+
+/** Related-rail click-through — the whole card is one anchor. */
+export const AsAnchor: Story = {
+  args: {
+    entry: whatIShippedEntry,
+    anchorProps: makeAnchorProps('/what-i-shipped/billing-flow'),
+  },
+}
+
+export const Skeleton: StoryObj = {
+  render: () => <WhatIShippedCardSkeleton />,
+}

package/src/stories/__fixtures__/chat-cards.ts

@@ -30,6 +30,8 @@ import type {
   CampaignCardItem,
   GenericEntityCardItem,
 } from '../../components/chat/entity-cards'
+import type { WhatIShippedCardData } from '../../components/chat/entity-cards/what-i-shipped-card'
+import type { HowIWorkCardData } from '../../components/chat/entity-cards/how-i-work-card'
 
 // =============================================================================
 // Common
@@ -599,3 +601,41 @@ export const campaignItem: CampaignCardItem = {
     { id: 'g2', label: '12 podcast plays' },
   ],
 }
+
+// =============================================================================
+// Employee entries (people-hub) — What I Shipped / How I Work
+// =============================================================================
+
+
+export const whatIShippedEntry: WhatIShippedCardData = {
+  title: 'Shipped the new billing flow + cut sync latency 40%',
+  summary:
+    'Rebuilt the checkout path around the unified billing service, moved webhook fan-out to the outbox drainer, and deleted the legacy cron.',
+  status: 'published',
+  entry_month: '2026-07-01',
+  featured_image:
+    'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=675&fit=crop',
+  main_video_thumbnail: null,
+  author: {
+    full_name: 'Yevhenii Petrenko',
+    avatar_url:
+      'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&h=120&fit=crop',
+  },
+}
+
+export const howIWorkEntry: HowIWorkCardData = {
+  title: 'Competitive research in 40 minutes with a standing Claude prompt',
+  summary:
+    'Three separate single-purpose conversations (pricing, docs gaps, changelog velocity), exported as JSON into Notion through a Zapier automation.',
+  status: 'published',
+  session_date: '2026-08-16',
+  discipline: 'marketing',
+  featured_image:
+    'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=675&fit=crop',
+  main_video_thumbnail: null,
+  author: {
+    full_name: 'Semen Kovalenko',
+    avatar_url:
+      'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&h=120&fit=crop',
+  },
+}