@flamingo-stack/openframe-frontend-core 0.0.361 → 0.0.362

package/src/stories/QuickActionChip.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import {
+  QuickActionChipButton,
+  type QuickActionIconSpec,
+} from '../components/chat/quick-action-chip'
+
+const meta: Meta<typeof QuickActionChipButton> = {
+  title: 'Chat/QuickActionChip',
+  component: QuickActionChipButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The unified quick-action chip (`QuickActionChipButton`) used by every chat empty state (guide / mingo / ai-agent), the marketing marquee strips, and the ROI table task cells. Icon resolution is owned entirely by `<EntityIcon>` in two `QuickActionIconSpec` formats: the **agent format** (`{ name: \'fae\' | \'mingo\' }`) renders the packaged agent mark, and the **config format** (`{ name, url, props, accent }`) renders an admin-configured glyph tinted via `accent` (`pink` → flamingo-pink, `cyan` → flamingo-cyan, or any CSS color). An explicit `props.color` wins over `accent`.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: { control: 'inline-radio', options: ['outline', 'primary'] },
+    interactive: { control: 'boolean' },
+    icon: { control: false },
+    onSelect: { control: false },
+    onHoverStart: { control: false },
+    onHoverEnd: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center bg-ods-bg p-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QuickActionChipButton>
+
+// Config-format icon specs — resolved by <EntityIcon> against the icons-v2
+// library, tinted by `accent`.
+const SEARCH_ICON: QuickActionIconSpec = { name: 'search', accent: 'pink' }
+const BUG_ICON: QuickActionIconSpec = { name: 'bug', accent: 'cyan' }
+
+/** Default bordered (`outline`) chip with a config glyph tinted flamingo-pink. */
+export const Default: Story = {
+  args: {
+    label: 'How to start',
+    icon: SEARCH_ICON,
+    variant: 'outline',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/** Accent (`primary`, yellow) chip variant. */
+export const Primary: Story = {
+  args: {
+    label: 'Run scripts',
+    icon: { name: 'rocket' },
+    variant: 'primary',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/** Config glyphs tinted via `accent` — `pink` and `cyan` brand tokens. */
+export const AccentTints: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <QuickActionChipButton label="Search docs" icon={SEARCH_ICON} onSelect={() => {}} />
+      <QuickActionChipButton label="Report a bug" icon={BUG_ICON} onSelect={() => {}} />
+      <QuickActionChipButton
+        label="Custom color"
+        icon={{ name: 'compass', accent: '#8b5cf6' }}
+        onSelect={() => {}}
+      />
+    </div>
+  ),
+}
+
+/**
+ * Agent-format icons — `{ name: 'fae' }` / `{ name: 'mingo' }` render the
+ * packaged agent marks (they carry their own colors; `accent` is ignored).
+ */
+export const AgentMarks: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <QuickActionChipButton label="Ask fae" icon={{ name: 'fae' }} onSelect={() => {}} />
+      <QuickActionChipButton label="Ask mingo" icon={{ name: 'mingo' }} onSelect={() => {}} />
+    </div>
+  ),
+}
+
+/** No icon — label only. */
+export const NoIcon: Story = {
+  args: {
+    label: 'Find device',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/**
+ * `interactive={false}` renders a plain, non-focusable `<Tag>` (decorative use:
+ * marquee strips, ROI table cells) — no button, no hover callbacks.
+ */
+export const NonInteractive: Story = {
+  args: {
+    label: 'Decorative',
+    icon: SEARCH_ICON,
+    interactive: false,
+  },
+}
+
+/**
+ * `onHoverStart` / `onHoverEnd` fire on pointer AND keyboard focus — used to
+ * preview the full prompt in the composer, then restore it. Hover or tab the
+ * chip and watch the Actions/console panel.
+ */
+export const HoverCallbacks: Story = {
+  args: {
+    label: 'Preview prompt',
+    icon: { name: 'fae' },
+    onSelect: () => console.log('select'),
+    onHoverStart: () => console.log('hover start → preview prompt'),
+    onHoverEnd: () => console.log('hover end → restore composer'),
+  },
+}
+
+/** All variants side by side. */
+export const Gallery: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <QuickActionChipButton label="Outline" icon={SEARCH_ICON} onSelect={() => {}} />
+        <QuickActionChipButton
+          label="Primary"
+          icon={{ name: 'rocket' }}
+          variant="primary"
+          onSelect={() => {}}
+        />
+        <QuickActionChipButton label="No icon" onSelect={() => {}} />
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <QuickActionChipButton label="fae" icon={{ name: 'fae' }} onSelect={() => {}} />
+        <QuickActionChipButton label="mingo" icon={{ name: 'mingo' }} onSelect={() => {}} />
+        <QuickActionChipButton label="Decorative" icon={BUG_ICON} interactive={false} />
+      </div>
+    </div>
+  ),
+}

package/src/stories/QuickActionMarquee.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import {
+  QuickActionMarquee,
+  type QuickActionMarqueeItem,
+} from '../components/chat/quick-action-marquee'
+
+// fae-row items (config glyphs tinted pink) and mingo-row items (tinted cyan) —
+// mirrors the Figma fae/mingo marquee rows.
+const FAE_ITEMS: ReadonlyArray<QuickActionMarqueeItem> = [
+  { id: 'how-to-start', label: 'How to start', icon: { name: 'fae' } },
+  { id: 'connect-device', label: 'Connect device', icon: { name: 'search', accent: 'pink' } },
+  { id: 'find-device', label: 'Find device', icon: { name: 'compass', accent: 'pink' } },
+  { id: 'remote-connection', label: 'Remote connection', icon: { name: 'rocket', accent: 'pink' } },
+  { id: 'run-scripts', label: 'Run scripts', icon: { name: 'bracket-curly', accent: 'pink' } },
+  { id: 'device-software', label: 'Device software', icon: { name: 'package', accent: 'pink' } },
+]
+
+const MINGO_ITEMS: ReadonlyArray<QuickActionMarqueeItem> = [
+  { id: 'roi', label: 'Calculate ROI', icon: { name: 'mingo' } },
+  { id: 'ticket', label: 'Open ticket', icon: { name: 'ticket', accent: 'cyan' } },
+  { id: 'report-bug', label: 'Report a bug', icon: { name: 'bug', accent: 'cyan' } },
+  { id: 'docs', label: 'Read docs', icon: { name: 'book', accent: 'cyan' } },
+  { id: 'chat', label: 'Start a chat', icon: { name: 'chats', accent: 'cyan' } },
+  { id: 'news', label: "What's new", icon: { name: 'newspaper', accent: 'cyan' } },
+]
+
+const meta: Meta<typeof QuickActionMarquee> = {
+  title: 'Chat/QuickActionMarquee',
+  component: QuickActionMarquee,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo marquee rows). The item list is padded to ≥6 chips and rendered twice so the `qa-marquee` keyframe’s `translateX(-50%)` loops seamlessly; the duplicate half is `aria-hidden` and never focusable. Pauses on hover (`pauseOnHover`, default on) and always under `prefers-reduced-motion`. Pass `onSelect` to make chips interactive buttons; omit it for a purely decorative strip.',
+      },
+    },
+  },
+  argTypes: {
+    items: { control: false },
+    direction: { control: 'inline-radio', options: ['left', 'right'] },
+    duration: { control: { type: 'number', min: 5, max: 120, step: 5 } },
+    pauseOnHover: { control: 'boolean' },
+    onSelect: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-ods-bg py-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QuickActionMarquee>
+
+/** Single fae row scrolling left, interactive chips. */
+export const Default: Story = {
+  args: {
+    items: FAE_ITEMS,
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/** The two Figma rows: fae (left) over mingo (right, reversed). */
+export const TwoRows: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <QuickActionMarquee items={FAE_ITEMS} direction="left" onSelect={(i) => console.log(i.id)} />
+      <QuickActionMarquee items={MINGO_ITEMS} direction="right" onSelect={(i) => console.log(i.id)} />
+    </div>
+  ),
+}
+
+/** Reversed scroll direction. */
+export const ScrollRight: Story = {
+  args: {
+    items: MINGO_ITEMS,
+    direction: 'right',
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/**
+ * No `onSelect` → chips render as plain, non-focusable tags (decorative
+ * marketing strip). Nothing is clickable or tabbable.
+ */
+export const Decorative: Story = {
+  args: {
+    items: FAE_ITEMS,
+  },
+}
+
+/**
+ * Fewer than 6 items — the track is auto-repeated up to the `MIN_TRACK_ITEMS`
+ * heuristic so the halved loop still fills the viewport with no visible gap.
+ */
+export const FewItems: Story = {
+  args: {
+    items: FAE_ITEMS.slice(0, 2),
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/** Faster loop (`duration={15}`) and hover-pause disabled. */
+export const FastNoPause: Story = {
+  args: {
+    items: FAE_ITEMS,
+    duration: 15,
+    pauseOnHover: false,
+    onSelect: (item) => console.log('select', item.id),
+  },
+}