@shoppexio/builder-runtime 0.1.0 → 0.1.2

package/src/search-bar-settings.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  buildSearchShellStyle,
+  resolveSearchBarSettings,
+  resolveSearchColor,
+  resolveSearchMaxWidth,
+} from './search-bar-settings';
+
+describe('resolveSearchBarSettings', () => {
+  test('hero variant prefers hero settings and falls back to navigation', () => {
+    const resolved = resolveSearchBarSettings({
+      variant: 'hero',
+      headerSettings: {
+        'navigation.search.placeholder': 'Header placeholder',
+        'navigation.search.background': '#111111',
+      },
+      heroValues: {
+        'hero.search.placeholder': 'Hero placeholder',
+        'hero.search.maxWidth': 'lg',
+      },
+    });
+
+    expect(resolved.placeholder).toBe('Hero placeholder');
+    expect(resolved.backgroundColor).toBe('#111111');
+    expect(resolved.maxWidth).toBe('36rem');
+    expect(resolved.showShortcut).toBe(true);
+    expect(resolved.showInHero).toBe(true);
+  });
+
+  test('navigation variant reads header settings only', () => {
+    const resolved = resolveSearchBarSettings({
+      variant: 'navigation',
+      headerSettings: {
+        'navigation.search.placeholder': 'Find products',
+        'navigation.search.borderRadius': 24,
+      },
+      heroValues: {
+        'hero.search.placeholder': 'Ignored in navigation mode',
+      },
+    });
+
+    expect(resolved.placeholder).toBe('Find products');
+    expect(resolved.borderRadiusPx).toBe(24);
+  });
+});
+
+describe('search shell helpers', () => {
+  test('resolveSearchColor normalizes hex values', () => {
+    expect(resolveSearchColor('f97316')).toBe('#f97316');
+    expect(resolveSearchColor('not-a-color')).toBeUndefined();
+  });
+
+  test('resolveSearchMaxWidth maps preset keys', () => {
+    expect(resolveSearchMaxWidth('full')).toBe('100%');
+  });
+
+  test('buildSearchShellStyle returns only overridden properties', () => {
+    expect(
+      buildSearchShellStyle({
+        backgroundColor: '#101010',
+        borderColor: '#333333',
+        borderRadiusPx: 999,
+      }),
+    ).toEqual({
+      backgroundColor: '#101010',
+      borderColor: '#333333',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: '999px',
+    });
+  });
+});

package/src/search-bar-settings.ts

