@shoppexio/builder-runtime 0.1.1 → 0.1.3

package/src/standard-product-blocks.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance } from '@shoppex/builder-contracts';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { createStandardProductBlockRegistry } from './standard-product-blocks.js';
+
+describe('createStandardProductBlockRegistry', () => {
+  test('registers all standard product block types and resolves labels through slots', () => {
+    const registry = createStandardProductBlockRegistry({
+      data: {
+        filteredDescription: 'Description body',
+        faqCount: 1,
+        reviewCount: 2,
+        relatedProductsCount: 1,
+      },
+      slots: {
+        renderGallery: ({ attrs }) => createElement('div', { ...attrs, 'data-slot': 'gallery' }),
+        renderBuyBox: ({ attrs, labels }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'buy-box',
+            'data-variant-label': labels.variantLabel ?? '',
+          }),
+        renderDetails: ({ attrs, tabs }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'details',
+            'data-tab-count': String(tabs.length),
+          }),
+        renderRelatedProducts: ({ attrs, title }) =>
+          createElement('div', {
+            ...attrs,
+            'data-slot': 'related-products',
+            'data-title': title ?? '',
+          }),
+      },
+    });
+
+    expect(Object.keys(registry).sort()).toEqual([
+      'buy-box',
+      'details',
+      'gallery',
+      'related-products',
+    ]);
+
+    const buyBoxBlock = createBlockInstance({
+      id: 'buy-box-1',
+      type: 'buy-box',
+      settings: { variantLabel: 'Variant' },
+    });
+    const detailsBlock = createBlockInstance({ id: 'details-1', type: 'details' });
+    const relatedBlock = createBlockInstance({
+      id: 'related-1',
+      type: 'related-products',
+      settings: { title: 'More products' },
+    });
+
+    const buyBoxMarkup = renderToStaticMarkup(
+      createElement(registry['buy-box'], { block: buyBoxBlock, context: null }),
+    );
+    const detailsMarkup = renderToStaticMarkup(
+      createElement(registry.details, { block: detailsBlock, context: null }),
+    );
+    const relatedMarkup = renderToStaticMarkup(
+      createElement(registry['related-products'], { block: relatedBlock, context: null }),
+    );
+
+    expect(buyBoxMarkup).toContain('data-variant-label="Variant"');
+    expect(detailsMarkup).toContain('data-tab-count="3"');
+    expect(relatedMarkup).toContain('data-title="More products"');
+  });
+
+  test('skips related-products output when there are no related products', () => {
+    const registry = createStandardProductBlockRegistry({
+      data: {
+        filteredDescription: '',
+        faqCount: 0,
+        reviewCount: 0,
+        relatedProductsCount: 0,
+      },
+      slots: {
+        renderGallery: () => null,
+        renderBuyBox: () => null,
+        renderDetails: () => null,
+        renderRelatedProducts: () => createElement('div', { 'data-slot': 'related-products' }),
+      },
+    });
+
+    const relatedBlock = createBlockInstance({ id: 'related-1', type: 'related-products' });
+    const output = registry['related-products']({ block: relatedBlock, context: null });
+    expect(output).toBeNull();
+  });
+});

package/src/standard-product-blocks.tsx

