@usequeek/theme-kit 0.1.0 → 0.1.2

package/apps/follow-card.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useState, useCallback, useEffect } from 'react';
 import { useStorefront } from '../provider';
 import { useUserStore } from '../stores/user-store';

package/apps/subscribe-form.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useCallback, useId, useState } from 'react';
 import { useStorefront } from '../provider';
 import { getQueekClient } from '../sdk/queek-client';

package/client.ts

@@ -50,3 +50,7 @@ export * from './stores/location-store';
 export * from './stores/address-modal-store';
 export * from './stores/auth-modal-store';
 export * from './stores/cart-store';
+
+// Mounting a theme — the piece a theme developer cannot build without.
+export * from './theme-mount';
+export * from './theme-context';

package/components/auth/auth-email-login-step.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
 
 export function AuthEmailLoginStep(): JSX.Element {

package/components/auth/auth-email-otp-step.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
 
 export function AuthEmailOtpStep(): JSX.Element {

package/components/auth/auth-email-otp-verify-step.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useRef } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
 

package/components/auth/auth-email-register-step.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
 
 export function AuthEmailRegisterStep(): JSX.Element {

package/components/auth/auth-flow.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { AuthFlowProvider, useAuthFlow } from '../../hooks/use-auth-flow';
 import { AuthEmailOtpStep } from './auth-email-otp-step';
 import { AuthEmailOtpVerifyStep } from './auth-email-otp-verify-step';

package/components/auth/auth-signup-step.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
 
 export function AuthSignupStep(): JSX.Element {

package/components/blog/category-filter.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { BlogCategory } from '../../types/page';
 import { useStorefront } from '../../provider';

package/components/blog/pagination.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { Pagination } from '../../types/page';
 import { useStorefront } from '../../provider';

package/components/blog/post-categories.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { BlogCategory } from '../../types/page';
 import { useStorefront } from '../../provider';

package/components/blog/post-meta.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { Post } from '../../types/page';
 import { useStorefront } from '../../provider';
 import { Image } from '../image';

package/components/blog/related-posts.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { Post } from '../../types/page';
 import { useStorefront } from '../../provider';

package/components/blog/share-buttons.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, useState } from 'react';
 
 interface ShareButtonsProps {

package/components/cart/cart-panel-controller.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, type ReactNode } from 'react';
 import { useRouter } from 'next/navigation';
 import type { CartItem } from '../../types/cart';

package/components/cart/default-cart-shell.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useRef, useState } from 'react';
 import Link from 'next/link';
 import type { CartShellProps } from '../../types/theme';

package/components/checkout/checkout-contact.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useAuth } from '../../hooks/use-auth';
 import { Image } from '../image';

package/components/checkout/default-checkout-shell.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { CheckoutShellProps } from '../../types/theme';
 import { formatMoney } from '../../utils/format';

package/components/checkout/policy-links.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import Link from 'next/link';

