@usequeek/theme-kit 0.1.22 → 0.1.24

package/tests/fixtures/external-theme.tsx

@@ -1,85 +0,0 @@
-// A real theme, written the way an external developer would, against the
-// PUBLISHED package only — no access to any host app.
-import type { JSX } from 'react';
-import type { ThemeModule, HeaderProps, FooterProps } from '@usequeek/theme-kit/types/theme';
-import type { Product } from '@usequeek/theme-kit/types/product';
-import { useCart } from '@usequeek/theme-kit/hooks/use-cart';
-import { useProducts } from '@usequeek/theme-kit/hooks/use-products';
-import { useStorefront } from '@usequeek/theme-kit/provider';
-import { useHref } from '@usequeek/theme-kit/hooks/use-href';
-import { formatMoney } from '@usequeek/theme-kit/utils/format';
-import { Image } from '@usequeek/theme-kit/components/image';
-import { LanguageSwitcher } from '@usequeek/theme-kit/components/language-switcher';
-import { useLocales } from '@usequeek/theme-kit/hooks/use-locales';
-import type { StoreLocale } from '@usequeek/theme-kit/utils/locale-switch';
-import { ThemeMount } from '@usequeek/theme-kit/theme-mount';
-
-export function Header({ menu, showCart }: HeaderProps): JSX.Element {
-  const { vendor } = useStorefront();
-  const { items } = useCart();
-  const href = useHref();
-
-  return (
-    <header>
-      <a href={href('/')}>{vendor?.name}</a>
-      {menu.map((item) => <a key={item.label} href={item.ref ?? '#'}>{item.label}</a>)}
-      {showCart ? <span>{items.length}</span> : null}
-      <LanguageSwitcher className="header-language" />
-    </header>
-  );
-}
-
-export function Footer({ copyright }: FooterProps): JSX.Element {
-  const { hasMultiple, locales, hrefFor } = useLocales();
-  const label = (l: StoreLocale): string => l.native_name;
-
-  return (
-    <footer>
-      {copyright}
-      <LanguageSwitcher variant="inline-list" showCode />
-      <LanguageSwitcher>
-        {({ active, displayName }) => <span>{displayName(active)}</span>}
-      </LanguageSwitcher>
-      {hasMultiple ? locales.map((l) => <a key={l.locale} href={hrefFor(l)}>{label(l)}</a>) : null}
-    </footer>
-  );
-}
-
-export function ProductCard({ product }: { product: Product }): JSX.Element {
-  const { addProduct } = useCart();
-
-  return (
-    <article>
-      <Image src={product.media.thumbnail ?? ''} alt={product.title} />
-      <h3>{product.title}</h3>
-      <span>{formatMoney(product.pricing.sale_amount, product.currency)}</span>
-      <button type="button" onClick={() => addProduct(product, 1)}>Add to cart</button>
-    </article>
-  );
-}
-
-export function Grid(): JSX.Element {
-  const { products, isLoading } = useProducts();
-  if (isLoading) return <p>Loading…</p>;
-
-  return <div>{products.map((p) => <ProductCard key={p.id} product={p} />)}</div>;
-}
-
-export const theme: Pick<ThemeModule, 'Header' | 'Footer'> = { Header, Footer };
-
-/**
- * Mounting the theme — the thing an external developer could not do before
- * ThemeMount existed, because the component that does it lived in the
- * storefront app rather than the package.
- */
-export function Preview({ theme: mod, children }: { theme: ThemeModule; children: JSX.Element }): JSX.Element {
-  return (
-    <ThemeMount
-      theme={mod}
-      headerProps={{ announcement: null, logo: null, menu: [], showSearch: true, showCart: true, showAccount: true, showOffers: true }}
-      footerProps={{ copyright: '© Demo Store' }}
-    >
-      {children}
-    </ThemeMount>
-  );
-}

package/tests/image-loading.test.tsx