@@ -0,0 +1,121 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+import type { ReactNode } from 'react';
+import { getProductPageBlockAttributes } from './product-page.js';
+import {
+  buildStandardProductInfoTabs,
+  resolveStandardBuyBoxLabels,
+  resolveStandardDetailsLabels,
+  resolveStandardRelatedProductsTitle,
+  type StandardBuyBoxLabels,
+  type StandardDetailsLabels,
+  type StandardProductTabSpec,
+} from './standard-product-page.js';
+import { type BuilderBlockRegistry } from './react.js';
+
+export {
+  STANDARD_PRODUCT_BLOCK_TYPES,
+  STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES,
+  STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES,
+  splitStandardProductPageBlocks,
+  buildStandardProductInfoTabs,
+  resolveStandardBuyBoxLabels,
+  resolveStandardDetailsLabels,
+  resolveStandardRelatedProductsTitle,
+  resolveScopedBlockSettingText,
+} from './standard-product-page.js';
+export type {
+  StandardBuyBoxLabels,
+  StandardDetailsLabels,
+  StandardProductTabSpec,
+  StandardProductBlockType,
+  StandardProductSettingScope,
+} from './standard-product-page.js';
+
+type StandardProductBlockAttrs = ReturnType<typeof getProductPageBlockAttributes>;
+
+export type StandardProductBlockRegistrySlots = {
+  renderGallery: (input: {
+    block: BlockInstance;
+    attrs: StandardProductBlockAttrs;
+  }) => ReactNode;
+  renderBuyBox: (input: {
+    block: BlockInstance;
+    attrs: StandardProductBlockAttrs;
+    labels: StandardBuyBoxLabels;
+  }) => ReactNode;
+  renderDetails: (input: {
+    block: BlockInstance;
+    attrs: StandardProductBlockAttrs;
+    labels: StandardDetailsLabels;
+    tabs: StandardProductTabSpec[];
+  }) => ReactNode;
+  renderRelatedProducts: (input: {
+    block: BlockInstance;
+    attrs: StandardProductBlockAttrs;
+    title: string | null;
+  }) => ReactNode | null;
+};
+
+export type StandardProductBlockRegistryOptions = {
+  useScopedKeys?: boolean;
+  includeReviewsTab?: boolean;
+  useShopReviewTabLabel?: boolean;
+};
+
+export type StandardProductBlockRegistryData = {
+  filteredDescription: string;
+  faqCount: number;
+  reviewCount: number;
+  reviewSource?: 'shop' | 'product';
+  relatedProductsCount: number;
+};
+
+export function createStandardProductBlockRegistry(input: {
+  slots: StandardProductBlockRegistrySlots;
+  data: StandardProductBlockRegistryData;
+  options?: StandardProductBlockRegistryOptions;
+}): BuilderBlockRegistry<null> {
+  const { slots, data, options = {} } = input;
+
+  return {
+    gallery: ({ block }) =>
+      slots.renderGallery({
+        block,
+        attrs: getProductPageBlockAttributes(block),
+      }),
+    'buy-box': ({ block }) =>
+      slots.renderBuyBox({
+        block,
+        attrs: getProductPageBlockAttributes(block),
+        labels: resolveStandardBuyBoxLabels(block, options),
+      }),
+    details: ({ block }) => {
+      const labels = resolveStandardDetailsLabels(block, options);
+      const tabs = buildStandardProductInfoTabs({
+        labels,
+        filteredDescription: data.filteredDescription,
+        faqCount: data.faqCount,
+        reviewCount: data.reviewCount,
+        reviewSource: data.reviewSource,
+        includeReviewsTab: options.includeReviewsTab ?? true,
+        useShopReviewTabLabel: options.useShopReviewTabLabel ?? false,
+      });
+      return slots.renderDetails({
+        block,
+        attrs: getProductPageBlockAttributes(block),
+        labels,
+        tabs,
+      });
+    },
+    'related-products': ({ block }) => {
+      if (data.relatedProductsCount <= 0) {
+        return null;
+      }
+      return slots.renderRelatedProducts({
+        block,
+        attrs: getProductPageBlockAttributes(block),
+        title: resolveStandardRelatedProductsTitle(block, options),
+      });
+    },
+  };
+}

