@usequeek/theme-kit 0.1.23 → 0.1.24

package/tests/theme-strings-client.test.tsx

@@ -1,310 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it, vi } from 'vitest';
-import type { JSX, ReactNode } from 'react';
-import { StorefrontContext, StorefrontProvider, useThemeStrings } from '../provider';
-import { ThemeMount } from '../theme-mount';
-import { DefaultCartShell } from '../components/cart/default-cart-shell';
-import { defaultThemeStrings, t as translate, type ThemeStringsDictionary } from '../strings/theme-strings';
-import type { CartItem } from '../types/cart';
-import type { ThemeModule } from '../types/theme';
-import type { StorefrontConfig, VendorProfile } from '../types/vendor';
-
-const FR_STRINGS: ThemeStringsDictionary = {
-  cart: {
-    title: 'Votre panier',
-    empty: { message: 'Votre panier est vide.', browse: 'Voir les produits' },
-    summary: { title: 'Résumé de commande' },
-  },
-};
-
-function render(
-  children: ReactNode,
-  options?: { locale?: string | null; strings?: ThemeStringsDictionary | ThemeStringsDictionary[] | null },
-): string {
-  return renderToStaticMarkup(
-    <StorefrontProvider
-      vendor={{ id: 'v1', slug: 'demo-store', name: 'Demo Store' } as never}
-      config={{} as never}
-      menus={[]}
-      {...(options?.locale !== undefined ? { locale: options.locale } : {})}
-      {...(options?.strings !== undefined ? { strings: options.strings } : {})}
-    >
-      {children}
-    </StorefrontProvider>,
-  );
-}
-
-function Title(): JSX.Element {
-  const t = useThemeStrings();
-  return <h1>{t('cart.title')}</h1>;
-}
-
-describe('client surface: StorefrontProvider strings + useThemeStrings', () => {
-  it('renders the active locale through the hook', () => {
-    expect(render(<Title />, { locale: 'fr', strings: FR_STRINGS })).toContain('<h1>Votre panier</h1>');
-  });
-
-  it('falls back per key to the English default VALUE', () => {
-    // `cart.checkout.action` is absent from the FR pack: English value, never the key.
-    function Action(): JSX.Element {
-      const t = useThemeStrings();
-      return <span>{t('cart.checkout.action')}</span>;
-    }
-    const html = render(<Action />, { locale: 'fr', strings: FR_STRINGS });
-    expect(html).toContain('<span>Checkout</span>');
-    expect(html).not.toContain('cart.checkout.action');
-  });
-
-  it('is a no-op when the prop is absent (backward compat: English as today)', () => {
-    expect(render(<Title />)).toContain('<h1>Your cart</h1>');
-  });
-
-  it('matches explicit English defaults exactly (prop changes nothing when absent)', () => {
-    const implicit = render(<Title />);
-    const explicit = render(<Title />, { strings: defaultThemeStrings });
-    expect(implicit).toBe(explicit);
-  });
-
-  it('throws outside a provider, like every other kit hook', () => {
-    expect(() => renderToStaticMarkup(<Title />)).toThrow(
-      'useThemeStrings must be used within StorefrontProvider',
-    );
-  });
-});
-
-describe('client surface through ThemeMount', () => {
-  function Header(): JSX.Element {
-    const t = useThemeStrings();
-    return <header>{t('cart.title')}</header>;
-  }
-
-  const stubTheme = {
-    Layout: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-    Header,
-    Footer: () => <footer />,
-    blocks: {},
-    getHeader: () => Header,
-    getFooter: () => (() => <footer />),
-    getBlock: () => (() => null),
-    pages: {},
-    manifest: { name: 'stub', slug: 'stub', description: '', version: '0' },
-  } as unknown as ThemeModule;
-
-  it('reaches themes mounted by ThemeMount', () => {
-    const html = render(
-      <ThemeMount
-        theme={stubTheme}
-        headerProps={{ menu: [], announcement: null }}
-        footerProps={{}}
-      >
-        <p>page</p>
-      </ThemeMount>,
-      { locale: 'fr', strings: FR_STRINGS },
-    );
-    expect(html).toContain('<header>Votre panier</header>');
-  });
-});
-
-describe('manifest.strings travels with the theme', () => {
-  const MANIFEST_EN: ThemeStringsDictionary = {
-    theme: {
-      hero: { title: 'Fresh from the farm' },
-      lines: { count: { one: '{count} line', other: '{count} lines' } },
-    },
-  };
-
-  function ManifestHero(): JSX.Element {
-    const t = useThemeStrings();
-    return (
-      <header>
-        <h1>{t('theme.hero.title')}</h1>
-        <p>{t('theme.lines.count', { count: 1 })}</p>
-        <p>{t('theme.lines.count', { count: 5 })}</p>
-        <span>{t('cart.title')}</span>
-      </header>
-    );
-  }
-
-  function themeWithManifest(strings?: ThemeStringsDictionary): ThemeModule {
-    return {
-      Layout: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-      Header: ManifestHero,
-      Footer: () => <footer />,
-      blocks: {},
-      getHeader: () => ManifestHero,
-      getFooter: () => (() => <footer />),
-      getBlock: () => (() => null),
-      pages: {},
-      manifest: strings
-        ? { name: 'manifest-theme', slug: 'manifest-theme', description: '', version: '0', strings }
-        : { name: 'manifest-theme', slug: 'manifest-theme', description: '', version: '0' },
-    } as unknown as ThemeModule;
-  }
-
-  function mount(
-    theme: ThemeModule,
-    options?: { locale?: string | null; strings?: ThemeStringsDictionary | ThemeStringsDictionary[] | null },
-  ): string {
-    return render(
-      <ThemeMount theme={theme} headerProps={{ menu: [], announcement: null }} footerProps={{}}>
-        <p>page</p>
-      </ThemeMount>,
-      options,
-    );
-  }
-
-  it('(a) renders theme + kit core English with NO provider strings prop', () => {
-    const html = mount(themeWithManifest(MANIFEST_EN));
-    expect(html).toContain('<h1>Fresh from the farm</h1>');
-    expect(html).toContain('<p>1 line</p>');
-    expect(html).toContain('<p>5 lines</p>');
-    // The manifest says nothing about kit keys: kit core English still renders.
-    expect(html).toContain('<span>Your cart</span>');
-  });
-
-  it('(b) manifest beats kit core English', () => {
-    const html = mount(
-      themeWithManifest({ ...MANIFEST_EN, cart: { title: 'Theme cart title' } }),
-    );
-    expect(html).toContain('<span>Theme cart title</span>');
-    expect(html).not.toContain('<span>Your cart</span>');
-  });
-
-  it('(b) host override beats manifest', () => {
-    const html = mount(themeWithManifest({ ...MANIFEST_EN, cart: { title: 'Theme cart title' } }), {
-      strings: { cart: { title: 'Host cart title' } },
-    });
-    expect(html).toContain('<span>Host cart title</span>');
-  });
-
-  it('(b) first host dictionary wins (merchant override position)', () => {
-    const html = mount(themeWithManifest({ ...MANIFEST_EN, cart: { title: 'Theme cart title' } }), {
-      strings: [{ cart: { title: 'First' } }, { cart: { title: 'Second' } }],
-    });
-    expect(html).toContain('<span>First</span>');
-  });
-
-  it('(c) non-English host dict falls back per key to manifest English, never empty', () => {
-    const html = mount(themeWithManifest(MANIFEST_EN), {
-      locale: 'fr',
-      strings: { cart: { title: 'Votre panier' } },
-    });
-    expect(html).toContain('<span>Votre panier</span>');
-    expect(html).toContain('<h1>Fresh from the farm</h1>');
-    expect(html).not.toContain('<h1></h1>');
-  });
-
-  it('(d) manifest without strings behaves exactly as 0.1.18', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    try {
-      const html = mount(themeWithManifest());
-      // Theme key absent everywhere: empty + one dev warning, as in 0.1.18.
-      expect(html).toContain('<h1></h1>');
-      expect(warn).toHaveBeenCalledWith(expect.stringContaining('theme.hero.title'));
-      // Kit key: English default, unchanged.
-      expect(html).toContain('<span>Your cart</span>');
-    } finally {
-      warn.mockRestore();
-    }
-  });
-
-  it('(e) a hand-built context value without strings type-checks and renders kit English', () => {
-    function Probe(): JSX.Element {
-      const t = useThemeStrings();
-      return <h1>{t('cart.title')}</h1>;
-    }
-    // No `strings` key at all: this literal must satisfy StorefrontContextValue
-    // (it failed to compile while the field was required in 0.1.18).
-    const value = {
-      vendor: { id: 'v1', slug: 'demo-store', name: 'Demo Store', logo: null } as VendorProfile,
-      config: { theme: 'stub', brand: {} } as StorefrontConfig,
-      menus: [],
-      basePath: '/demo-store',
-      pagesChrome: {},
-      locale: null,
-    };
-    const html = renderToStaticMarkup(
-      <StorefrontContext.Provider value={value}>
-        <Probe />
-      </StorefrontContext.Provider>,
-    );
-    expect(html).toContain('<h1>Your cart</h1>');
-  });
-});
-
-describe('migrated DefaultCartShell (identical English output)', () => {
-  const item: CartItem = {
-    id: 'li-1',
-    product_id: 'p-1',
-    shop_id: 's-1',
-    title: 'Egusi Soup',
-    image: null,
-    unit_price: 5000,
-    quantity: 2,
-    addons: [],
-  };
-
-  const noop = (): void => {};
-
-  it('empty state renders the legacy literals with no strings prop', () => {
-    const html = render(
-      <DefaultCartShell
-        items={[]}
-        currency="NGN"
-        total={0}
-        empty
-        onIncrease={noop}
-        onDecrease={noop}
-        onRemove={noop}
-      />,
-    );
-    expect(html).toContain('Your cart</h1>');
-    expect(html).toContain('Your cart is empty.');
-    expect(html).toContain('Browse products');
-  });
-
-  it('populated state interpolates through t() with identical text', () => {
-    const html = render(
-      <DefaultCartShell
-        items={[item]}
-        currency="NGN"
-        total={10000}
-        empty={false}
-        onIncrease={noop}
-        onDecrease={noop}
-        onRemove={noop}
-      />,
-    );
-    expect(html).toContain('each</span>');
-    expect(html).toContain('aria-label="Decrease Egusi Soup"');
-    expect(html).toContain('aria-label="Increase Egusi Soup"');
-    expect(html).toContain('aria-label="Remove Egusi Soup"');
-    expect(html).toContain('Order summary');
-    expect(html).toContain('Add order note');
-    // The note textarea (with its placeholder) renders only after the toggle
-    // opens it, so its key is asserted directly: same dictionary, same output.
-    expect(translate([defaultThemeStrings], 'cart.note.toggle')).toBe('Add order note');
-    expect(translate([defaultThemeStrings], 'cart.note.placeholder')).toBe('Order instructions (optional)');
-    expect(html).toContain('Subtotal:');
-    expect(html).toContain('terms and refund policy');
-    expect(html).toContain('Continue shopping');
-  });
-
-  it('renders French when the provider carries the active locale', () => {
-    const html = render(
-      <DefaultCartShell
-        items={[]}
-        currency="NGN"
-        total={0}
-        empty
-        onIncrease={noop}
-        onDecrease={noop}
-        onRemove={noop}
-      />,
-      { locale: 'fr', strings: FR_STRINGS },
-    );
-    expect(html).toContain('Votre panier</h1>');
-    expect(html).toContain('Votre panier est vide.');
-    expect(html).toContain('Voir les produits');
-  });
-});

