create-nextblock 0.2.78 → 0.8.1

package/templates/nextblock-template/components/GlobalSearch.tsx

@@ -0,0 +1,557 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import {
+  ArrowRight,
+  Clock3,
+  FileText,
+  Loader2,
+  Newspaper,
+  Package,
+  Search,
+} from 'lucide-react';
+import {
+  Button,
+} from '@nextblock-cms/ui';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@nextblock-cms/ui';
+import {
+  Input,
+} from '@nextblock-cms/ui';
+import { cn, useTranslations } from '@nextblock-cms/utils';
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type KeyboardEvent,
+} from 'react';
+import { useGlobalSearch } from '../hooks/useGlobalSearch';
+import type {
+  GlobalSearchFilter,
+  GlobalSearchResult,
+  GlobalSearchResultType,
+} from '../lib/search/types';
+
+const RECENT_SEARCH_RESULTS_KEY = 'nextblock_recent_search_results';
+
+const fallbackTranslations: Record<string, Record<string, string>> = {
+  en: {
+    'global_search.trigger': 'Search',
+    'global_search.title': 'Search',
+    'global_search.description': 'Search published pages, posts, and products.',
+    'global_search.placeholder': 'Search...',
+    'global_search.filter_all': 'All',
+    'global_search.filter_pages': 'Pages',
+    'global_search.filter_posts': 'Posts',
+    'global_search.filter_products': 'Products',
+    'global_search.result_page': 'Page',
+    'global_search.result_post': 'Post',
+    'global_search.result_product': 'Product',
+    'global_search.recent': 'Recent',
+    'global_search.error_title': 'Search is unavailable.',
+    'global_search.error_description': 'Please try again in a moment.',
+    'global_search.empty_title': 'No results found.',
+    'global_search.empty_description': 'Try another search term.',
+  },
+  fr: {
+    'global_search.trigger': 'Rechercher',
+    'global_search.title': 'Rechercher',
+    'global_search.description': 'Rechercher dans les pages, articles et produits publies.',
+    'global_search.placeholder': 'Rechercher...',
+    'global_search.filter_all': 'Tout',
+    'global_search.filter_pages': 'Pages',
+    'global_search.filter_posts': 'Articles',
+    'global_search.filter_products': 'Produits',
+    'global_search.result_page': 'Page',
+    'global_search.result_post': 'Article',
+    'global_search.result_product': 'Produit',
+    'global_search.recent': 'Recents',
+    'global_search.error_title': 'La recherche est indisponible.',
+    'global_search.error_description': 'Veuillez reessayer dans un instant.',
+    'global_search.empty_title': 'Aucun resultat trouve.',
+    'global_search.empty_description': 'Essayez un autre terme de recherche.',
+  },
+};
+
+type TriggerVariant = 'desktop' | 'mobile';
+
+type SearchTypeConfig = {
+  value: GlobalSearchFilter;
+  labelKey: string;
+  icon: ComponentType<{ className?: string }>;
+};
+
+const typeConfigs: SearchTypeConfig[] = [
+  { value: 'all', labelKey: 'global_search.filter_all', icon: Search },
+  { value: 'page', labelKey: 'global_search.filter_pages', icon: FileText },
+  { value: 'post', labelKey: 'global_search.filter_posts', icon: Newspaper },
+  { value: 'product', labelKey: 'global_search.filter_products', icon: Package },
+];
+
+const resultTypeConfig: Record<
+  GlobalSearchResultType,
+  {
+    labelKey: string;
+    icon: ComponentType<{ className?: string }>;
+    tileClassName: string;
+    badgeClassName: string;
+  }
+> = {
+  page: {
+    labelKey: 'global_search.result_page',
+    icon: FileText,
+    tileClassName: 'bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-200',
+    badgeClassName:
+      'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-200',
+  },
+  post: {
+    labelKey: 'global_search.result_post',
+    icon: Newspaper,
+    tileClassName: 'bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-200',
+    badgeClassName:
+      'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/20 dark:bg-violet-500/10 dark:text-violet-200',
+  },
+  product: {
+    labelKey: 'global_search.result_product',
+    icon: Package,
+    tileClassName:
+      'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200',
+    badgeClassName:
+      'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-200',
+  },
+};
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function Highlight({
+  text,
+  query,
+  className,
+}: {
+  text: string;
+  query: string;
+  className?: string;
+}) {
+  const terms = query
+    .trim()
+    .split(/\s+/)
+    .filter((term) => term.length >= 2)
+    .slice(0, 6);
+
+  if (terms.length === 0) {
+    return <span className={className}>{text}</span>;
+  }
+
+  const pattern = new RegExp(`(${terms.map(escapeRegExp).join('|')})`, 'gi');
+  const parts = text.split(pattern);
+
+  return (
+    <span className={className}>
+      {parts.map((part, index) => {
+        if (!part) return null;
+        const isMatch = terms.some((term) => term.toLowerCase() === part.toLowerCase());
+
+        return isMatch ? (
+          <mark
+            key={`${part}-${index}`}
+            className="rounded-sm bg-primary/10 px-0.5 text-foreground"
+          >
+            {part}
+          </mark>
+        ) : (
+          <span key={`${part}-${index}`}>{part}</span>
+        );
+      })}
+    </span>
+  );
+}
+
+function loadRecentResults() {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(RECENT_SEARCH_RESULTS_KEY) || '[]');
+    return Array.isArray(parsed) ? (parsed as GlobalSearchResult[]).slice(0, 5) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentResult(result: GlobalSearchResult) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const nextResults = [
+    result,
+    ...loadRecentResults().filter((item) => item.href !== result.href),
+  ].slice(0, 5);
+
+  window.localStorage.setItem(RECENT_SEARCH_RESULTS_KEY, JSON.stringify(nextResults));
+}
+
+function ResultThumbnail({ result }: { result: GlobalSearchResult }) {
+  const config = resultTypeConfig[result.type];
+  const Icon = config.icon;
+
+  if (result.imageUrl) {
+    return (
+      <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border bg-muted">
+        <Image
+          src={result.imageUrl}
+          alt=""
+          fill
+          sizes="48px"
+          className="object-cover"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex h-12 w-12 shrink-0 items-center justify-center rounded-md',
+        config.tileClassName
+      )}
+    >
+      <Icon className="h-5 w-5" />
+    </div>
+  );
+}
+
+function SearchResultRow({
+  result,
+  query,
+  isActive,
+  onSelect,
+  resultTypeLabel,
+}: {
+  result: GlobalSearchResult;
+  query: string;
+  isActive: boolean;
+  onSelect: (result: GlobalSearchResult) => void;
+  resultTypeLabel: string;
+}) {
+  const config = resultTypeConfig[result.type];
+  const supportingMeta = result.meta.sku || result.meta.label || result.locale?.toUpperCase();
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'group flex w-full items-center gap-3 rounded-md border border-transparent p-3 text-left transition-colors',
+        isActive
+          ? 'border-border bg-accent text-accent-foreground'
+          : 'hover:bg-accent/70 hover:text-accent-foreground'
+      )}
+      onClick={() => onSelect(result)}
+    >
+      <ResultThumbnail result={result} />
+      <span className="min-w-0 flex-1">
+        <span className="mb-1 flex min-w-0 flex-wrap items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+            <Highlight text={result.title} query={query} />
+          </span>
+          <span
+            className={cn(
+              'shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-5',
+              config.badgeClassName
+            )}
+          >
+            {resultTypeLabel}
+          </span>
+        </span>
+        <span className="block min-w-0 truncate text-xs text-muted-foreground">
+          <Highlight
+            text={result.snippet || result.description || result.href}
+            query={query}
+          />
+        </span>
+        <span className="mt-1 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+          <span className="truncate">{result.href}</span>
+          {supportingMeta ? (
+            <>
+              <span aria-hidden="true">/</span>
+              <span className="shrink-0">{supportingMeta}</span>
+            </>
+          ) : null}
+        </span>
+      </span>
+      <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+    </button>
+  );
+}
+
+function LoadingRows() {
+  return (
+    <div className="space-y-2 p-2">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={`global-search-loading-row-${index}`}
+          className="flex h-[88px] items-center gap-3 rounded-md p-3"
+        >
+          <div className="h-12 w-12 rounded-md bg-muted" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="h-4 w-2/3 rounded bg-muted" />
+            <div className="h-3 w-full rounded bg-muted" />
+            <div className="h-3 w-1/2 rounded bg-muted" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function GlobalSearch({
+  isEcommerceActive,
+  variant,
+  openOnMount = false,
+}: {
+  isEcommerceActive: boolean;
+  variant: TriggerVariant;
+  openOnMount?: boolean;
+}) {
+  const router = useRouter();
+  const { t, lang } = useTranslations();
+  const [open, setOpen] = useState(openOnMount);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [recentResults, setRecentResults] = useState<GlobalSearchResult[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {
+    query,
+    setQuery,
+    filter,
+    setFilter,
+    results,
+    counts,
+    status,
+    canSearch,
+    isLoading,
+  } = useGlobalSearch({ limit: 12 });
+
+  const availableTypeConfigs = useMemo(
+    () => typeConfigs.filter((config) => config.value !== 'product' || isEcommerceActive),
+    [isEcommerceActive]
+  );
+  const displayedResults = canSearch ? results : recentResults;
+  const showRecent = !canSearch && recentResults.length > 0;
+  const tx = (key: string) => {
+    const translated = t(key);
+    if (translated !== key) {
+      return translated;
+    }
+
+    return fallbackTranslations[lang]?.[key] ?? fallbackTranslations.en[key] ?? key;
+  };
+
+  useEffect(() => {
+    if (openOnMount) {
+      setOpen(true);
+    }
+  }, [openOnMount]);
+
+  useEffect(() => {
+    setRecentResults(loadRecentResults());
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault();
+        setOpen((current) => !current);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const focusId = window.setTimeout(() => inputRef.current?.focus(), 50);
+    return () => window.clearTimeout(focusId);
+  }, [open]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [filter, query, results.length, open]);
+
+  const handleSelect = (result: GlobalSearchResult) => {
+    saveRecentResult(result);
+    setRecentResults(loadRecentResults());
+    setOpen(false);
+    router.push(result.href);
+  };
+
+  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (displayedResults.length === 0) {
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((current) => (current + 1) % displayedResults.length);
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((current) =>
+        current === 0 ? displayedResults.length - 1 : current - 1
+      );
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleSelect(displayedResults[activeIndex] || displayedResults[0]);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Button
+        type="button"
+        variant="outline"
+        size={variant === 'mobile' ? 'icon' : 'default'}
+        className={cn(
+          'shrink-0 border-foreground/15 bg-background/70',
+          variant === 'desktop' && 'h-9 gap-2 px-3 text-sm',
+          variant === 'mobile' && 'h-10 w-10'
+        )}
+        aria-label={tx('global_search.trigger')}
+        aria-keyshortcuts="Control+K Meta+K"
+        onClick={() => setOpen(true)}
+      >
+        <Search className="h-4 w-4" />
+        {variant === 'desktop' ? <span>{tx('global_search.trigger')}</span> : null}
+      </Button>
+
+      <DialogContent className="flex h-[min(820px,calc(100dvh-2rem))] max-w-4xl flex-col overflow-hidden rounded-lg p-0">
+        <DialogTitle className="sr-only">{tx('global_search.title')}</DialogTitle>
+        <DialogDescription className="sr-only">
+          {tx('global_search.description')}
+        </DialogDescription>
+
+        <div className="border-b border-border px-4 py-3">
+          <div className="flex items-center gap-3">
+            <Search className="h-5 w-5 shrink-0 text-muted-foreground" />
+            <Input
+              ref={inputRef}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={handleInputKeyDown}
+              placeholder={tx('global_search.placeholder')}
+              className="h-12 border-0 bg-transparent px-0 text-base shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              autoComplete="off"
+              spellCheck={false}
+            />
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+            ) : null}
+          </div>
+
+          <div className="mt-3 flex gap-2 overflow-x-auto pb-1">
+            {availableTypeConfigs.map((config) => {
+              const Icon = config.icon;
+              const count = counts[config.value] ?? 0;
+
+              return (
+                <button
+                  key={config.value}
+                  type="button"
+                  className={cn(
+                    'inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-3 text-xs font-medium transition-colors',
+                    filter === config.value
+                      ? 'border-primary/40 bg-primary/10 text-foreground'
+                      : 'border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground'
+                  )}
+                  onClick={() => setFilter(config.value)}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  <span>{tx(config.labelKey)}</span>
+                  {canSearch && count > 0 ? (
+                    <span className="rounded-full bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                      {count}
+                    </span>
+                  ) : null}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-3">
+          {isLoading ? <LoadingRows /> : null}
+
+          {!isLoading && status === 'error' ? (
+            <div className="px-6 py-10 text-center">
+              <p className="text-sm font-medium text-foreground">
+                {tx('global_search.error_title')}
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {tx('global_search.error_description')}
+              </p>
+            </div>
+          ) : null}
+
+          {!isLoading && status !== 'error' && displayedResults.length > 0 ? (
+            <div className="space-y-1">
+              {showRecent ? (
+                <div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  <Clock3 className="h-3.5 w-3.5" />
+                  {tx('global_search.recent')}
+                </div>
+              ) : null}
+              {displayedResults.map((result, index) => (
+                <SearchResultRow
+                  key={`${result.type}-${result.id}`}
+                  result={result}
+                  query={query}
+                  isActive={index === activeIndex}
+                  onSelect={handleSelect}
+                  resultTypeLabel={tx(resultTypeConfig[result.type].labelKey)}
+                />
+              ))}
+            </div>
+          ) : null}
+
+          {!isLoading && status !== 'error' && canSearch && results.length === 0 ? (
+            <div className="px-6 py-12 text-center">
+              <p className="text-sm font-medium text-foreground">
+                {tx('global_search.empty_title')}
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {tx('global_search.empty_description')}
+              </p>
+            </div>
+          ) : null}
+
+          {!isLoading && status === 'idle' && recentResults.length === 0 ? (
+            <div className="px-6 py-12 text-center">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                <Search className="h-5 w-5" />
+              </div>
+              <p className="text-sm font-medium text-foreground">
+                {tx('global_search.title')}
+              </p>
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/nextblock-template/components/Header.tsx

@@ -1,42 +1,50 @@
-// components/Header.tsx
-import type { Database } from '@nextblock-cms/db';
-import HeaderAuth from './header-auth';
-import LanguageSwitcher from './LanguageSwitcher';
-import ResponsiveNav from './ResponsiveNav';
-
-type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
-type Logo =
-  Database['public']['Tables']['logos']['Row'] & {
-    media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null;
-  };
-
-interface HeaderProps {
-  navItems: NavigationItem[];
-  canAccessCms: boolean;
-  logo: Logo | null;
-  currentPageData?: { slug: string; translation_group_id: string | null };
-  siteTitle: string;
-}
-
-export default function Header({
-  navItems,
-  canAccessCms,
-  logo,
-  currentPageData,
-  siteTitle,
-}: HeaderProps) {
-  return (
-    <ResponsiveNav
-      homeLinkHref="/"
-      navItems={navItems}
-      canAccessCms={canAccessCms}
-      cmsDashboardLinkHref="/cms/dashboard"
-      headerAuthComponent={<HeaderAuth />}
-      languageSwitcherComponent={
-        <LanguageSwitcher currentPageData={currentPageData} />
-      }
-      logo={logo}
-      siteTitle={siteTitle}
-    />
-  );
+// components/Header.tsx
+import type { Database } from '@nextblock-cms/db';
+import HeaderAuth from './header-auth';
+import LanguageSwitcher from './LanguageSwitcher';
+import ResponsiveNav from './ResponsiveNav';
+import { CartIcon } from '@nextblock-cms/ecommerce/components/CartIcon';
+import { CurrencySwitcher } from '@nextblock-cms/ecommerce/components/CurrencySwitcher';
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+type Logo =
+  Database['public']['Tables']['logos']['Row'] & {
+    media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null;
+  };
+
+interface HeaderProps {
+  navItems: NavigationItem[];
+  canAccessCms: boolean;
+  isDraftModeEnabled: boolean;
+  logo: Logo | null;
+  currentPageData?: { slug: string; translation_group_id: string | null };
+  siteTitle: string;
+  isEcommerceActive?: boolean;
+}
+
+export default function Header({
+  navItems,
+  canAccessCms,
+  isDraftModeEnabled,
+  logo,
+  currentPageData,
+  siteTitle,
+  isEcommerceActive = false,
+}: HeaderProps) {
+  return (
+    <ResponsiveNav
+      homeLinkHref="/"
+      navItems={navItems}
+      canAccessCms={canAccessCms}
+      cmsDashboardLinkHref="/cms/dashboard"
+      isDraftModeEnabled={isDraftModeEnabled}
+      renderHeaderAuth={() => <HeaderAuth />}
+      renderLanguageSwitcher={() => <LanguageSwitcher currentPageData={currentPageData} />}
+      renderCurrencySwitcher={isEcommerceActive ? () => <CurrencySwitcher /> : undefined}
+      logo={logo}
+      siteTitle={siteTitle}
+      renderCartIcon={isEcommerceActive ? () => <CartIcon /> : undefined}
+      isEcommerceActive={isEcommerceActive}
+    />
+  );
 }