package/src/standard-product-page.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance } from '@shoppex/builder-contracts';
+import {
+  buildStandardProductInfoTabs,
+  resolveScopedBlockSettingText,
+  resolveStandardBuyBoxLabels,
+  resolveStandardDetailsLabels,
+  resolveStandardRelatedProductsTitle,
+  splitStandardProductPageBlocks,
+  STANDARD_PRODUCT_BLOCK_TYPES,
+} from './standard-product-page.js';
+
+describe('standard product page helpers', () => {
+  test('STANDARD_PRODUCT_BLOCK_TYPES matches shared manifest block ids', () => {
+    expect(STANDARD_PRODUCT_BLOCK_TYPES).toEqual([
+      'gallery',
+      'buy-box',
+      'details',
+      'related-products',
+    ]);
+  });
+
+  test('splitStandardProductPageBlocks groups primary and secondary blocks', () => {
+    const blocks = [
+      createBlockInstance({ id: 'gallery-1', type: 'gallery' }),
+      createBlockInstance({ id: 'buy-box-1', type: 'buy-box' }),
+      createBlockInstance({ id: 'details-1', type: 'details' }),
+      createBlockInstance({ id: 'related-1', type: 'related-products' }),
+    ];
+
+    expect(splitStandardProductPageBlocks(blocks)).toEqual({
+      primary: [blocks[0], blocks[1]],
+      secondary: [blocks[2], blocks[3]],
+    });
+  });
+
+  test('resolveStandardBuyBoxLabels reads short keys by default', () => {
+    const block = createBlockInstance({
+      type: 'buy-box',
+      settings: {
+        variantLabel: 'License Type',
+        addonsLabel: 'Extras',
+      },
+    });
+
+    expect(resolveStandardBuyBoxLabels(block)).toEqual({
+      variantLabel: 'License Type',
+      addonsLabel: 'Extras',
+      primaryActionLabel: null,
+      buyNowLabel: null,
+      quantityLabel: null,
+      reviewsLabel: null,
+      noReviewsLabel: null,
+    });
+  });
+
+  test('resolveStandardBuyBoxLabels prefers scoped keys when enabled', () => {
+    const block = createBlockInstance({
+      type: 'buy-box',
+      settings: {
+        'product.buyBox.variantLabel': 'Scoped Variant',
+        variantLabel: 'Legacy Variant',
+      },
+    });
+
+    expect(resolveStandardBuyBoxLabels(block, { useScopedKeys: true }).variantLabel).toBe(
+      'Scoped Variant',
+    );
+    expect(resolveStandardBuyBoxLabels(block, { useScopedKeys: true }).addonsLabel).toBeNull();
+  });
+
+  test('resolveScopedBlockSettingText falls back to short keys', () => {
+    const block = createBlockInstance({
+      type: 'details',
+      settings: {
+        faqTabLabel: 'Questions',
+      },
+    });
+
+    expect(resolveScopedBlockSettingText(block, 'details', 'faqTabLabel')).toBe('Questions');
+  });
+
+  test('buildStandardProductInfoTabs includes description, reviews, and faq tabs', () => {
+    const labels = resolveStandardDetailsLabels(
+      createBlockInstance({
+        type: 'details',
+        settings: {
+          descriptionTabLabel: 'Overview',
+          reviewsTabLabel: 'Ratings',
+          faqTabLabel: 'Help',
+        },
+      }),
+    );
+
+    expect(
+      buildStandardProductInfoTabs({
+        labels,
+        filteredDescription: 'Product copy',
+        faqCount: 2,
+        reviewCount: 5,
+      }),
+    ).toEqual([
+      { id: 'description', label: 'Overview', content: 'Product copy' },
+      { id: 'reviews', label: 'Ratings', badge: '5' },
+      { id: 'faq', label: 'Help', badge: '2' },
+    ]);
+  });
+
+  test('buildStandardProductInfoTabs uses shop review label when requested', () => {
+    const labels = resolveStandardDetailsLabels(
+      createBlockInstance({
+        type: 'details',
+        settings: {
+          shopReviewsTabLabel: 'Store Reviews',
+          reviewsTabLabel: 'Reviews',
+        },
+      }),
+    );
+
+    expect(
+      buildStandardProductInfoTabs({
+        labels,
+        filteredDescription: '',
+        faqCount: 0,
+        reviewCount: 3,
+        reviewSource: 'shop',
+        useShopReviewTabLabel: true,
+      }),
+    ).toEqual([
+      { id: 'description', label: 'Description', content: '' },
+      { id: 'reviews', label: 'Store Reviews', badge: '3' },
+    ]);
+  });
+
+  test('buildStandardProductInfoTabs omits reviews tab when disabled', () => {
+    const labels = resolveStandardDetailsLabels(createBlockInstance({ type: 'details' }));
+
+    expect(
+      buildStandardProductInfoTabs({
+        labels,
+        filteredDescription: 'Details',
+        faqCount: 1,
+        reviewCount: 4,
+        includeReviewsTab: false,
+      }),
+    ).toEqual([
+      { id: 'description', label: 'Description', content: 'Details' },
+      { id: 'faq', label: 'FAQ', badge: '1' },
+    ]);
+  });
+
+  test('resolveStandardRelatedProductsTitle reads scoped and short keys', () => {
+    const scopedBlock = createBlockInstance({
+      type: 'related-products',
+      settings: {
+        'product.relatedProducts.title': 'You may also like',
+      },
+    });
+    const shortBlock = createBlockInstance({
+      type: 'related-products',
+      settings: {
+        title: 'Related',
+      },
+    });
+
+    expect(resolveStandardRelatedProductsTitle(scopedBlock, { useScopedKeys: true })).toBe(
+      'You may also like',
+    );
+    expect(resolveStandardRelatedProductsTitle(shortBlock)).toBe('Related');
+  });
+});