package/tests/theme-strings-pseudo.test.tsx

@@ -1,171 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import type { JSX, ReactNode } from 'react';
-import { describe, expect, it } from 'vitest';
-import enDefault from '../locales/en.default.json';
-import { StorefrontProvider, useThemeStrings } from '../provider';
-import { defaultThemeStrings, t, type ThemeStringsDictionary } from '../strings/theme-strings';
-import {
-  assertNoEnglishLeak,
-  findEnglishLeaks,
-  isPseudoLocalized,
-  pseudoLocalize,
-  pseudoLocalizeText,
-} from '../strings/pseudo-locale';
-
-const EN = enDefault as unknown as ThemeStringsDictionary;
-
-function render(children: ReactNode, strings: ThemeStringsDictionary | null): string {
-  return renderToStaticMarkup(
-    <StorefrontProvider
-      vendor={{ id: 'v1', slug: 'demo-store', name: 'Demo Store' } as never}
-      config={{} as never}
-      menus={[]}
-      {...(strings ? { strings } : {})}
-    >
-      {children}
-    </StorefrontProvider>,
-  );
-}
-
-function Title(): JSX.Element {
-  const t = useThemeStrings();
-  return <h1>{t('cart.title')}</h1>;
-}
-
-describe('pseudoLocalize (pure dictionary transform)', () => {
-  it('accent-maps, expands ~30% and wraps in markers', () => {
-    expect(pseudoLocalizeText('Your cart')).toBe('[!! Ÿòùŕ çàŕţ~~~ !!]');
-  });
-
-  it('preserves {placeholders} byte-for-byte and still interpolates', () => {
-    const pseudo = pseudoLocalizeText('{count} items');
-    expect(pseudo).toBe('[!! {count} ìţèṁš~~~~ !!]');
-    expect(pseudo).toContain('{count}');
-    expect(t([{ v: pseudo }], 'v', { count: 3 }, 'en')).toBe('[!! 3 ìţèṁš~~~~ !!]');
-  });
-
-  it('preserves `{{` / `}}` escapes (structure survives, literal is pseudo)', () => {
-    const pseudo = pseudoLocalizeText('a {{b}} c');
-    expect(pseudo).toContain('{{');
-    expect(pseudo).toContain('}}');
-    // Same interpolation behaviour as the source: escapes still escape.
-    expect(t([{ v: pseudo }], 'v', {}, 'en')).toBe('[!! à {ƀ} ç~~~ !!]');
-  });
-
-  it('keeps plural-map shape (one key, every form pseudo)', () => {
-    const dict: ThemeStringsDictionary = {
-      items: { count: { one: '{count} item', other: '{count} items' } },
-    };
-    const pseudo = pseudoLocalize(dict);
-    expect(Object.keys((pseudo['items'] as Record<string, unknown>)['count'] as object)).toEqual([
-      'one',
-      'other',
-    ]);
-    const forms = (pseudo['items'] as { count: { one: string; other: string } }).count;
-    expect(forms.one).toContain('{count}');
-    expect(isPseudoLocalized(forms.one)).toBe(true);
-    expect(isPseudoLocalized(forms.other)).toBe(true);
-    // t() still selects forms from the pseudo dictionary.
-    expect(t([pseudo], 'items.count', { count: 1 }, 'en')).toContain('1');
-    expect(t([pseudo], 'items.count', { count: 5 }, 'en')).toContain('5');
-  });
-
-  it('recurses nested objects and never touches keys (incl. flat dotted keys)', () => {
-    const dict = {
-      cart: { title: 'Your cart', empty: { message: 'Your cart is empty.' } },
-      'flat.key': 'Flat value',
-    } as unknown as ThemeStringsDictionary;
-    const pseudo = pseudoLocalize(dict);
-    expect(Object.keys(pseudo).sort()).toEqual(['cart', 'flat.key']);
-    expect(Object.keys(pseudo['cart'] as object).sort()).toEqual(['empty', 'title']);
-    expect(t([pseudo], 'flat.key')).toBe(pseudoLocalizeText('Flat value'));
-  });
-
-  it('leaves empty values empty (an intentional empty renders no node)', () => {
-    expect(pseudoLocalizeText('')).toBe('');
-    const pseudo = pseudoLocalize({ hidden: { label: '' } });
-    expect((pseudo['hidden'] as { label: string }).label).toBe('');
-  });
-
-  it('expands very long values by ~30% (1000-char budget value)', () => {
-    const long = 'a'.repeat(1000);
-    const pseudo = pseudoLocalizeText(long);
-    const core = pseudo.slice('[!! '.length, -' !!]'.length);
-    expect(core.length).toBe(1000 + Math.round(1000 * 0.3));
-  });
-
-  it('leaves unicode (non-Latin, emoji) intact, wrapped', () => {
-    const pseudo = pseudoLocalizeText('こんにちは世界 🛒');
-    expect(pseudo).toContain('こんにちは世界');
-    expect(pseudo).toContain('🛒');
-    expect(isPseudoLocalized(pseudo)).toBe(true);
-  });
-
-  it('rtl option wraps the core in U+202B … U+202C', () => {
-    const pseudo = pseudoLocalizeText('Your cart', { rtl: true });
-    expect(pseudo.includes('\u202B')).toBe(true);
-    expect(pseudo.includes('\u202C')).toBe(true);
-    expect(isPseudoLocalized(pseudo)).toBe(true);
-  });
-
-  it('custom markers are honoured by the scan', () => {
-    const pseudo = pseudoLocalizeText('Your cart', { prefix: '‹', suffix: '›' });
-    expect(pseudo.startsWith('‹')).toBe(true);
-    expect(isPseudoLocalized(pseudo)).toBe(false);
-    expect(isPseudoLocalized(pseudo, { prefix: '‹', suffix: '›' })).toBe(true);
-    expect(findEnglishLeaks(`<h1>${pseudo}</h1>`, { pseudo: { prefix: '‹', suffix: '›' } })).toEqual(
-      [],
-    );
-  });
-});
-
-describe('English leak scan (reusable theme-test primitive)', () => {
-  it('a fully pseudo render is clean', () => {
-    const html = render(<Title />, pseudoLocalize(EN));
-    expect(html).not.toContain('Your cart');
-    expect(findEnglishLeaks(html)).toEqual([]);
-    expect(() => assertNoEnglishLeak(html)).not.toThrow();
-  });
-
-  it('a hard-coded English string is reported (the control that proves the scan fails)', () => {
-    function Leaky(): JSX.Element {
-      const t = useThemeStrings();
-      return (
-        <main>
-          <h1>{t('cart.title')}</h1>
-          <p>Hard-coded checkout copy</p>
-        </main>
-      );
-    }
-    const html = render(<Leaky />, pseudoLocalize(EN));
-    expect(findEnglishLeaks(html)).toEqual(['Hard-coded checkout copy']);
-    expect(() => assertNoEnglishLeak(html)).toThrow(/Hard-coded checkout copy/);
-  });
-
-  it('flags hard-coded user-visible attributes (aria-label, placeholder)', () => {
-    const html = `<button aria-label="Close dialog">×</button><input placeholder="Search products" />`;
-    expect(findEnglishLeaks(html)).toEqual(['Close dialog', 'Search products']);
-    expect(findEnglishLeaks(html, { includeAttributes: false })).toEqual([]);
-  });
-
-  it('ignores numbers, symbols and pseudo-wrapped attributes', () => {
-    const html = render(<Title />, pseudoLocalize(EN));
-    expect(findEnglishLeaks(`<span>₦5,000</span><span>2 / 5</span>${html}`)).toEqual([]);
-  });
-
-  it('allowlists brand names and codes', () => {
-    const html = `<footer><span>${pseudoLocalizeText('Powered by')}</span><span>Queek</span></footer>`;
-    expect(findEnglishLeaks(html)).toEqual(['Queek']);
-    expect(findEnglishLeaks(html, { allowlist: ['Queek'] })).toEqual([]);
-    expect(findEnglishLeaks(html, { allowlist: [/^Q/] })).toEqual([]);
-  });
-
-  it('pseudo of the real English default keeps every key (renamed-key drift fails here)', () => {
-    const pseudo = pseudoLocalize(EN);
-    expect(Object.keys(pseudo).sort()).toEqual(Object.keys(EN).sort());
-    // Spot values still resolve through t() — a changed English default that
-    // was not rebuilt into pseudo expectations fails loudly, never silently.
-    expect(t([pseudo], 'cart.title')).toBe(pseudoLocalizeText('Your cart'));
-    expect(t([defaultThemeStrings], 'cart.title')).toBe('Your cart');
-  });
-});

