@flamingo-stack/openframe-frontend-core 0.0.207 → 0.0.208

package/src/components/shared/delivery/delivery-table.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { StatusBadge } from '../../ui';
+import { getStatusColorScheme } from '../../../utils';
+import {
+  type DeliveryItem,
+  TASK_TYPE_LABELS,
+  TASK_TYPE_TEXT_COLORS,
+} from '../../../types/delivery';
+
+interface DeliveryTableProps {
+  items: DeliveryItem[];
+  isLoading?: boolean;
+}
+
+/**
+ * Format relative time for display
+ */
+function getRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+
+  if (months > 0) {
+    return months === 1 ? 'last month' : `${months} months ago`;
+  }
+  if (weeks > 0) {
+    return weeks === 1 ? 'last week' : `${weeks} weeks ago`;
+  }
+  if (days > 0) {
+    return days === 1 ? 'yesterday' : `${days} days ago`;
+  }
+  return 'today';
+}
+
+/**
+ * Skeleton loader for rows - matching responsive structure
+ */
+function SkeletonRow() {
+  return (
+    <div className="border-b border-ods-border last:border-b-0 p-[12px] md:p-[16px]">
+      <div className="flex flex-col md:flex-row items-start justify-between gap-[12px] md:gap-[16px] w-full">
+        {/* Left: Title, subtitle, and description skeleton */}
+        <div className="flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]">
+          {/* Title skeleton - responsive */}
+          <div className="min-h-[24px] flex items-center">
+            <div className="h-[20px] bg-ods-border rounded animate-pulse w-full"></div>
+          </div>
+          {/* Subtitle skeleton - 1 line */}
+          <div className="min-h-[20px] flex items-center">
+            <div className="h-[20px] bg-ods-border rounded animate-pulse w-1/2"></div>
+          </div>
+          {/* Description skeleton - 3 lines */}
+          <div className="min-h-[72px] flex items-center">
+            <div className="flex-1 space-y-1">
+              <div className="h-[20px] bg-ods-border rounded animate-pulse w-full"></div>
+              <div className="h-[20px] bg-ods-border rounded animate-pulse w-full"></div>
+              <div className="h-[20px] bg-ods-border rounded animate-pulse w-2/3"></div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Badge skeleton - two stacked badges */}
+        <div className="flex-shrink-0 self-start flex flex-col gap-2">
+          <div className="h-[32px] w-[100px] bg-ods-border rounded animate-pulse"></div>
+          <div className="h-[32px] w-[120px] bg-ods-border rounded animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * DeliveryTable Component
+ * Displays bug fixes and enhancements with fixed-height rows
+ */
+export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps) {
+  // Show skeletons while loading
+  if (isLoading) {
+    return (
+      <div className="bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full">
+        <div className="w-full">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <SkeletonRow key={i} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (items.length === 0) {
+    return (
+      <div className="bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full">
+        <p className="text-ods-text-secondary text-[14px] font-['DM_Sans'] font-medium">
+          No tasks available
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full">
+      <div className="w-full">
+        {items.map((item, index) => {
+          // Get task type badge label and text color
+          const taskType = item.taskType as keyof typeof TASK_TYPE_LABELS;
+          const typeBadgeLabel = TASK_TYPE_LABELS[taskType] || 'TASK';
+          const typeBadgeTextColor = TASK_TYPE_TEXT_COLORS[taskType] || '';
+
+          // Get status badge color scheme using centralized utility
+          const statusBadgeScheme = getStatusColorScheme(item.status);
+
+          // Calculate relative time from last activity (dateUpdated)
+          const relativeTime = getRelativeTime(item.dateUpdated);
+
+          return (
+            <div
+              key={item.id}
+              className={`border-b border-ods-border last:border-b-0 p-[12px] md:p-[16px] ${index === 0 ? '' : ''}`}
+            >
+              <div className="flex flex-col md:flex-row items-start justify-between gap-[12px] md:gap-[16px] w-full">
+                {/* Left: Title, subtitle, and description - matching roadmap-card.tsx structure */}
+                <div className="flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]">
+                  {/* Title: 2 lines on mobile, 1 line on desktop */}
+                  <div className="min-h-[24px] md:min-h-[24px] flex items-center">
+                    <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] flex-1 line-clamp-2 md:truncate break-words">
+                      {item.title}
+                    </h3>
+                  </div>
+
+                  {/* Subtitle: 1 line with last activity date, list name(s), task ID - Azeret Mono.
+                      A task can live in multiple ClickUp lists ("Tasks in Multiple Lists" feature) —
+                      we render every list joined by ", ". */}
+                  <div className="min-h-[20px] flex items-center">
+                    <p className="text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate">
+                      ACTIVE {relativeTime}{item.listNames.length > 0 ? `, ${item.listNames.join(', ')}` : ''}, {item.id}
+                    </p>
+                  </div>
+
+                  {/* Description: 3 lines max, 72px height with vertical centering - matching roadmap */}
+                  <div className="min-h-[72px] flex items-center">
+                    <p className="text-h4 text-ods-text-secondary line-clamp-3 break-words">
+                      {item.description || 'No description provided'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Right: Status and Type badges stacked vertically */}
+                <div className="flex-shrink-0 self-start flex flex-col gap-2">
+                  {/* Status Badge - matching roadmap cards */}
+                  <StatusBadge
+                    text={item.status.toUpperCase()}
+                    colorScheme={statusBadgeScheme}
+                    variant="card"
+                    className="border border-ods-border"
+                  />
+                  {/* Task Type Badge - same style as Version badge in roadmap */}
+                  <StatusBadge
+                    text={typeBadgeLabel}
+                    variant="card"
+                    className={`border border-ods-border ${typeBadgeTextColor}`}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/shared/delivery/index.ts

@@ -0,0 +1,9 @@
+// NOTE: `DeliverySection` (standalone unfiltered fetch) was deleted —
+// it had zero consumers (hub's release-detail wraps `<DeliveryTable>`
+// directly, the public bug-fixes-and-enhancements page uses
+// `<DeliveryLists>` with URL-driven filters) and duplicated the
+// fetch/loading state machine. If an embedder ever needs a no-filter
+// variant, build it as `<DeliveryLists ignoreUrlFilters />` rather
+// than reviving a separate component.
+export { DeliveryLists, type DeliveryListsProps } from './delivery-lists';
+export { DeliveryTable } from './delivery-table';

package/src/components/shared/dev-section/dev-section-page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+/**
+ * DevSectionPage — full-page wrapper for a dev-center section
+ * (`/roadmap`, `/bug-fixes-and-enhancements`, `/releases`).
+ *
+ * Mounts the lib's canonical `PageLayout` directly (no in-app wrapper)
+ * so the back-button affordance stays in lockstep with whatever the
+ * design system ships — any future lib change to BackButton / TitleBlock
+ * propagates automatically.
+ *
+ * Composition: `PageShell` → `PageLayout` (back-to-home wired) →
+ * `DevSectionView` (icon hero + search + filter pills) → list body.
+ *
+ * Adding a new section is one entry in `OPENFRAME_DEV_SECTIONS` plus a
+ * single-line page file mounting this factory with the new key.
+ */
+
+import type { ReactNode } from 'react';
+import { useRouter } from '../../../embed-shims/next-navigation';
+import { PageShell, PageLayout } from '../../ui';
+import { DevSectionView } from './dev-section-view';
+import {
+  OPENFRAME_DEV_SECTIONS,
+  type OpenframeDevSectionKey,
+} from '../../../utils/dev-sections/openframe-dev-sections';
+
+const SECTION_HERO_ICON_CLASS = 'h-10 w-10 text-ods-accent';
+
+export interface DevSectionPageProps {
+  sectionKey: OpenframeDevSectionKey;
+  /** The page-specific list body (e.g. `<RoadmapList />`). */
+  children: ReactNode;
+  /** Back-button config — same shape as `LegalDocumentPage` /
+   *  `ReleaseDetailPage`. Pass `false` to hide. Default
+   *  `{ label: 'Back to home', href: '/' }`. */
+  backButton?: { label?: string; href?: string } | false;
+}
+
+export function DevSectionPage({ sectionKey, children, backButton }: DevSectionPageProps) {
+  const router = useRouter();
+  const section = OPENFRAME_DEV_SECTIONS[sectionKey];
+  const Icon = section.icon;
+
+  // Back-button config — mirrors LegalDocumentPage / ReleaseDetailPage.
+  // Default: { label: 'Back to home', href: '/' }. Pass `false` to hide.
+  // After `backButton &&` narrowing, inner type is `{ label?, href? } |
+  // undefined`; don't re-compare to `false` (TS2367).
+  const backCfg =
+    backButton === false
+      ? undefined
+      : {
+          label: (backButton ? backButton.label : undefined) ?? 'Back to home',
+          onClick: () => router.push((backButton ? backButton.href : undefined) ?? '/'),
+        };
+
+  return (
+    <PageShell>
+      <PageLayout backButton={backCfg}>
+        <DevSectionView
+          sectionKey={sectionKey}
+          hero={{
+            icon: <Icon className={SECTION_HERO_ICON_CLASS} />,
+            description: section.hero.description,
+          }}
+        >
+          {children}
+        </DevSectionView>
+      </PageLayout>
+    </PageShell>
+  );
+}

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * DevSectionView — the canonical chrome for ANY dev-center section
+ * (Roadmap / Delivery / Releases). One component, used in BOTH:
+ *
+ *   - tabbed `/roadmap-and-releases` (compact title mode, no `hero`)
+ *   - full-page `/roadmap`, `/bug-fixes-and-enhancements`, `/releases`
+ *     (hero mode with icon + description + back link)
+ *
+ * Owns: title rendering, the inline search input, the filter pill row,
+ * and the URL-param wiring that connects both. The list `children`
+ * receive a clean URL contract — they read `?<paramKey>=...` via
+ * `useSearchParams()` and refetch on change. No duplicated controls.
+ */
+
+import type { ReactNode } from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams, usePathname } from '../../../embed-shims';
+import { SearchInput } from '../../ui';
+import { StatusFilterComponent } from '../../features';
+import {
+  OPENFRAME_DEV_SECTIONS,
+  type OpenframeDevSectionKey,
+} from '../../../utils/dev-sections/openframe-dev-sections';
+
+export interface DevSectionViewProps {
+  /** Which section to render — drives title, search, and filter
+   *  config via the `OPENFRAME_DEV_SECTIONS` registry. */
+  sectionKey: OpenframeDevSectionKey;
+  /** When set, renders the rich page-level hero (icon + h1 + description).
+   *  Omit for the compact tab-context heading. */
+  hero?: {
+    /** Pre-rendered icon JSX. Server components render the icon themselves
+     *  and pass the element here — function references can't cross the
+     *  server→client boundary, but React elements can. */
+    icon: ReactNode;
+    description: string;
+  };
+  /** The page-specific list body. Reads URL params written by this
+   *  component (search input + filter pills). */
+  children: ReactNode;
+}
+
+export function DevSectionView({ sectionKey, hero, children }: DevSectionViewProps) {
+  const section = OPENFRAME_DEV_SECTIONS[sectionKey];
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const search = section.search;
+  const filter = section.filter;
+
+  const currentSearch = search ? searchParams.get(search.paramKey) || '' : '';
+  const currentFilterValue = filter
+    ? searchParams.get(filter.paramKey) || filter.defaultValue
+    : '';
+
+  // Controlled search-input state — input commits to the URL only on
+  // Enter (not on every keystroke), preserving the legacy behavior.
+  // Lazy init from URL avoids a brief flash of stale value on first
+  // paint after URL-driven re-render (e.g. tab switch).
+  const [searchValue, setSearchValue] = useState(() => currentSearch);
+  useEffect(() => {
+    setSearchValue(currentSearch);
+  }, [currentSearch]);
+
+  const handleSearchSubmit = (value: string) => {
+    if (!search) return;
+    const params = new URLSearchParams(searchParams.toString());
+    if (value.trim()) params.set(search.paramKey, value.trim());
+    else params.delete(search.paramKey);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  const handleFilterChange = (value: string) => {
+    if (!filter) return;
+    const params = new URLSearchParams(searchParams.toString());
+    if (value === filter.defaultValue) params.delete(filter.paramKey);
+    else params.set(filter.paramKey, value);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-10">
+      {hero ? (
+        <div className="space-y-4">
+          <h1 className="text-h1 tracking-[-1.12px] text-ods-text-primary flex items-center gap-3">
+            {hero.icon}
+            {section.hero.title}
+          </h1>
+          <p className="font-['DM_Sans'] font-medium text-[18px] leading-[28px] text-ods-text-secondary max-w-3xl">
+            {hero.description}
+          </p>
+        </div>
+      ) : (
+        <div className="flex items-center justify-between w-full">
+          <h2 className="font-['Azeret_Mono'] font-semibold text-[32px] md:text-[40px] lg:text-[48px] leading-[40px] md:leading-[48px] lg:leading-[56px] text-ods-text-primary tracking-[-0.64px] md:tracking-[-0.8px] lg:tracking-[-0.96px]">
+            {section.hero.title}
+            <span className="text-ods-accent">:</span>
+          </h2>
+        </div>
+      )}
+
+      {(search || filter) && (
+        <div className="space-y-4">
+          {search && (
+            <SearchInput
+              showDropdown={false}
+              placeholder={search.placeholder}
+              value={searchValue}
+              onChange={setSearchValue}
+              onSubmit={handleSearchSubmit}
+            />
+          )}
+          {filter && (
+            <StatusFilterComponent
+              selectedStatus={currentFilterValue}
+              onStatusChange={handleFilterChange}
+              statusOptions={[...filter.options]}
+            />
+          )}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

package/src/components/shared/dev-section/index.ts

@@ -0,0 +1,2 @@
+export { DevSectionView, type DevSectionViewProps } from './dev-section-view';
+export { DevSectionPage, type DevSectionPageProps } from './dev-section-page';

package/src/components/shared/legal-document/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared legal-document surface barrel.
+ *
+ * Exports one parameterized `<LegalDocumentPage>` that replaces hub's
+ * formerly-duplicated `PrivacyPolicyPage` + `TermsOfServicePage`
+ * (95% identical, differing only in copy strings).
+ */
+
+export {
+  LegalDocumentPage,
+  type LegalDocumentPageProps,
+  type LegalDocumentMarkdownRendererProps,
+} from './legal-document-page';
+export {
+  useLegalDocs,
+  type LegalDocument,
+  type UseLegalDocsOptions,
+  type UseLegalDocsReturn,
+} from './use-legal-docs';

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+/**
+ * LegalDocumentPage — unified UI for privacy-policy, terms-of-service,
+ * and any other markdown-backed legal document.
+ *
+ * Replaces two near-identical hub components (`PrivacyPolicyPage` +
+ * `TermsOfServicePage`) that differed only in title, contact email,
+ * and copy strings. Caller passes those as props.
+ *
+ * Markdown rendering: defaults to lib's `SimpleMarkdownRenderer`
+ * (sufficient for plain-markdown legal docs). Embedders that need
+ * richer markdown (embeds, video, OG previews) pass their own via
+ * the `MarkdownRenderer` prop — same injection pattern as
+ * `ReleaseDetailPage`.
+ *
+ * Endpoint configuration: forwarded to `useLegalDocs(docType, { apiEndpoint })`.
+ */
+
+import type { ComponentType } from 'react';
+import { PageShell, PageLayout } from '../../ui';
+import { SimpleMarkdownRenderer } from '../../ui/simple-markdown-renderer';
+import { useRouter } from '../../../embed-shims/next-navigation';
+import { useLegalDocs, type LegalDocument } from './use-legal-docs';
+import { formatLegalDate } from '../../../utils/format';
+
+export interface LegalDocumentMarkdownRendererProps {
+  content: string;
+  sectionIds?: Array<{ id: string; title: string; level: number }>;
+  demoteMarkdownH1ToH2?: boolean;
+}
+
+export interface LegalDocumentPageProps {
+  /** Document type identifier — drives the default API endpoint
+   *  `/api/legal/<docType>` AND the error-log prefix. Common values:
+   *  `'privacy'`, `'terms'`. Embedders may use any string. */
+  docType: string;
+  /** Heading text (e.g. "Privacy Policy", "Terms of Service"). */
+  title: string;
+  /** Fallback subtitle shown when no `lastUpdated` date is available
+   *  (e.g. "Our privacy policy and data protection practices"). */
+  fallbackDescription: string;
+  /** Email shown in the error + empty-state copy
+   *  (e.g. `'privacy@openframe.io'`, `'legal@openframe.io'`). */
+  contactEmail: string;
+  /** Prompt shown above the contact link in the error state
+   *  (e.g. "For privacy-related questions, please contact:"). */
+  errorContactPrompt: string;
+  /** Title for the error block (e.g. "Unable to load privacy policy"). */
+  errorTitle: string;
+  /** Sentence shown when the API returns no document
+   *  (e.g. "Privacy policy content is not available at this time."). */
+  emptyStateMessage: string;
+  /** SSR-prepared document, if available. */
+  initialData?: LegalDocument | null;
+  /** SSR-prepared formatted "Last Updated" label. Stable across hydration. */
+  initialLastUpdatedLabel?: string | null;
+  /** Override the default `/api/legal/<docType>` endpoint
+   *  (reverse-proxy embedders, alternate API paths). */
+  apiEndpoint?: string;
+  /** Override the default markdown renderer. */
+  MarkdownRenderer?: ComponentType<LegalDocumentMarkdownRendererProps>;
+  /** Back-button config — same pattern as `DevSectionPage`. Pass `false`
+   *  to hide. Default `{ label: 'Back to home', href: '/' }`. */
+  backButton?: { label?: string; href?: string } | false;
+}
+
+export function LegalDocumentPage({
+  docType,
+  title,
+  fallbackDescription,
+  contactEmail,
+  errorContactPrompt,
+  errorTitle,
+  emptyStateMessage,
+  initialData = null,
+  initialLastUpdatedLabel = null,
+  apiEndpoint,
+  MarkdownRenderer = SimpleMarkdownRenderer,
+  backButton,
+}: LegalDocumentPageProps) {
+  const router = useRouter();
+  const { data, isLoading, error } = useLegalDocs(docType, { initialData, apiEndpoint });
+
+  // Back-button config — mirrors DevSectionPage's `{ label: 'Back to home',
+  // onClick: () => router.push('/') }`. Hide entirely when caller passes
+  // `false` (e.g. embed-mode where the host owns navigation chrome).
+  const backCfg =
+    backButton === false
+      ? undefined
+      : {
+          label: backButton?.label ?? 'Back to home',
+          onClick: () => router.push(backButton?.href ?? '/'),
+        };
+
+  const fallbackLastUpdatedLabel =
+    data?.lastSynced != null ? formatLegalDate(data.lastSynced) : null;
+  const effectiveLastUpdatedLabel = initialLastUpdatedLabel ?? fallbackLastUpdatedLabel;
+
+  // Title with accent-colon trailing dot — matches knowledge-hub typography
+  const customTitle = (
+    <div className="flex flex-col gap-4">
+      <h1 className="font-['Azeret_Mono'] text-[32px] md:text-[40px] lg:text-[48px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-primary">
+        <span>{title}</span>
+        <span className="text-ods-accent">.</span>
+      </h1>
+      <p className="font-['DM_Sans'] text-base md:text-lg text-ods-text-secondary max-w-2xl">
+        {effectiveLastUpdatedLabel ? `Last Updated: ${effectiveLastUpdatedLabel}` : fallbackDescription}
+        {data?.sourceFile && (
+          <span className="block text-sm mt-1 opacity-75">Source: {data.sourceFile}</span>
+        )}
+      </p>
+    </div>
+  );
+
+  return (
+    <PageShell>
+      <PageLayout backButton={backCfg}>
+        <div className="flex flex-col gap-4">{customTitle}</div>
+
+        <div className="flex flex-col lg:flex-row gap-6 lg:gap-10 items-start flex-1">
+          <div className="flex-1">
+            <div className="w-full">
+              <article className="space-y-2">
+                {isLoading ? (
+                  // Loading skeleton matching Knowledge Hub pattern
+                  <div className="space-y-6">
+                    <div className="h-10 bg-ods-skeleton rounded-lg w-3/4 animate-pulse"></div>
+                    <div className="space-y-4">
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-5/6 animate-pulse"></div>
+                    </div>
+                    <div className="h-32 bg-ods-card border border-ods-border rounded-lg animate-pulse"></div>
+                    <div className="space-y-4">
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-4/5 animate-pulse"></div>
+                    </div>
+                  </div>
+                ) : error ? (
+                  <div className="text-center space-y-4">
+                    <div className="bg-red-900/20 border border-red-700 rounded-lg p-6">
+                      <p className="text-red-400 mb-2">{errorTitle}</p>
+                      <p className="text-red-300 text-sm">{error}</p>
+                    </div>
+                    <div className="text-ods-text-secondary">
+                      <p>{errorContactPrompt}</p>
+                      <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">
+                        {contactEmail}
+                      </a>
+                    </div>
+                  </div>
+                ) : data ? (
+                  <MarkdownRenderer
+                    content={data.content}
+                    sectionIds={data.sections || []}
+                    demoteMarkdownH1ToH2
+                  />
+                ) : (
+                  <div className="text-center text-ods-text-secondary py-16">
+                    <p className="text-xl">{emptyStateMessage}</p>
+                    <p className="mt-2">
+                      Please contact{' '}
+                      <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">
+                        {contactEmail}
+                      </a>{' '}
+                      for more information.
+                    </p>
+                  </div>
+                )}
+              </article>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    </PageShell>
+  );
+}