package/src/standard-product-page.ts

@@ -0,0 +1,169 @@
+import type { BlockInstance } from '@shoppex/builder-contracts';
+import { getBuilderBlockSettingText } from './product-page.js';
+
+export const STANDARD_PRODUCT_BLOCK_TYPES = [
+  'gallery',
+  'buy-box',
+  'details',
+  'related-products',
+] as const;
+
+export type StandardProductBlockType = (typeof STANDARD_PRODUCT_BLOCK_TYPES)[number];
+
+export const STANDARD_PRODUCT_PRIMARY_BLOCK_TYPES = ['gallery', 'buy-box'] as const;
+export const STANDARD_PRODUCT_SECONDARY_BLOCK_TYPES = ['details', 'related-products'] as const;
+
+export type StandardProductSettingScope = 'buyBox' | 'details' | 'relatedProducts';
+
+const SCOPE_PREFIX: Record<StandardProductSettingScope, string> = {
+  buyBox: 'product.buyBox',
+  details: 'product.details',
+  relatedProducts: 'product.relatedProducts',
+};
+
+export function splitStandardProductPageBlocks(blocks: BlockInstance[]) {
+  return {
+    primary: blocks.filter((block) => block.type === 'gallery' || block.type === 'buy-box'),
+    secondary: blocks.filter((block) => block.type === 'details' || block.type === 'related-products'),
+  };
+}
+
+export function resolveScopedBlockSettingText(
+  block: Pick<BlockInstance, 'settings'>,
+  scope: StandardProductSettingScope,
+  key: string,
+): string | null {
+  const prefixed = getBuilderBlockSettingText(block, `${SCOPE_PREFIX[scope]}.${key}`);
+  if (prefixed) return prefixed;
+  return getBuilderBlockSettingText(block, key);
+}
+
+export type StandardBuyBoxLabels = {
+  variantLabel: string | null;
+  addonsLabel: string | null;
+  primaryActionLabel: string | null;
+  buyNowLabel: string | null;
+  quantityLabel: string | null;
+  reviewsLabel: string | null;
+  noReviewsLabel: string | null;
+};
+
+export function resolveStandardBuyBoxLabels(
+  block: Pick<BlockInstance, 'settings'>,
+  options?: { useScopedKeys?: boolean },
+): StandardBuyBoxLabels {
+  const read = (key: string) =>
+    options?.useScopedKeys
+      ? resolveScopedBlockSettingText(block, 'buyBox', key)
+      : getBuilderBlockSettingText(block, key);
+
+  return {
+    variantLabel: read('variantLabel'),
+    addonsLabel: read('addonsLabel'),
+    primaryActionLabel: read('primaryActionLabel'),
+    buyNowLabel: read('buyNowLabel'),
+    quantityLabel: read('quantityLabel'),
+    reviewsLabel: read('reviewsLabel'),
+    noReviewsLabel: read('noReviewsLabel'),
+  };
+}
+
+export type StandardDetailsLabels = {
+  descriptionTabLabel: string | null;
+  reviewsTabLabel: string | null;
+  shopReviewsTabLabel: string | null;
+  faqTabLabel: string | null;
+  emptyDescriptionLabel: string | null;
+  emptyReviewsTitle: string | null;
+  emptyReviewsDescription: string | null;
+  emptyFaqLabel: string | null;
+};
+
+export function resolveStandardDetailsLabels(
+  block: Pick<BlockInstance, 'settings'>,
+  options?: { useScopedKeys?: boolean },
+): StandardDetailsLabels {
+  const read = (key: string) =>
+    options?.useScopedKeys
+      ? resolveScopedBlockSettingText(block, 'details', key)
+      : getBuilderBlockSettingText(block, key);
+
+  return {
+    descriptionTabLabel: read('descriptionTabLabel'),
+    reviewsTabLabel: read('reviewsTabLabel'),
+    shopReviewsTabLabel: read('shopReviewsTabLabel'),
+    faqTabLabel: read('faqTabLabel'),
+    emptyDescriptionLabel: read('emptyDescriptionLabel'),
+    emptyReviewsTitle: read('emptyReviewsTitle'),
+    emptyReviewsDescription: read('emptyReviewsDescription'),
+    emptyFaqLabel: read('emptyFaqLabel'),
+  };
+}
+
+export type StandardProductTabSpec = {
+  id: 'description' | 'reviews' | 'faq';
+  label: string;
+  content?: string;
+  badge?: string;
+};
+
+export function buildStandardProductInfoTabs(input: {
+  labels: StandardDetailsLabels;
+  filteredDescription: string;
+  faqCount: number;
+  reviewCount: number;
+  reviewSource?: 'shop' | 'product';
+  includeReviewsTab?: boolean;
+  useShopReviewTabLabel?: boolean;
+}): StandardProductTabSpec[] {
+  const {
+    labels,
+    filteredDescription,
+    faqCount,
+    reviewCount,
+    reviewSource = 'product',
+    includeReviewsTab = true,
+    useShopReviewTabLabel = false,
+  } = input;
+
+  const tabs: StandardProductTabSpec[] = [
+    {
+      id: 'description',
+      label: labels.descriptionTabLabel ?? 'Description',
+      content: filteredDescription,
+    },
+  ];
+
+  if (includeReviewsTab) {
+    const reviewsLabel =
+      useShopReviewTabLabel && reviewSource === 'shop'
+        ? (labels.shopReviewsTabLabel ?? labels.reviewsTabLabel ?? 'Shop Reviews')
+        : (labels.reviewsTabLabel ?? 'Reviews');
+
+    tabs.push({
+      id: 'reviews',
+      label: reviewsLabel,
+      badge: String(reviewCount),
+    });
+  }
+
+  if (faqCount > 0) {
+    tabs.push({
+      id: 'faq',
+      label: labels.faqTabLabel ?? 'FAQ',
+      badge: String(faqCount),
+    });
+  }
+
+  return tabs;
+}
+
+export function resolveStandardRelatedProductsTitle(
+  block: Pick<BlockInstance, 'settings'>,
+  options?: { useScopedKeys?: boolean },
+): string | null {
+  if (options?.useScopedKeys) {
+    return resolveScopedBlockSettingText(block, 'relatedProducts', 'title');
+  }
+  return getBuilderBlockSettingText(block, 'title');
+}