@@ -1,31 +0,0 @@
-import type { JSX } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
-import { Image } from '../components/image';
-
-/**
- * Card images are lazy by default. Server-rendered product grids (the /shop
- * prefetch, streamed product blocks) otherwise made React preload the first
- * ~10 card images and fetch all of them at once, racing the page's CSS — /shop
- * first paint 1.8 s → 2.9 s on Slow 4G. Heroes and everything else unchanged.
- */
-describe('Image loading defaults', () => {
-  const html = (el: JSX.Element) => renderToStaticMarkup(el);
-
-  it('lazy-loads card images by default', () => {
-    expect(html(<Image src="/p.jpg" alt="" intent="card" />)).toContain('loading="lazy"');
-    expect(html(<Image src="/p.jpg" alt="" intent="card2x" />)).toContain('loading="lazy"');
-  });
-
-  it('respects an explicit choice, and fetchPriority="high"', () => {
-    expect(html(<Image src="/p.jpg" alt="" intent="card" loading="eager" />)).toContain('loading="eager"');
-    expect(html(<Image src="/p.jpg" alt="" intent="card" fetchPriority="high" />)).not.toContain('loading=');
-  });
-
-  it('leaves heroes, avatars and untyped images as they were', () => {
-    for (const intent of ['hero', 'avatar', 'modal', 'raw'] as const) {
-      expect(html(<Image src="/p.jpg" alt="" intent={intent} />)).not.toContain('loading=');
-    }
-    expect(html(<Image src="/p.jpg" alt="" />)).not.toContain('loading=');
-  });
-});

package/tests/language-switcher.test.tsx

