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

package/app-template/src/views/category/category-banner.tsx

@@ -1,34 +1,15 @@
 'use client';
 
 import { Category } from '@akinon/next/types';
-import { Image } from '@akinon/next/components/image';
 
-export const CategoryBanner = (
-  props: Category['attributes']['category_banner']
-) => {
+export const CategoryBanner = (props: Category['attributes']['banner']) => {
   if (Object.keys(props).length === 0) {
     return null;
   }
 
   return (
-    <>
-      <Image
-        src={props.kwargs.value.image_mobile.url}
-        alt="Category Banner"
-        aspectRatio={768 / 375}
-        sizes="768px"
-        fill
-        className="block md:hidden"
-      />
-
-      <Image
-        src={props.kwargs.value.image_desktop.url}
-        alt="Category Banner"
-        aspectRatio={1370 / 400}
-        sizes="1370px"
-        fill
-        className="hidden md:block"
-      />
-    </>
+    <h1 className="text-3xl lg:text-[40px] mb-5 lg:mb-10">
+      {props.value.title}
+    </h1>
   );
 };

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

@@ -1,13 +1,17 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useTransition, CSSProperties } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
 
 import { Button, Icon, Select, Link } from '@theme/components';
 import { SortOption } from '@akinon/next/types';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { FilterItem } from './filters/filter-item';
 
 import { useRouter, useLocalization } from '@akinon/next/hooks';