package/tests/theme-strings-typed.test.tsx

@@ -1,97 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import type { JSX } from 'react';
-import { describe, expect, it } from 'vitest';
-import enDefault from '../locales/en.default.json';
-import {
-  createThemeT,
-  defaultThemeStrings,
-  t,
-  type ThemeStringKey,
-  type ThemeStringsDictionary,
-} from '../strings/theme-strings';
-import { StorefrontProvider, useThemeStrings } from '../provider';
-
-/** Small theme-shaped dictionary exercising nesting, plurals and flat keys. */
-const THEME_EN = {
-  cart: {
-    title: 'Your cart',
-    empty: { message: 'Your cart is empty.' },
-  },
-  items: {
-    count: { one: '{count} item', other: '{count} items' },
-  },
-  'flat.key': 'Flat value',
-  greet: 'Hello {name}!',
-} as const;
-
-describe('typed keys: createThemeT (additive, opt-in)', () => {
-  it('delegates to the wrapped t (values, vars, plurals identical)', () => {
-    const dict = THEME_EN as unknown as ThemeStringsDictionary;
-    const tt = createThemeT<typeof THEME_EN>((key, vars, locale) => t([dict], key, vars, locale));
-
-    expect(tt('cart.title')).toBe('Your cart');
-    expect(tt('greet', { name: 'Ada' })).toBe('Hello Ada!');
-    expect(tt('items.count', { count: 1 })).toBe('1 item');
-    expect(tt('items.count', { count: 5 })).toBe('5 items');
-    expect(tt('flat.key')).toBe('Flat value');
-  });
-
-  it('wraps the client useThemeStrings() hook result', () => {
-    function Title(): JSX.Element {
-      const tUntyped = useThemeStrings();
-      const tt = createThemeT<typeof THEME_EN>(tUntyped);
-      return <h1>{tt('cart.title')}</h1>;
-    }
-    const html = renderToStaticMarkup(
-      <StorefrontProvider
-        vendor={{ id: 'v1', slug: 's', name: 'S' } as never}
-        config={{} as never}
-        menus={[]}
-        strings={THEME_EN as unknown as ThemeStringsDictionary}
-      >
-        <Title />
-      </StorefrontProvider>,
-    );
-    expect(html).toContain('<h1>Your cart</h1>');
-  });
-
-  it('accepts every real en.default.json key (valid keys pass)', () => {
-    const tt = createThemeT<typeof enDefault>((key, vars, locale) =>
-      t([defaultThemeStrings], key, vars, locale),
-    );
-    // A sample across nesting depths — each must compile AND render English.
-    expect(tt('cart.title')).toBe('Your cart');
-    expect(tt('cart.empty.message')).toBe('Your cart is empty.');
-    expect(tt('checkout.contact.label')).toBe('Contact');
-    expect(tt('auth.login.title')).toBe('Sign in');
-    expect(tt('blog.share.copy')).toBe('Copy link');
-  });
-
-  it('existing untyped t(key) callers keep compiling (key: string)', () => {
-    const anyKey: string = `cart.title`;
-    // A dynamic string — not a literal — still flows through the untyped fn.
-    expect(t([defaultThemeStrings], anyKey)).toBe('Your cart');
-    // A broad dictionary collapses the typed helper back to `string` (untyped).
-    const loose = createThemeT<ThemeStringsDictionary>((key, vars, locale) =>
-      t([defaultThemeStrings], key, vars, locale),
-    );
-    expect(loose(anyKey)).toBe('Your cart');
-  });
-
-  it('drifts with the dictionary: the union is exactly the flattened keys', () => {
-    // Compile-time check (positive direction; the negative direction — typos
-    // fail — lives in tests/theme-typed-keys.fixture.ts via @ts-expect-error
-    // so `npm run typecheck` stays green).
-    const keys: Array<ThemeStringKey<typeof THEME_EN>> = [
-      'cart.title',
-      'cart.empty.message',
-      'items.count',
-      'flat.key',
-      'greet',
-    ];
-    expect(keys).toHaveLength(5);
-    // Renaming/removing a key above breaks this file AND the fixture: a
-    // renamed English key is a contract change, not a silent drift.
-    expect(keys).toContain('cart.title');
-  });
-});