package/components/markdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { ComponentPropsWithoutRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';

package/components/product-media-frame.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { Image, type PlaceholderProp } from './image';
 import type { ImageIntent } from '../utils/image-srcset';
 import type { MediaFrame } from '../utils/product-media';

package/components/variant-picker.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { Product, ProductVariant } from '../types/product';
 import './variant-picker.css';
 

package/demo.ts

@@ -0,0 +1,201 @@
+/**
+ * Turns a theme's `demo.json` into the props its components expect.
+ *
+ * SHIPPED WITH THE KIT because without it a theme developer has demo data and
+ * no way to render it. THEME.md already requires every theme to carry a
+ * demo.json; these are the functions that resolve its block references into
+ * real products, categories, posts and collections. They lived in the
+ * storefront's own preview routes, so they existed only here — a theme could be
+ * written outside this repo and never shown running against its own data.
+ *
+ * Pure and type-only by construction: no `fs`, no `next`, no app imports. That
+ * is what made moving it a rename rather than a rewrite, and it is why these
+ * work identically in a developer's preview and in this repo's preview routes.
+ */
+import type { Block, ReviewItem } from './types/block';
+import type { Menu } from './types/menu';
+import type { Collection, Page, Post } from './types/page';
+import type { Product } from './types/product';
+import type { StorefrontConfig, VendorProfile } from './types/vendor';
+
+/**
+ * Pure demo-data transforms — no filesystem access, so this file is safe to
+ * import from a 'use client' component (unlike `demo.ts`, which pulls in
+ * Node's `fs`/`path` for `loadDemoData` and will break the browser bundle if
+ * a client component imports a value from it). `demo.ts` re-exports
+ * everything here for existing server-component call sites; new client-side
+ * code should import from here directly.
+ */
+
+export type DemoCategory = { id: string; slug: string; name: string; image?: string | null };
+
+export interface PreviewDemoData {
+  profile: VendorProfile;
+  config: StorefrontConfig;
+  menus: Menu[];
+  pages: Record<string, Page>;
+  products?: Product[];
+  categories?: DemoCategory[];
+  // Raw shape varies across themes that predate the `content: Block[]` /
+  // `cover_image_url` convention (see `normalizePost`) — kept loose here and
+  // normalized on read via `getPosts`/`getPost`.
+  posts?: Record<string, unknown>[];
+}
+
+export function enrichBlocks(blocks: Block[], demo: PreviewDemoData): Block[] {
+  return blocks.map((block) => {
+    if (block.type === 'products' && demo.products) {
+      const data = (block.data ?? {}) as Record<string, unknown>;
+      const title = (data.title as string) ?? '';
+      const limit = (data.limit as number) ?? demo.products.length;
+      const ids = data.ids as string[] | undefined;
+      let items = demo.products;
+
+      if (Array.isArray(ids) && ids.length > 0) {
+        // Explicit ids field — preserve order from ids array for section variety
+        const byId = new Map(demo.products.map((p) => [p.id, p]));
+        items = ids.map((id) => byId.get(id)).filter((p): p is NonNullable<typeof p> => Boolean(p));
+      } else if (/new|arrival/i.test(title)) {
+        items = demo.products.filter((product) => product.flags?.is_new);
+      } else if (/featured|popular|best|focus|lookbook/i.test(title)) {
+        items = demo.products.filter((product) => product.flags?.featured);
+      }
+
+      if (items.length === 0) items = demo.products;
+      return { ...block, data: { ...block.data, products: items.slice(0, limit) } };
+    }
+
+    if (block.type === 'categories' && demo.categories) {
+      return { ...block, data: { ...block.data, categories: demo.categories } };
+    }
+
+    return block;
+  });
+}
+
+export function getEnrichedPage<T extends Page>(page: T, demo: PreviewDemoData): T {
+  return {
+    ...page,
+    content: enrichBlocks(page.content ?? [], demo),
+  };
+}
+
+/**
+ * `demo.json`'s `posts` array is the documented, spec-correct source (see
+ * `themes/THEME.md` — "must mirror the vendor bootstrap shape") — a few
+ * themes authored it before the `content: Block[]` / `cover_image_url`
+ * convention settled, so this tolerates the older shapes instead of
+ * assuming every theme's data is current.
+ */
+function normalizePost(raw: Record<string, unknown>): Post {
+  const legacyMedia = raw.media as { image?: string; thumbnail?: string } | undefined;
+  const coverImageUrl =
+    (raw.cover_image_url as string | undefined) ?? legacyMedia?.image ?? legacyMedia?.thumbnail ?? null;
+
+  let content = raw.content;
+  if (typeof content === 'string') {
+    // Legacy raw-HTML content string — convert the handful of tags these
+    // themes actually used into one markdown content block rather than
+    // rendering literal "<p>"/"<h2>" text.
+    const markdown = content
+      .replace(/<h2>(.*?)<\/h2>/gi, '\n\n## $1\n\n')
+      .replace(/<h3>(.*?)<\/h3>/gi, '\n\n### $1\n\n')
+      .replace(/<p>(.*?)<\/p>/gi, '$1\n\n')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
+    content = [{ type: 'content', data: { markdown } }];
+  }
+
+  return {
+    ...raw,
+    type: 'post',
+    content: Array.isArray(content) ? (content as Block[]) : [],
+    cover_image_url: coverImageUrl,
+  } as Post;
+}
+
+export function getPosts(demo: PreviewDemoData): Post[] {
+  return (demo.posts ?? [])
+    .map(normalizePost)
+    .sort((left, right) => {
+      const leftDate = left.published_at ? new Date(left.published_at).getTime() : 0;
+      const rightDate = right.published_at ? new Date(right.published_at).getTime() : 0;
+      return rightDate - leftDate;
+    });
+}
+
+/**
+ * Vendor-scope reviews for preview surfaces, flattened from the demo's own
+ * product reviews.
+ *
+ * Review-backed sections (beaurify's `content/testimonials`) render real vendor
+ * reviews rather than merchant-authored copy — deliberately, see its manifest.
+ * But nothing seeded them in preview, so the section returned null everywhere a
+ * vendor evaluates it: theme preview, style guide, and the section-library
+ * thumbnails. Themes already ship product reviews in demo.json; this exposes
+ * them at vendor scope instead of asking every theme to duplicate the data.
+ *
+ * Demo review records predate `ReviewItem` (`user` is a bare name, the body is
+ * `comment`), so both spellings are accepted.
+ */
+export function getVendorReviews(demo: PreviewDemoData): ReviewItem[] {
+  return (demo.products ?? []).flatMap((product) => {
+    const raw = (product as unknown as { reviews?: Record<string, unknown>[] }).reviews ?? [];
+
+    return raw.map((review, index): ReviewItem => {
+      const author = typeof review.user === 'string'
+        ? review.user
+        : (review.customer_name as string | null) ?? 'Verified buyer';
+
+      return {
+        id: String(review.id ?? `${product.id}-review-${index}`),
+        rating: Number(review.rating ?? 5),
+        title: (review.title as string | null) ?? null,
+        description: (review.description as string | null) ?? (review.comment as string | null) ?? null,
+        media: [],
+        is_verified_purchase: review.is_verified_purchase !== false,
+        created_at: String(review.created_at ?? ''),
+        user: { id: `${product.id}-reviewer-${index}`, name: author, avatar: null },
+        product: { id: product.id, slug: product.slug, title: product.title, thumbnail: product.media?.thumbnail ?? null },
+      };
+    });
+  });
+}
+
+export function getPost(demo: PreviewDemoData, slug: string): Post | null {
+  return getPosts(demo).find((post) => post.slug === slug) ?? null;
+}
+
+export function getPolicies(demo: PreviewDemoData): Page[] {
+  return Object.values(demo.pages).filter((page) => page.type === 'policy');
+}
+
+export function getCollections(demo: PreviewDemoData): Collection[] {
+  const categories = demo.categories ?? [];
+  const products = demo.products ?? [];
+
+  return categories.map((category) => ({
+    id: category.id,
+    slug: category.slug,
+    name: category.name,
+    description: `${category.name} — curated picks from this collection.`,
+    image: category.image ?? null,
+    mode: 'manual',
+    products_count: products.filter((product) => product.categories.some((item) => item.slug === category.slug)).length,
+  }));
+}
+
+export function getCollection(demo: PreviewDemoData, slug: string): { collection: Collection; products: Product[] } | null {
+  const collection = getCollections(demo).find((item) => item.slug === slug);
+  if (!collection) return null;
+
+  const products = (demo.products ?? []).filter((product) => product.categories.some((category) => category.slug === slug));
+
+  return {
+    collection: {
+      ...collection,
+      products,
+    },
+    products,
+  };
+}

package/edit-mode-active.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { Block } from './types/block';
 import { useEditPreviewStore } from './stores/edit-preview-store';
 import { useEffect, useRef, useState, type ReactNode } from 'react';

package/edit-mode.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, useState, type ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 

package/hooks/use-auth-flow.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { createContext, useContext, useState, type ReactNode } from 'react';
 import { QueekSdkError, type EmailVerifyOtpResponse } from '@queekai/client-sdk';
 import { useStorefront } from '../provider';

package/index.ts

@@ -47,3 +47,6 @@ export * from './utils/contact-location';
 export * from './utils/benefit-icon';
 export * from './utils/video-embed';
 export * from './utils/match-variant';
+
+// 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.0",
+  "version": "0.1.2",
   "private": false,
   "license": "UNLICENSED",
   "description": "The framework a Queek storefront theme is built against.",

package/page-renderer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { Component, Suspense, use, useEffect, useMemo, type ComponentType, type ReactNode } from 'react';
 import type { Block, BlockDataMap } from './types/block';
 import type { Product } from './types/product';

package/provider.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { createContext, useContext, useMemo, useRef, type ReactNode } from 'react';
 import type { Menu } from './types/menu';
 import type { ReviewItem } from './types/block';

package/shared-blocks/button.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import Link from 'next/link';
 import type { ButtonBlockData } from '../types/block';
 

package/shared-blocks/callout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { CalloutBlockData, CalloutTone } from '../types/block';
 import { Markdown } from '../components/markdown';
 

package/shared-blocks/content-default.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { ContentBlockData } from '../types/block';
 import { Markdown } from '../components/markdown';
 

package/shared-blocks/divider.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { DividerBlockData } from '../types/block';
 
 /**

package/shared-blocks/embed.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { EmbedBlockData } from '../types/block';
 
 /**

package/shared-blocks/faq.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { FaqBlockData } from '../types/block';
 
 /**

package/shared-blocks/image.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { ImageBlockData } from '../types/block';
 import { Image } from '../components/image';
 

package/shared-blocks/product-qa.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useState } from 'react';
 import type { ProductQaBlockData, ProductQuestionItem } from '../types/block';
 import { Image } from '../components/image';

package/shared-blocks/quote.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { QuoteBlockData } from '../types/block';
 
 /**

package/shared-blocks/reviews.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type { ReviewItem, ReviewsBlockData, ReviewsSummary } from '../types/block';
 import { Image } from '../components/image';

package/shared-blocks/table.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { TableBlockData } from '../types/block';
 
 /**

package/shared-blocks/video.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import type { VideoBlockData } from '../types/block';
 import { resolveVideoEmbedUrl } from '../utils/video-embed';
 

package/theme-context.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { JSX } from 'react';
 import { createContext, useContext, type ReactNode } from 'react';
 import type { ThemeModule } from './types/theme';
 

package/theme-mount.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Component, createElement, type ErrorInfo, type JSX, type ReactNode } from 'react';
+import type { FooterProps, HeaderProps, ThemeModule } from './types/theme';
+import { ThemeProvider } from './theme-context';
+
+/**
+ * Renders a theme. THE MINIMUM A THEME NEEDS TO BE SEEN.
+ *
+ * Without this, installing `@usequeek/theme-kit` gave a developer every hook,
+ * store, type and shared block — and no way to actually mount what they built.
+ * The component that does it, `VendorShell`, lives in the storefront app, so it
+ * was never part of what shipped. A theme could be written and typechecked from
+ * outside this repo but never rendered.
+ *
+ * DELIBERATELY SMALLER THAN VendorShell. That composes the same three pieces and
+ * then layers on the Queek storefront's own chrome — checkout header, cart and
+ * auth modals, toasts, WhatsApp chat, analytics, the merchant edit-mode bridge.
+ * None of that is a theme's concern, and pulling it in would drag the whole app
+ * into the package. What is left is the actual contract: a Layout wrapping a
+ * header, the page, and a footer.
+ *
+ * Themes render inside a boundary because a theme's header and footer are
+ * SIBLINGS of the page, so a crash in either escapes any boundary the page sets
+ * up and blanks the whole screen. A theme developer should see which part broke,
+ * not an empty document.
+ */
+
+class ThemeBoundary extends Component<
+  { part: string; children: ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+
+  static getDerivedStateFromError(error: Error): { error: Error } {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.error(`[theme-kit] the theme's ${this.props.part} threw`, error, info.componentStack);
+  }
+
+  render(): ReactNode {
+    if (!this.state.error) return this.props.children;
+
+    // Visible on purpose. A silent fallback during theme development means
+    // staring at a missing header wondering whether it is CSS.
+    return (
+      <div role="alert" style={{ padding: '1rem', border: '2px solid #e0492f', background: '#fff5f3', color: '#211711', font: '14px/1.5 ui-monospace, monospace' }}>
+        <strong>Theme {this.props.part} crashed.</strong>
+        <pre style={{ margin: '0.5rem 0 0', whiteSpace: 'pre-wrap' }}>{this.state.error.message}</pre>
+      </div>
+    );
+  }
+}
+
+export interface ThemeMountProps {
+  theme: ThemeModule;
+  headerProps: HeaderProps;
+  footerProps: FooterProps;
+  /** Variant ids from the store's config; omit to render the theme's default. */
+  headerVariant?: string;
+  footerVariant?: string;
+  children: ReactNode;
+}
+
+export function ThemeMount({
+  theme,
+  headerProps,
+  footerProps,
+  headerVariant,
+  footerVariant,
+  children,
+}: ThemeMountProps): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <theme.Layout>
+        <ThemeBoundary part="header">
+          {createElement(theme.getHeader(headerVariant), headerProps)}
+        </ThemeBoundary>
+        <main className="storefront-main">{children}</main>
+        <ThemeBoundary part="footer">
+          {createElement(theme.getFooter(footerVariant), footerProps)}
+        </ThemeBoundary>
+      </theme.Layout>
+    </ThemeProvider>
+  );
+}

package/utils/benefit-icon.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Shared icon-keyword vocabulary for "benefit row" content blocks (glow's
  * `trust-badges`, any theme's `features-columns`, and similar icon+title+text