@@ -1,350 +0,0 @@
-// @vitest-environment jsdom
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { act, type ReactNode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-const nav = vi.hoisted(() => ({ pathname: '/', push: vi.fn() }));
-vi.mock('next/navigation', () => ({
-  usePathname: () => nav.pathname,
-  useRouter: () => ({ push: nav.push, replace: vi.fn(), back: vi.fn(), refresh: vi.fn() }),
-}));
-
-import { LanguageSwitcher } from '../components/language-switcher';
-import { useLocales, type LocalesState } from '../hooks/use-locales';
-import { StorefrontContext, StorefrontProvider } from '../provider';
-import type { ThemeManifest } from '../types/theme';
-import type { StoreLocaleInput } from '../utils/locale-switch';
-
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-const LOCALES: StoreLocaleInput[] = [
-  { locale: 'en', name: 'English', native_name: 'English', is_primary: true, is_default: true, path_prefix: '', hreflang: 'en', html_lang: 'en', dir: 'ltr' },
-  { locale: 'fr', name: 'French', native_name: 'Français', is_primary: false, is_default: false, path_prefix: 'fr', hreflang: 'fr', html_lang: 'fr', dir: 'ltr' },
-  { locale: 'ar', name: 'Arabic', native_name: 'العربية', is_primary: false, is_default: false, path_prefix: 'ar', hreflang: 'ar', html_lang: 'ar', dir: 'rtl' },
-];
-
-interface ProviderOptions {
-  locales?: StoreLocaleInput[] | null;
-  locale?: string | null;
-  basePath?: string;
-  strings?: Record<string, unknown> | null;
-}
-
-function Provider({ options = {}, children }: { options?: ProviderOptions; children: ReactNode }) {
-  return (
-    <StorefrontProvider
-      vendor={{ id: 'v1', slug: 'acme', name: 'Acme' } as never}
-      config={{} as never}
-      menus={[]}
-      basePath={options.basePath ?? ''}
-      locale={options.locale ?? null}
-      {...(options.locales !== undefined ? { locales: options.locales } : {})}
-      {...(options.strings ? { strings: options.strings as never } : {})}
-    >
-      {children}
-    </StorefrontProvider>
-  );
-}
-
-let container: HTMLDivElement;
-let root: Root;
-
-function mount(node: ReactNode, options?: ProviderOptions): void {
-  act(() => {
-    root.render(<Provider options={options}>{node}</Provider>);
-  });
-}
-
-beforeEach(() => {
-  nav.pathname = '/shop';
-  nav.push.mockClear();
-  window.history.replaceState(null, '', '/shop');
-  container = document.createElement('div');
-  document.body.appendChild(container);
-  root = createRoot(container);
-});
-
-afterEach(() => {
-  act(() => root.unmount());
-  container.remove();
-});
-
-describe('useLocales', () => {
-  function capture(options?: ProviderOptions): { current: LocalesState } {
-    const ref = {} as { current: LocalesState };
-    function Probe() {
-      ref.current = useLocales();
-      return null;
-    }
-    mount(<Probe />, options);
-    return ref;
-  }
-
-  it('reports a single-language state when no locales are passed', () => {
-    const state = capture();
-    expect(state.current.hasMultiple).toBe(false);
-    expect(state.current.locales).toEqual([]);
-    expect(state.current.active.locale).toBe('en');
-    expect(state.current.defaultLocale.path_prefix).toBe('');
-  });
-
-  it('reports a single-language state for one locale', () => {
-    const state = capture({ locales: [LOCALES[0]!] });
-    expect(state.current.hasMultiple).toBe(false);
-    expect(state.current.locales).toHaveLength(1);
-  });
-
-  it('does not throw outside a provider', () => {
-    const ref = {} as { current: LocalesState };
-    function Probe() {
-      ref.current = useLocales();
-      return null;
-    }
-    act(() => root.render(<Probe />));
-    expect(ref.current.hasMultiple).toBe(false);
-  });
-
-  it('exposes locales, default and the active language from the request locale', () => {
-    const state = capture({ locales: LOCALES, locale: 'fr', basePath: '/fr' });
-    expect(state.current.hasMultiple).toBe(true);
-    expect(state.current.locales.map((l) => l.locale)).toEqual(['en', 'fr', 'ar']);
-    expect(state.current.defaultLocale.locale).toBe('en');
-    expect(state.current.active.locale).toBe('fr');
-  });
-
-  it('builds hrefFor from the pathname and picks up the query and hash after mount', () => {
-    nav.pathname = '/fr/shop';
-    window.history.replaceState(null, '', '/fr/shop?sort=new#top');
-    const state = capture({ locales: LOCALES, locale: 'fr', basePath: '/fr' });
-    expect(state.current.hrefFor('en')).toBe('/shop?sort=new#top');
-    expect(state.current.hrefFor('ar')).toBe('/ar/shop?sort=new#top');
-    expect(state.current.hrefFor(state.current.locales[1]!)).toBe('/fr/shop?sort=new#top');
-    // Unknown code: stays on the current page.
-    expect(state.current.hrefFor('xx')).toBe('/fr/shop?sort=new#top');
-  });
-
-  it('switchTo pushes the live URL and ignores the active or an unknown language', () => {
-    const state = capture({ locales: LOCALES });
-    act(() => window.history.replaceState(null, '', '/shop?page=3'));
-    act(() => state.current.switchTo('fr'));
-    expect(nav.push).toHaveBeenCalledWith('/fr/shop?page=3');
-    nav.push.mockClear();
-    act(() => state.current.switchTo('en'));
-    act(() => state.current.switchTo('xx'));
-    expect(nav.push).not.toHaveBeenCalled();
-  });
-});
-
-describe('LanguageSwitcher', () => {
-  /** What the switcher put on the page: the provider's brand wrapper stays, its content must be empty. */
-  const rendered = () => (container.querySelector('[data-brand-root]') ?? container).innerHTML;
-  const selectOf = () => container.querySelector('select') as HTMLSelectElement;
-
-  it('renders nothing with one language, none, or outside a storefront', () => {
-    mount(<LanguageSwitcher />);
-    expect(rendered()).toBe('');
-    mount(<LanguageSwitcher />, { locales: [LOCALES[0]!] });
-    expect(rendered()).toBe('');
-    act(() => root.render(<LanguageSwitcher />));
-    expect(rendered()).toBe('');
-  });
-
-  it('renders nothing on the server for a single language, and the control for several', () => {
-    const html = (locales?: StoreLocaleInput[]) =>
-      renderToStaticMarkup(
-        <Provider options={{ locales }}>
-          <LanguageSwitcher />
-        </Provider>,
-      );
-    expect(html()).not.toContain('qn-lang');
-    expect(html([LOCALES[0]!])).not.toContain('qn-lang');
-    expect(html(LOCALES)).toContain('data-qn-language-switcher');
-  });
-
-  it('renders a labelled native select with every language and the active one selected', () => {
-    mount(<LanguageSwitcher />, { locales: LOCALES, locale: 'fr', basePath: '/fr' });
-    const group = container.querySelector('[data-qn-language-switcher]')!;
-    expect(group.getAttribute('role')).toBe('group');
-    expect(group.getAttribute('aria-label')).toBe('Language');
-    expect(selectOf().getAttribute('aria-label')).toBe('Language: French');
-    expect(selectOf().value).toBe('fr');
-    const options = [...container.querySelectorAll('option')];
-    expect(options.map((o) => o.textContent)).toEqual(['English', 'Français', 'العربية']);
-    expect(options.map((o) => o.getAttribute('lang'))).toEqual(['en', 'fr', 'ar']);
-    expect(options[2]!.getAttribute('dir')).toBe('rtl');
-    expect(options[0]!.getAttribute('dir')).toBe('ltr');
-  });
-
-  it('navigates when the selection changes (keyboard or pointer)', () => {
-    window.history.replaceState(null, '', '/shop?sort=new');
-    mount(<LanguageSwitcher />, { locales: LOCALES });
-    act(() => {
-      selectOf().value = 'fr';
-      selectOf().dispatchEvent(new Event('change', { bubbles: true }));
-    });
-    expect(nav.push).toHaveBeenCalledWith('/fr/shop?sort=new');
-  });
-
-  it('goes back to the root path when the default language is chosen', () => {
-    nav.pathname = '/ar/products/mug';
-    mount(<LanguageSwitcher />, { locales: LOCALES, locale: 'ar', basePath: '/ar' });
-    act(() => {
-      selectOf().value = 'en';
-      selectOf().dispatchEvent(new Event('change', { bubbles: true }));
-    });
-    expect(nav.push).toHaveBeenCalledWith('/products/mug');
-  });
-
-  it('honours showCode and showNativeName, and className', () => {
-    mount(<LanguageSwitcher className="in-header" showCode showNativeName={false} />, { locales: LOCALES });
-    expect([...container.querySelectorAll('option')].map((o) => o.textContent)).toEqual([
-      'English · EN',
-      'French · FR',
-      'Arabic · AR',
-    ]);
-    expect(container.querySelector('[data-qn-language-switcher]')!.className).toBe('qn-lang qn-lang--select in-header');
-  });
-
-  it('takes its labels from the theme strings', () => {
-    mount(<LanguageSwitcher />, {
-      locales: LOCALES,
-      strings: { language: { label: 'Langue', named: 'Langue : {name}' } },
-    });
-    expect(container.querySelector('[role="group"]')!.getAttribute('aria-label')).toBe('Langue');
-    expect(selectOf().getAttribute('aria-label')).toBe('Langue : English');
-  });
-
-  it('renders the inline list with links, the current language marked, and wraps in a nav', () => {
-    window.history.replaceState(null, '', '/shop?sort=new');
-    mount(<LanguageSwitcher variant="inline-list" />, { locales: LOCALES, locale: null });
-    const nav_ = container.querySelector('nav')!;
-    expect(nav_.getAttribute('aria-label')).toBe('Language');
-    const links = [...container.querySelectorAll('a')];
-    expect(links.map((a) => a.getAttribute('href'))).toEqual(['/shop?sort=new', '/fr/shop?sort=new', '/ar/shop?sort=new']);
-    expect(links.map((a) => a.getAttribute('aria-current'))).toEqual(['true', null, null]);
-    expect(links[0]!.getAttribute('aria-label')).toBe('Language: English');
-    expect(links[1]!.getAttribute('lang')).toBe('fr');
-    expect(links[1]!.getAttribute('hreflang')).toBe('fr');
-  });
-
-  it('inline-list: a plain click switches with the live URL, a modified click is left alone', () => {
-    mount(<LanguageSwitcher variant="inline-list" />, { locales: LOCALES });
-    const fr = [...container.querySelectorAll('a')][1]!;
-    act(() => {
-      fr.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 }));
-    });
-    expect(nav.push).toHaveBeenCalledWith('/fr/shop');
-    nav.push.mockClear();
-    // jsdom cannot navigate: swallow the default action it would otherwise try.
-    const swallow = (event: Event) => event.preventDefault();
-    document.addEventListener('click', swallow);
-    const modified = new MouseEvent('click', { bubbles: true, cancelable: true, button: 0, metaKey: true });
-    act(() => {
-      fr.dispatchEvent(modified);
-    });
-    document.removeEventListener('click', swallow);
-    expect(nav.push).not.toHaveBeenCalled();
-  });
-
-  it('hands the state to a render-prop and renders only what it returns', () => {
-    const seen: string[] = [];
-    mount(
-      <LanguageSwitcher>
-        {(state) => (
-          <ul data-testid="custom">
-            {state.locales.map((l) => {
-              seen.push(state.labelFor(l));
-              return (
-                <li key={l.locale}>
-                  <button type="button" onClick={() => state.switchTo(l)}>
-                    {state.displayName(l)}
-                  </button>
-                  <a href={state.hrefFor(l)}>{state.label}</a>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </LanguageSwitcher>,
-      { locales: LOCALES },
-    );
-    expect(container.querySelector('[data-qn-language-switcher]')).toBeNull();
-    expect(container.querySelector('select')).toBeNull();
-    expect(seen).toEqual(['Language: English', 'Language: French', 'Language: Arabic']);
-    act(() => {
-      (container.querySelectorAll('button')[1] as HTMLButtonElement).click();
-    });
-    expect(nav.push).toHaveBeenCalledWith('/fr/shop');
-  });
-
-  it('the render-prop is not called for a single language', () => {
-    const children = vi.fn(() => <p>custom</p>);
-    mount(<LanguageSwitcher>{children}</LanguageSwitcher>, { locales: [LOCALES[0]!] });
-    expect(children).not.toHaveBeenCalled();
-    expect(rendered()).toBe('');
-  });
-
-  it('keeps the same markup on the server and on first client render (no hydration mismatch)', () => {
-    window.history.replaceState(null, '', '/shop?sort=new');
-    const tree = (
-      <Provider options={{ locales: LOCALES }}>
-        <LanguageSwitcher variant="inline-list" />
-      </Provider>
-    );
-    const server = renderToStaticMarkup(tree);
-    expect(server).toContain('href="/fr/shop"');
-    expect(server).not.toContain('sort=new');
-  });
-});
-
-describe('LanguageSwitcher styling', () => {
-  const css = readFileSync(join(__dirname, '..', 'components', 'language-switcher.css'), 'utf8');
-
-  it('uses logical properties only (right-to-left safe)', () => {
-    expect(css).not.toMatch(/(^|[\s{;])(left|right|margin-left|margin-right|padding-left|padding-right|border-left|border-right)\s*:/m);
-    expect(css).not.toMatch(/text-align:\s*(left|right)/);
-  });
-
-  it('styles only through --qn-* tokens, each with a fallback', () => {
-    const tokens = [...css.matchAll(/var\((--[a-z0-9-]+)/g)].map((m) => m[1]!);
-    expect(tokens.length).toBeGreaterThan(0);
-    expect(tokens.filter((t) => !t.startsWith('--qn-'))).toEqual([]);
-    expect(css).not.toMatch(/var\(--qn-[a-z0-9-]+\)/);
-  });
-});
-
-describe('provider', () => {
-  it('leaves the context untouched when no locales are passed (backward compatible)', () => {
-    let seen: unknown;
-    function Probe() {
-      seen = (globalThis as never as { __ctx?: unknown }).__ctx;
-      return null;
-    }
-    act(() =>
-      root.render(
-        <StorefrontProvider vendor={{ slug: 'acme' } as never} config={{} as never} menus={[]}>
-          <StorefrontContext.Consumer>
-            {(value) => {
-              (globalThis as never as { __ctx?: unknown }).__ctx = value;
-              return <Probe />;
-            }}
-          </StorefrontContext.Consumer>
-        </StorefrontProvider>,
-      ),
-    );
-    expect((seen as { locales: unknown[] }).locales).toEqual([]);
-    delete (globalThis as never as { __ctx?: unknown }).__ctx;
-  });
-});
-
-describe('theme manifest', () => {
-  it("declares the theme places the switcher with languageSwitcher: 'theme'", () => {
-    const field: Pick<ThemeManifest, 'languageSwitcher'> = { languageSwitcher: 'theme' };
-    const none: Pick<ThemeManifest, 'languageSwitcher'> = {};
-    expect(field.languageSwitcher).toBe('theme');
-    expect(none.languageSwitcher).toBeUndefined();
-  });
-});

package/tests/list-pagination.test.tsx

@@ -1,71 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { StorefrontContext } from '../provider';
-import { BlogPagination } from '../components/blog/pagination';
-import type { Pagination } from '../types/page';
-
-vi.mock('next/headers', () => ({
-  headers: async () => new Headers({ host: 'demo-store.usequeek.com' }),
-}));
-
-/**
- * Storefront lists answer `{data, has_more, next_cursor}` with no totals, page
- * counts or page URLs (prev/next + "Page N", no COUNT query). The kit's
- * readers must walk on `has_more` alone and label the page they asked for.
- */
-describe('storefront list walk state (has_more, no totals)', () => {
-  afterEach(() => vi.unstubAllGlobals());
-
-  it('fetchCollectionProducts reads has_more/next_cursor top-level and labels the page it asked for', async () => {
-    const fetchMock = vi.fn(async (url: string) => ({
-      ok: true,
-      json: async () =>
-        url.includes('/collections/new-season/products')
-          ? { status: 'success', data: [], has_more: true, next_cursor: 'eyJ2IjoxfQ', meta: { collection: { slug: 'new-season' } } }
-          : { status: 'success', data: [{ id: 'c1', slug: 'new-season', name: 'New season' }] },
-    }));
-    vi.stubGlobal('fetch', fetchMock);
-    const { fetchCollectionProducts } = await import('../api/collections');
-
-    const page3 = await fetchCollectionProducts('demo-store', 'new-season', { page: 3, perPage: 20 });
-    expect(page3.pagination).toEqual({ current_page: 3, per_page: 20, has_more: true, next_cursor: 'eyJ2IjoxfQ' });
-    const productsCall = fetchMock.mock.calls.map(([url]) => String(url)).find((url) => url.includes('/products'));
-    expect(productsCall).toContain('page=3');
-    expect(productsCall).toContain('per_page=20');
-  });
-
-  it('treats a response with no has_more as the last page (never follows legacy links)', async () => {
-    vi.stubGlobal('fetch', vi.fn(async () => ({
-      ok: true,
-      json: async () => ({ status: 'success', data: [], links: { next: 'https://api/x?page=2' }, meta: { current_page: 1, last_page: 4 } }),
-    })));
-    const { fetchCollectionProducts } = await import('../api/collections');
-
-    const page = await fetchCollectionProducts('demo-store', 'new-season');
-    expect(page.pagination).toEqual({ current_page: 1, per_page: undefined, has_more: false, next_cursor: null });
-  });
-
-  const renderPager = (pagination: Pagination, category?: string): string =>
-    renderToStaticMarkup(
-      <StorefrontContext.Provider value={{ vendor: { id: 'v1', slug: 'demo-store' }, basePath: '/demo-store' } as never}>
-        <BlogPagination pagination={pagination} category={category} />
-      </StorefrontContext.Provider>,
-    );
-
-  it('BlogPagination: "Page N" with Next enabled by has_more and no "of M"', () => {
-    const html = renderPager({ current_page: 2, per_page: 12, has_more: true }, 'news');
-    expect(html).toContain('Page 2');
-    expect(html).not.toMatch(/Page 2 of/);
-    expect(html).toContain('rel="prev" href="/demo-store/blog?category=news"');
-    expect(html).toContain('rel="next" href="/demo-store/blog?category=news&amp;page=3"');
-  });
-
-  it('BlogPagination: last page disables Next; a lone first page renders nothing', () => {
-    const last = renderPager({ current_page: 4, has_more: false });
-    expect(last).toContain('Page 4');
-    expect(last).not.toContain('rel="next"');
-    expect(last).toContain('rel="prev"');
-
-    expect(renderPager({ current_page: 1, has_more: false })).toBe('');
-  });
-});