+import { useProductList } from './product-list-registrar';
+import { useNativeWidget } from './native-widget-context';
 
 interface Props {
   totalCount: number;
@@ -28,16 +32,76 @@ export const CategoryHeader = (props: Props) => {
   ];
   const { totalCount, setMenuStatus, sortOptions } = props;
   const router = useRouter();
+  const facets = useAppSelector((state) => state.category.facets);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
 
   const searchParams = useSearchParams();
   const pathname = usePathname();
 
+  // Get styles and properties from both contexts
+  const {
+    isDesigner,
+    filterStyles: registrarStyles,
+    filterProperties: registrarProps,
+    productsProperties: registrarProductsProps
+  } = useProductList();
+  const {
+    filterStyles: widgetStyles,
+    filterProperties: widgetProps,
+    productsProperties: widgetProductsProps
+  } = useNativeWidget();
+
+  // Use registrar data in designer mode, widget data otherwise
+  const filterStyles = isDesigner ? registrarStyles : widgetStyles;
+
+  // Merge properties - registrar props override widget props for live updates
+  const filterProperties = {
+    ...widgetProps,
+    ...registrarProps
+  };
+
+  const layout = (filterProperties.layout as string) || 'top';
+  const containerStyles = filterStyles as CSSProperties;
+
+  // Get products properties - merge widget and registrar
+  const productsProperties = {
+    ...widgetProductsProps,
+    ...registrarProductsProps
+  };
+  const showLayoutButtons = productsProperties['show-layout-buttons'] !== false;
+  const availableLayouts = productsProperties['available-layouts'] || [
+    '2',
+    '3',
+    '4'
+  ];
+
+  // Parse item properties
+  const itemPaddingY =
+    typeof filterProperties['item-padding-y'] === 'number'
+      ? filterProperties['item-padding-y']
+      : typeof filterProperties['item-padding-y'] === 'string'
+      ? parseInt(filterProperties['item-padding-y'], 10)
+      : 6;
+  const itemPaddingX =
+    typeof filterProperties['item-padding-x'] === 'number'
+      ? filterProperties['item-padding-x']
+      : typeof filterProperties['item-padding-x'] === 'string'
+      ? parseInt(filterProperties['item-padding-x'], 10)
+      : 0;
+  const itemMarginBottom =
+    typeof filterProperties['item-margin-bottom'] === 'number'
+      ? filterProperties['item-margin-bottom']
+      : typeof filterProperties['item-margin-bottom'] === 'string'
+      ? parseInt(filterProperties['item-margin-bottom'], 10)
+      : 0;
+
   const pageSize = useMemo(
     () => searchParams.get('page_size') ?? 48,
     [searchParams]
   );
   const layoutSize = useMemo(
-    () => searchParams.get('layout') ?? 3,
+    () => searchParams.get('layout') ?? '3',
     [searchParams]
   );
 
@@ -55,76 +119,241 @@ export const CategoryHeader = (props: Props) => {
     router.push(pathname + '?' + urlSearchParams.toString());
   };
 
+  const facetButtonStyles = {
+    paddingTop: `${itemPaddingY}px`,
+    paddingBottom: `${itemPaddingY}px`,
+    paddingLeft: `${itemPaddingX}px`,
+    paddingRight: `${itemPaddingX}px`,
+    marginRight: `${itemMarginBottom}px`
+  };
+
   return (
-    <div className="flex flex-col gap-4 mb-4 text-gray-950 text-sm">
-      <div className="flex items-center">
-        <span className="hidden lg:block">
-          <span data-testid="list-count">{totalCount}</span>{' '}
-          {t('category.header.results')}
-        </span>
+    <div className="w-full flex flex-col gap-4 text-gray-950 text-sm">
+      {layout === 'top' && (
+        <div
+          className="hidden lg:flex items-center gap-6 text-sm"
+          style={containerStyles}
+          data-section-id="filters-section"
+        >
+          <span className="text-black-750 text-sm">
+            {t('category.filters.title')}:
+          </span>
+          {facets?.map((facet) => (
+            <div key={facet.key} className="relative" style={facetButtonStyles}>
+              <Button
+                onClick={() =>
+                  setOpenDropdown(openDropdown === facet.key ? null : facet.key)
+                }
+                appearance="ghost"
+                className="flex items-center gap-2 p-0 text-sm text-black-750 hover:bg-transparent hover:text-black-750"
+              >
+                <span>{facet.name}</span>
+                <Icon
+                  name="chevron-down"
+                  size={16}
+                  className={clsx(
+                    'transition-transform',
+                    openDropdown === facet.key && 'rotate-180'
+                  )}
+                />
+              </Button>
+              {openDropdown === facet.key && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setOpenDropdown(null)}
+                  />
+                  <div className="absolute top-full left-0 mt-2 w-64 bg-white border border-gray-200 rounded shadow-lg z-20 max-h-96 overflow-y-auto">
+                    <FilterItem
+                      facet={facet}
+                      isPending={isPending}
+                      startTransition={startTransition}
+                      isDropdown
+                      itemPaddingY={itemPaddingY}
+                      itemPaddingX={itemPaddingX}
+                      itemMarginBottom={itemMarginBottom}
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          ))}
+          <div className="ml-auto flex items-center gap-2 text-black-750 text-sm">
+            <span>{t('category.header.sort_by')}:</span>
+            <Select
+              options={sortOptions}
+              value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
+              data-testid="list-sorter"
+              onChange={(e) => {
+                handleSelectFilter({
+                  key: 'sorter',
+                  value: e.currentTarget.value
+                });
+              }}
+              className="text-black-750 text-sm border-0"
+              borderless={false}
+            />
+            {showLayoutButtons && availableLayouts.length > 0 && (
+              <div className="flex items-center gap-2">
+                {availableLayouts.map((cols) => (
+                  <Button
+                    key={cols}
+                    onClick={() =>
+                      handleSelectFilter({
+                        key: 'layout',
+                        value: cols
+                      })
+                    }
+                    appearance="ghost"
+                    className={clsx(
+                      'p-2 hover:bg-gray-100',
+                      layoutSize === cols && 'bg-gray-200'
+                    )}
+                    data-section-id="products-section"
+                  >
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      {Array.from({ length: parseInt(cols) }).map((_, i) => {
+                        const colWidth = 20 / parseInt(cols);
+                        const gap = 2;
+                        const rectWidth = colWidth - gap;
+                        return (
+                          <g key={i}>
+                            <rect
+                              x={i * colWidth}
+                              y="0"
+                              width={rectWidth}
+                              height="8"
+                              fill="currentColor"
+                            />
+                            <rect
+                              x={i * colWidth}
+                              y="10"
+                              width={rectWidth}
+                              height="8"
+                              fill="currentColor"
+                            />
+                          </g>
+                        );
+                      })}
+                    </svg>
+                  </Button>
+                ))}
+              </div>
+            )}
+            <span>
+              <span data-testid="list-count">{totalCount}</span>{' '}
+              {t('category.header.results')}
+            </span>
+          </div>
+        </div>
+      )}
 
-        <div className="hidden lg:flex gap-5 ml-auto mr-7 px-5 py-2 border border-gray-100">
-          <span> {t('category.header.view')}</span>
-          {PAGE_SIZE.map(({ label, value }) => (
-            <a
-              key={value}
-              onClick={() => {
+      {/* Sidebar layout - show sorting and product count */}
+      {layout === 'sidebar' && (
+        <div
+          className="hidden lg:flex items-center justify-between"
+          style={containerStyles}
+          data-section-id="filters-section"
+        >
+          <div className="flex items-center gap-2 text-black-750 text-sm">
+            <span>{t('category.header.sort_by')}:</span>
+            <Select
+              options={sortOptions}
+              value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
+              data-testid="list-sorter"
+              onChange={(e) => {
                 handleSelectFilter({
-                  key: 'page_size',
-                  value: String(value)
+                  key: 'sorter',
+                  value: e.currentTarget.value
                 });
               }}
-              className={clsx('cursor-pointer', {
-                'text-black font-semibold': Number(pageSize) === value
-              })}
-            >
-              {label}
-            </a>
-          ))}
-          <div className="flex items-center gap-2 pl-5 border-l border-gray-400">
-            {LAYOUTS.map(({ icon, value }) => (
-              <a
-                key={value}
-                onClick={() => {
-                  handleSelectFilter({
-                    key: 'layout',
-                    value: String(value)
-                  });
-                }}
-                className={clsx(
-                  'cursor-pointer',
-                  Number(layoutSize) === value ? 'fill-black' : 'fill-gray-500'
-                )}
-              >
-                <Icon key={value} name={icon} size={16} />
-              </a>
-            ))}
+              className="text-black-750 text-sm border-0"
+              borderless={false}
+            />
           </div>
+          <span className="text-black-750 text-sm">
+            <span data-testid="list-count">{totalCount}</span>{' '}
+            {t('category.header.results')}
+          </span>
+          {showLayoutButtons && availableLayouts.length > 0 && (
+            <div className="flex items-center gap-2">
+              {availableLayouts.map((cols) => (
+                <Button
+                  key={cols}
+                  onClick={() =>
+                    handleSelectFilter({
+                      key: 'layout',
+                      value: cols
+                    })
+                  }
+                  appearance="ghost"
+                  className={clsx(
+                    'p-2 hover:bg-gray-100',
+                    layoutSize === cols && 'bg-gray-200'
+                  )}
+                  data-section-id="products-section"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    {Array.from({ length: parseInt(cols) }).map((_, i) => {
+                      const colWidth = 20 / parseInt(cols);
+                      const gap = 2;
+                      const rectWidth = colWidth - gap;
+                      return (
+                        <g key={i}>
+                          <rect
+                            x={i * colWidth}
+                            y="0"
+                            width={rectWidth}
+                            height="8"
+                            fill="currentColor"
+                          />
+                          <rect
+                            x={i * colWidth}
+                            y="10"
+                            width={rectWidth}
+                            height="8"
+                            fill="currentColor"
+                          />
+                        </g>
+                      );
+                    })}
+                  </svg>
+                </Button>
+              ))}
+            </div>
+          )}
         </div>
+      )}
+
+      <div className="flex items-center w-full justify-between lg:hidden">
         <Button
-          className="relative border-gray-100 text-left mr-5 bg-white text-primary-100 w-40 lg:hidden lg:mr-0"
+          className="relative p-0 hover:bg-transparent hover:text-black"
           onClick={() => setMenuStatus()}
+          appearance="ghost"
           data-testid="list-filter"
         >
-          {t('category.filters.title')}
-          <Icon
-            name="chevron-down"
-            size={10}
-            className="absolute right-1 top-1/2 transform -translate-y-1/2"
-          />
+          <Icon name="filter-and-sort" size={20} />
+          <span className="lg:hidden text-sm">
+            {t('category.filters.mobile_title')}
+          </span>
+          <span className="hidden lg:block">{t('category.filters.title')}</span>
         </Button>
-        <Select
-          options={sortOptions}
-          value={sortOptions.find(({ is_selected }) => is_selected).value}
-          data-testid="list-sorter"
-          onChange={(e) => {
-            handleSelectFilter({
-              key: 'sorter',
-              value: e.currentTarget.value
-            });
-          }}
-          borderless={false}
-        />
+        <span>
+          <span data-testid="list-count">{totalCount}</span>{' '}
+          {t('category.header.results')}
+        </span>
       </div>
       {totalCount === 0 && (
         <div className="h-40 flex items-center justify-center  flex-col bg-gray-200 p-4">