@usequeek/theme-kit 0.1.3 → 0.1.4

package/hooks/use-announcement.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { HeaderProps } from '../types/theme';
+import { splitAnnouncement } from '../utils/announcement';
+
+const ROTATE_EVERY_MS = 6000;
+
+/**
+ * Turns the stored announcement into the rotating one every header receives:
+ * `text` is the message currently showing (so a header that only ever read
+ * `text` rotates with no change), `messages`/`index`/`next`/`prev` let a
+ * header draw its own pager (roast). Auto-advances while there is more than
+ * one message; a manual step restarts the clock so the message just chosen
+ * gets its full turn.
+ */
+export function useRotatingAnnouncement(announcement: HeaderProps['announcement']): HeaderProps['announcement'] {
+  const messages = announcement?.enabled ? splitAnnouncement(announcement.text) : [];
+  const count = messages.length;
+  const [index, setIndex] = useState(0);
+
+  const next = useCallback(() => setIndex((i) => (count > 0 ? (i + 1) % count : 0)), [count]);
+  const prev = useCallback(() => setIndex((i) => (count > 0 ? (i - 1 + count) % count : 0)), [count]);
+
+  useEffect(() => {
+    if (count < 2) return undefined;
+    const timer = window.setInterval(next, ROTATE_EVERY_MS);
+    return () => window.clearInterval(timer);
+  }, [count, index, next]);
+
+  if (!announcement) return announcement;
+
+  const current = count > 0 ? index % count : 0;
+
+  return {
+    ...announcement,
+    text: messages[current] ?? '',
+    messages,
+    index: current,
+    next,
+    prev,
+  };
+}

package/index.ts

@@ -47,6 +47,7 @@ export * from './utils/contact-location';
 export * from './utils/benefit-icon';
 export * from './utils/video-embed';
 export * from './utils/match-variant';
+export * from './utils/announcement';
 
 // Rendering a theme's own demo.json — what makes local preview possible.
 export * from './demo';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usequeek/theme-kit",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "license": "MIT",
   "description": "The framework a Queek storefront theme is built against.",

package/types/theme.ts

@@ -82,10 +82,21 @@ export interface SubscribeFormProps {
 export interface HeaderProps {
   menu: MenuItem[];
   logo?: string | null;
+  /**
+   * `text` is the message currently showing — the shell rotates it through
+   * the `|`/newline-separated list the vendor wrote (see
+   * hooks/use-announcement). A header that wants its own pager reads
+   * `messages`/`index` and calls `next`/`prev`; outside the shell (style
+   * guide, variant previews) only `text` is set.
+   */
   announcement?: {
     enabled: boolean;
     text: string;
     link?: string | null;
+    messages?: string[];
+    index?: number;
+    next?: () => void;
+    prev?: () => void;
   } | null;
   /** Site-wide header icon visibility — all default true (see config.header.show_*). */
   showSearch?: boolean;

package/utils/announcement.ts

@@ -0,0 +1,15 @@
+/**
+ * The announcement bar is ONE text field on the backend
+ * (`header.announcement.text`). A vendor writes several messages into it
+ * separated by `|` or a line break and the bar rotates them; a single
+ * message renders static. Roast's masthead set the convention; the merchant
+ * editor and Qee teach it. Split here, once, so every theme rotates the same
+ * list — a theme-local split meant the other themes showed the literal pipes
+ * after a switch.
+ */
+export function splitAnnouncement(text: string | null | undefined): string[] {
+  return (text ?? '')
+    .split(/\s*(?:\||\n)\s*/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}