@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.21

package/app-template/src/views/header/navbar.tsx

@@ -1,181 +1,115 @@
 'use client';
 
-import { useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { setOpenedMenu } from '@akinon/next/redux/reducers/header';
+import { openSearch, setOpenedMenu } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
 import { MenuItemType } from '@akinon/next/types';
 
 import { Icon, Link } from '@theme/components';
 import Search from './search';
+import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import {
-  useNavbarMenuSettings,
-  NavbarMenuSettings
-} from './use-navbar-menu';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  NavbarMenuProvider,
-  useNavbarMenuDesigner,
-  NAVBAR_MENU_PLACEHOLDER_ID,
-  NAVBAR_MENU_SECTION_ID,
-  NAVBAR_MENU_BLOCK
-} from './navbar-menu-context';
 
 interface NavbarProps {
   menu: MenuItemType[];
-  initialNavSettings?: NavbarMenuSettings;
 }
 
-interface NavbarContentProps {
-  menu: MenuItemType[];
-  initialNavSettings?: NavbarMenuSettings;
-}
-
-function NavbarContent({ menu, initialNavSettings }: NavbarContentProps) {
+export default function Navbar(props: NavbarProps) {
+  const { menu } = props;
   const dispatch = useAppDispatch();
   const { isSearchOpen, openedMenu } = useAppSelector((state) => state.header);
 
-  const navSettings = useNavbarMenuSettings(initialNavSettings);
-  const { isDesigner, selectedBlockId } = useNavbarMenuDesigner();
-  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
-
-  const { handleClick } = useDesignerFeatures({
-    blockId: NAVBAR_MENU_BLOCK.id,
-    placeholderId: NAVBAR_MENU_PLACEHOLDER_ID,
-    sectionId: NAVBAR_MENU_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: NAVBAR_MENU_BLOCK.id,
-      type: NAVBAR_MENU_BLOCK.type,
-      label: NAVBAR_MENU_BLOCK.label
-    }
-  });
-
-  const isSelected = selectedBlockId === NAVBAR_MENU_BLOCK.id;
-
-  const getMenuItemStyle = (isHovered: boolean): React.CSSProperties => {
-    const baseStyle: React.CSSProperties = {
-      fontSize: navSettings.fontSize,
-      color: navSettings.color,
-      fontWeight: navSettings.fontWeight as React.CSSProperties['fontWeight'],
-      textTransform: navSettings.textTransform as React.CSSProperties['textTransform'],
-      letterSpacing: navSettings.letterSpacing,
-      transition: 'color 0.2s ease'
-    };
-
-    if (isHovered && navSettings.hoverColor) {
-      return { ...baseStyle, color: navSettings.hoverColor };
-    }
-
-    return baseStyle;
-  };
+  const { t } = useLocalization();
 
   return (
     <>
-      <nav
-        onClick={isDesigner ? handleClick : undefined}
-        className={clsx(
-          isDesigner && 'cursor-pointer',
-          isSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
-        )}
-      >
-        <ul className="hidden flex-wrap items-center justify-center gap-x-8 gap-y-4 justify-items-center sm:flex">
-          {menu.map((item, index) => {
-            if (item.label == null) {
-              return null;
-            }
-
-            const hasChildren = Boolean(item.children?.length);
-            const isItemHovered = hoveredItemIndex === index;
-
-            return (
-              <li
-                key={index}
-                className="flex items-center h-full group py-7"
-                onMouseEnter={() => {
-                  dispatch(setOpenedMenu(item.pk));
-                  setHoveredItemIndex(index);
-                }}
-                onMouseLeave={() => {
-                  dispatch(setOpenedMenu(null));
-                  setHoveredItemIndex(null);
-                }}
-              >
-                <Link
-                  href={item.url}
-                  className="flex items-center"
-                  style={getMenuItemStyle(isItemHovered)}
-                  data-testid="navbar-category"
+      <nav className="relative flex-wrap items-center justify-center hidden header-grid-area-nav sm:flex justify-items-center">
+        <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 mt-8 justify-items-center">
+          {menu.map(
+            (item, index) =>
+              item.label != null && (
+                <li
+                  key={index}
+                  className="flex items-center h-full group"
+                  onMouseEnter={() => {
+                    dispatch(setOpenedMenu(item.pk));
+                  }}
+                  onMouseLeave={() => {
+                    dispatch(setOpenedMenu(null));
+                  }}
                 >
-                  <span>{item.label}</span>
-                  {hasChildren && (
-                    <Icon
-                      name="chevron-down"
-                      size={20}
+                  <Link
+                    href={item.url}
+                    className="flex items-center p-2.5 text-sm uppercase transition hover:text-secondary"
+                    data-testid="navbar-category"
+                  >
+                    {item.label}
+                  </Link>
+
+                  {/*
+                     Performance Note:
+                    The submenu content in this Navbar component is rendered based on hover-triggered state changes.
+                    This approach is adopted for performance optimization reasons. It ensures that:
+                    1. Submenu data is only loaded and rendered when necessary, reducing initial load times and resource usage.
+                    2. Unnecessary renders are avoided, enhancing the responsiveness and efficiency of the navigation bar.
+                    Please be cautious about altering this logic, as changes could negatively impact the performance and user experience of the Navbar.
+                  */}
+
+                  {openedMenu === item.pk && item.children.length > 0 && (
+                    <div
                       className={clsx(
-                        'ml-2 transition-transform duration-200 ease-in-out group-hover:rotate-180',
+                        [
+                          'container',
+                          'absolute',
+                          'bottom-0',
+                          'left-0',
+                          'z-30',
+                          'flex',
+                          'justify-between',
+                          'invisible',
+                          'opacity-0',
+                          'bg-gray',
+                          'border-x-2',
+                          'border-gray',
+                          'pt-20',
+                          'pb-16',
+                          'transform',
+                          'translate-y-full',
+                          'transition'
+                        ],
+                        [
+                          'before:left-0',
+                          'before:-translate-x-full',
+                          'before:content-[""]',
+                          'before:w-1/2',
+                          'before:h-full',
+                          'before:block',
+                          'before:absolute',
+                          'before:top-0',
+                          'before:transform',
+                          'before:bg-gray'
+                        ],
+                        [
+                          'after:right-0',
+                          'after:translate-x-full',
+                          'after:content-[""]',
+                          'after:w-1/2',
+                          'after:h-full',
+                          'after:block',
+                          'after:absolute',
+                          'after:top-0',
+                          'after:transform',
+                          'after:bg-gray'
+                        ],
                         {
-                          'rotate-180': openedMenu === item.pk
+                          '!visible !opacity-100 delay-500':
+                            openedMenu === item.pk
                         }
                       )}
-                    />
-                  )}
-                </Link>
-
-                {openedMenu === item.pk && hasChildren && (
-                  <div
-                    className={clsx(
-                      [
-                        'absolute',
-                        'bottom-0',
-                        'left-0',
-                        'z-30',
-                        'w-full',
-                        'invisible',
-                        'opacity-0',
-                        'bg-gray',
-                        'border-x-2',
-                        'border-gray',
-                        'pt-20',
-                        'pb-16',
-                        'transform',
-                        'translate-y-full',
-                        'transition'
-                      ],
-                      [
-                        'before:left-0',
-                        'before:-translate-x-full',
-                        'before:content-[""]',
-                        'before:w-1/2',
-                        'before:h-full',
-                        'before:block',
-                        'before:absolute',
-                        'before:top-0',
-                        'before:transform',
-                        'before:bg-gray'
-                      ],
-                      [
-                        'after:right-0',
-                        'after:translate-x-full',
-                        'after:content-[""]',
-                        'after:w-1/2',
-                        'after:h-full',
-                        'after:block',
-                        'after:absolute',
-                        'after:top-0',
-                        'after:transform',
-                        'after:bg-gray'
-                      ],
-                      {
-                        '!visible !opacity-100 delay-500': openedMenu === item.pk
-                      }
-                    )}
-                  >
-                    <div className="container mx-auto flex justify-between">
+                    >
                       <div className="flex space-x-8 lg:space-x-0">
-                        {item.children?.map((child, childIndex) => (
-                          <div key={childIndex}>
+                        {item.children.map((child, index) => (
+                          <div key={index}>
                             <Link
                               onClick={() => {
                                 dispatch(setOpenedMenu(null));
@@ -185,10 +119,10 @@ function NavbarContent({ menu, initialNavSettings }: NavbarContentProps) {
                             >
                               {child.label}
                             </Link>
-                            {child.children && child.children.length > 0 && (
+                            {child.children && (
                               <ul>
-                                {child.children?.map((grandChild, grandChildIndex) => (
-                                  <li key={grandChildIndex}>
+                                {child.children.map((grandChild, index) => (
+                                  <li key={index}>
                                     <Link
                                       onClick={() => {
                                         dispatch(setOpenedMenu(null));
@@ -205,24 +139,25 @@ function NavbarContent({ menu, initialNavSettings }: NavbarContentProps) {
                           </div>
                         ))}
                       </div>
-                      {item.extra_context?.attributes?.images && (
+                      {item.extra_context.attributes.images && (
                         <div className="flex">
                           {item.extra_context.attributes.images.map(
-                            (image, imageIndex) =>
-                              image.kwargs?.value?.image && (
-                                <Link href={image.value?.url} key={imageIndex}>
+                            (image, index) =>
+                              image.kwargs.value.image && (
+                                <Link href={image.value.url} key={index}>
+                                  {/* TODO: There is no image. It should be checked. May need fix. */}
                                   <Image
                                     src={image.kwargs.value.image?.url}
-                                    alt={image.value?.title}
-                                    title={image.value?.title}
+                                    alt={image.value.title}
+                                    title={image.value.title}
                                     width={265}
                                     height={323}
                                   />
                                   <span className="block mt-4">
-                                    {image.value?.title}
+                                    {image.value.title}
                                   </span>
                                   <span className="inline-block mt-2 text-xs uppercase border-b border-gray-500">
-                                    {image.value?.link_text}
+                                    {image.value.link_text}
                                   </span>
                                 </Link>
                               )
@@ -230,24 +165,22 @@ function NavbarContent({ menu, initialNavSettings }: NavbarContentProps) {
                         </div>
                       )}
                     </div>
-                  </div>
-                )}
-              </li>
-            );
-          })}
+                  )}
+                </li>
+              )
+          )}
+          <li>
+            <button
+              onClick={() => dispatch(openSearch())}
+              className="flex items-center gap-2 p-2 text-sm uppercase transition hover:text-secondary cursor-pointer"
+              data-testid="header-nav-search"
+            >
+              <Icon name="search" size={24} /> {t('common.navbar.search')}
+            </button>
+          </li>
         </ul>
       </nav>
       {isSearchOpen && <Search />}
     </>
   );
 }
-
-export default function Navbar({ menu, initialNavSettings }: NavbarProps) {
-  return (
-    <NavbarMenuProvider>
-      <NavbarContent menu={menu} initialNavSettings={initialNavSettings} />
-    </NavbarMenuProvider>
-  );
-}
-
-export type { NavbarMenuSettings };

package/app-template/src/views/header/search/index.tsx

@@ -1,20 +1,16 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeSearch } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
 
 import { Icon } from '@theme/components';
-import { SearchInput } from './search-input';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
-import { useDebounce, useLocalization, useRouter } from '@akinon/next/hooks';
-import { useAutocompleteQuery } from '@akinon/next/data/client/misc';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
-const MINIMUM_SEARCH_LENGTH = 3;
-
 export default function Search() {
   const { t } = useLocalization();
   const router = useRouter();
@@ -23,24 +19,6 @@ export default function Search() {
   const [searchText, setSearchText] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const debouncedSearchText = useDebounce(searchText, 400);
-  const { currentData } = useAutocompleteQuery(debouncedSearchText, {
-    refetchOnMountOrArgChange: true,
-    skip: debouncedSearchText.length < MINIMUM_SEARCH_LENGTH
-  });
-
-  const categoryLabel = useMemo(() => {
-    const firstCategory = currentData?.groups.find(
-      (group) => group.suggestion_type === 'Category'
-    )?.entries?.[0];
-
-    if (firstCategory?.label) {
-      return firstCategory.label;
-    }
-
-    return t('common.search.all_products');
-  }, [currentData, t]);
-
   useEffect(() => {
     if (isSearchOpen) {
       inputRef.current?.focus();
@@ -64,19 +42,11 @@ export default function Search() {
     };
   }, [isSearchOpen, dispatch]);
 
-  const handleSearch = () => {
-    if (searchText.trim() !== '') {
-      router.push(
-        `${ROUTES.LIST}/?search_text=${encodeURIComponent(searchText)}`
-      );
-      dispatch(closeSearch());
-    }
-  };
-
   return (
     <>
       <div
         className={clsx(
+          // 177px is the height of the header
           'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
           isSearchOpen && searchText
             ? 'visible opacity-100'
@@ -85,53 +55,44 @@ export default function Search() {
         role="button"
         onClick={() => dispatch(closeSearch())}
       />
-
       <div
         className={clsx(
-          'fixed inset-0 lg:absolute lg:inset-auto lg:left-0 lg:bottom-0 lg:translate-y-full lg:w-screen lg:h-auto',
-          'overflow-auto h-screen lg:max-h-[calc(100vh-177px)] bg-white p-6 z-40 transition duration-500',
+          'absolute overflow-auto max-h-screen md:max-h-[calc(100vh-177px)] bg-white p-6 left-0 lg:bottom-0 lg:translate-y-full z-40 w-screen transition duration-500',
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <button
-          className="absolute top-4 right-4 p-2 lg:hidden z-50"
-          onClick={() => dispatch(closeSearch())}
-          aria-label="Close search"
-        >
-          <Icon name="close" size={16} className="text-black" />
-        </button>
-
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12 pt-8 lg:pt-0">
-          <div className="flex flex-col items-center gap-8">
-            <h1 className="text-2xl text-black-750 font-normal text-center">
-              {t('common.search.results_title') || 'Search results'}
-            </h1>
-
-            <div className="w-full max-w-[468px]">
-              <SearchInput
-                startAdornment={
-                  <PluginModule
-                    component={Component.HeaderImageSearchFeature}
-                    props={{
-                      enableTextSearch: true,
-                      isEnabled: false,
-                      settings: {
-                        iconNames: {
-                          imageSearchButton: 'hamburger'
-                        }
-                      }
-                    }}
-                  />
-                }
-                ref={inputRef}
-                label={categoryLabel}
+        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
+          <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
+            <span className="text-xl lg:text-2xl">
+              {t('common.search.results_for')}
+            </span>
+            <div className="flex items-center">
+              <input
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleSearch();
+                  if (e.key === 'Enter' && searchText.trim() !== '') {
+                    router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
+                  }
                 }}
-                onSearchClick={handleSearch}
-                placeholder={t('common.search.placeholder') || 'Search...'}
+                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
+                placeholder={t('common.search.placeholder')}
+                ref={inputRef}
+              />
+
+              <PluginModule
+                component={Component.HeaderImageSearchFeature}
+                props={{
+                  enableTextSearch: true,
+                  isEnabled: true
+                }}
+              />
+
+              <Icon
+                name="close"
+                size={14}
+                onClick={() => dispatch(closeSearch())}
+                className="cursor-pointer"
               />
             </div>
           </div>