package/src/storefront-google-fonts.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test';
+import { JSDOM } from 'jsdom';
+import { syncStorefrontGoogleFontStylesheets } from './storefront-google-fonts.ts';
+
+describe('syncStorefrontGoogleFontStylesheets', () => {
+  test('injects and removes managed google font stylesheets', () => {
+    const dom = new JSDOM('<!doctype html><html><head></head><body></body></html>');
+    const { document } = dom.window;
+    const originalDocument = globalThis.document;
+    // @ts-expect-error test harness replaces document
+    globalThis.document = document;
+
+    try {
+      const cleanup = syncStorefrontGoogleFontStylesheets([
+        'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap',
+      ]);
+
+      expect(
+        document.head.querySelectorAll('link[data-shoppex-storefront-google-font="true"]').length,
+      ).toBe(1);
+
+      cleanup();
+
+      expect(
+        document.head.querySelectorAll('link[data-shoppex-storefront-google-font="true"]').length,
+      ).toBe(0);
+    } finally {
+      globalThis.document = originalDocument;
+    }
+  });
+});

package/src/storefront-google-fonts.ts

@@ -0,0 +1,43 @@
+const STOREFRONT_GOOGLE_FONT_MARKER = 'data-shoppex-storefront-google-font';
+
+export function syncStorefrontGoogleFontStylesheets(hrefs: string[]): () => void {
+  if (typeof document === 'undefined') {
+    return () => {};
+  }
+
+  const nextHrefs = [...new Set(hrefs.filter((href) => href.trim().length > 0))];
+  const existing = Array.from(
+    document.head.querySelectorAll<HTMLLinkElement>(
+      `link[rel="stylesheet"][${STOREFRONT_GOOGLE_FONT_MARKER}]`,
+    ),
+  );
+
+  for (const link of existing) {
+    if (!nextHrefs.includes(link.href)) {
+      link.remove();
+    }
+  }
+
+  for (const href of nextHrefs) {
+    const alreadyPresent = Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'),
+    ).some((link) => link.href === href);
+    if (alreadyPresent) continue;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.setAttribute(STOREFRONT_GOOGLE_FONT_MARKER, 'true');
+    document.head.appendChild(link);
+  }
+
+  return () => {
+    for (const link of Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>(
+        `link[rel="stylesheet"][${STOREFRONT_GOOGLE_FONT_MARKER}]`,
+      ),
+    )) {
+      link.remove();
+    }
+  };
+}