@@ -0,0 +1,176 @@
+import type { BuilderSettings } from '@shoppex/builder-contracts';
+
+export const SEARCH_BAR_MAX_WIDTH: Record<string, string> = {
+  sm: '20rem',
+  md: '28rem',
+  lg: '36rem',
+  full: '100%',
+};
+
+export type ResolvedSearchBarSettings = {
+  placeholder: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadiusPx?: number;
+  maxWidth: string;
+  showShortcut: boolean;
+  showInHero: boolean;
+};
+
+export function getNavigationHeaderSettings(
+  settings: BuilderSettings,
+): Record<string, unknown> {
+  const block = settings.theme.layout.navigation?.blocks.find(
+    (candidate) => candidate.type === 'header',
+  );
+  return block?.settings ?? {};
+}
+
+export function readSetting(
+  sources: Array<Record<string, unknown> | undefined>,
+  path: string,
+): unknown {
+  for (const source of sources) {
+    if (!source) continue;
+    if (!Object.prototype.hasOwnProperty.call(source, path)) continue;
+    const value = source[path];
+    if (value !== undefined && value !== null && value !== '') {
+      return value;
+    }
+  }
+  return undefined;
+}
+
+export function isValidHexColor(value: unknown): value is string {
+  if (typeof value !== 'string' || !value.trim()) return false;
+  return /^#?[a-f\d]{3}(?:[a-f\d]{3})?(?:[a-f\d]{2})?$/i.test(value.trim());
+}
+
+export function normalizeHexColor(value: string): string {
+  const trimmed = value.trim();
+  return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+}
+
+export function resolveSearchColor(value: unknown): string | undefined {
+  if (!isValidHexColor(value)) return undefined;
+  return normalizeHexColor(value);
+}
+
+export function resolveSearchBorderRadius(value: unknown): number | undefined {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return undefined;
+  return Math.max(0, Math.round(value));
+}
+
+export function resolveSearchMaxWidth(value: unknown, fallback = 'md'): string {
+  if (typeof value === 'string' && value in SEARCH_BAR_MAX_WIDTH) {
+    return SEARCH_BAR_MAX_WIDTH[value]!;
+  }
+  return SEARCH_BAR_MAX_WIDTH[fallback] ?? SEARCH_BAR_MAX_WIDTH.md!;
+}
+
+export function resolveSearchBoolean(value: unknown, fallback: boolean): boolean {
+  if (typeof value === 'boolean') return value;
+  return fallback;
+}
+
+export function resolveSearchPlaceholder(
+  value: unknown,
+  fallback: string,
+): string {
+  return typeof value === 'string' && value.trim() ? value : fallback;
+}
+
+export function resolveSearchBarSettings(input: {
+  variant: 'hero' | 'navigation';
+  heroValues: Record<string, unknown>;
+  headerSettings: Record<string, unknown>;
+}): ResolvedSearchBarSettings {
+  const navSources = [input.headerSettings];
+  const heroSources = [input.heroValues, input.headerSettings];
+
+  if (input.variant === 'hero') {
+    return {
+      placeholder: resolveSearchPlaceholder(
+        readSetting(heroSources, 'hero.search.placeholder') ??
+          readSetting(navSources, 'navigation.search.placeholder'),
+        'Search products…',
+      ),
+      backgroundColor: resolveSearchColor(
+        readSetting(heroSources, 'hero.search.background') ??
+          readSetting(navSources, 'navigation.search.background'),
+      ),
+      borderColor: resolveSearchColor(
+        readSetting(heroSources, 'hero.search.borderColor') ??
+          readSetting(navSources, 'navigation.search.borderColor'),
+      ),
+      borderRadiusPx: resolveSearchBorderRadius(
+        readSetting(heroSources, 'hero.search.borderRadius') ??
+          readSetting(navSources, 'navigation.search.borderRadius'),
+      ),
+      maxWidth: resolveSearchMaxWidth(
+        readSetting(heroSources, 'hero.search.maxWidth'),
+        'md',
+      ),
+      showShortcut: resolveSearchBoolean(
+        readSetting(heroSources, 'hero.search.showShortcut'),
+        true,
+      ),
+      showInHero: resolveSearchBoolean(
+        readSetting(heroSources, 'hero.search.show'),
+        true,
+      ),
+    };
+  }
+
+  return {
+    placeholder: resolveSearchPlaceholder(
+      readSetting(navSources, 'navigation.search.placeholder'),
+      'Search products…',
+    ),
+    backgroundColor: resolveSearchColor(
+      readSetting(navSources, 'navigation.search.background'),
+    ),
+    borderColor: resolveSearchColor(
+      readSetting(navSources, 'navigation.search.borderColor'),
+    ),
+    borderRadiusPx: resolveSearchBorderRadius(
+      readSetting(navSources, 'navigation.search.borderRadius'),
+    ),
+    maxWidth: SEARCH_BAR_MAX_WIDTH.md!,
+    showShortcut: true,
+    showInHero: true,
+  };
+}
+
+export function buildSearchShellStyle(
+  settings: Pick<
+    ResolvedSearchBarSettings,
+    'backgroundColor' | 'borderColor' | 'borderRadiusPx'
+  >,
+): {
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderStyle?: 'solid';
+  borderRadius?: string;
+} | undefined {
+  const style: {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: 'solid';
+    borderRadius?: string;
+  } = {};
+  if (settings.backgroundColor) {
+    style.backgroundColor = settings.backgroundColor;
+  }
+  if (settings.borderColor) {
+    style.borderColor = settings.borderColor;
+    style.borderWidth = '1px';
+    style.borderStyle = 'solid';
+  }
+  if (settings.borderRadiusPx !== undefined) {
+    style.borderRadius = `${settings.borderRadiusPx}px`;
+  }
+  return Object.keys(style).length > 0 ? style : undefined;
+}

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');
+  });
+});