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

package/app-template/src/views/breadcrumb.tsx

@@ -1,13 +1,38 @@
-/**
- * Breadcrumb Component
- *
- * Re-exports the Breadcrumb component from the breadcrumb folder.
- * This file is kept for backwards compatibility with existing imports.
- */
-export { default } from './breadcrumb/index';
-export type { BreadcrumbProps } from './breadcrumb/index';
-export {
-  BreadcrumbRegistrar,
-  useBreadcrumb,
-  BreadcrumbClient
-} from './breadcrumb/index';
+'use client';
+
+import { Fragment } from 'react';
+import { Icon, Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { useLocalization } from '@akinon/next/hooks';
+import { BreadcrumbResultType } from '@akinon/next/types';
+import { capitalize } from '@akinon/next/utils';
+
+export interface BreadcrumbProps {
+  breadcrumbList?: BreadcrumbResultType[];
+}
+
+export default function Breadcrumb(props: BreadcrumbProps) {
+  const { t, locale } = useLocalization();
+  const { breadcrumbList = [] } = props;
+
+  const list = [
+    { url: ROUTES.HOME, text: t('common.breadcrumb.homepage') },
+    ...breadcrumbList.map((breadcrumb) => ({
+      url: breadcrumb.url,
+      text: breadcrumb.label
+    }))
+  ];
+
+  return (
+    <div className="flex items-center gap-3 text-xs leading-4 text-gray-950">
+      {list.map((item, index) => (
+        <Fragment key={index}>
+          <Link href={item.url}>
+            {capitalize(item.text.toLocaleLowerCase(locale))}
+          </Link>
+          {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

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

@@ -1,17 +1,13 @@
 'use client';
 
-import React, { useMemo, useState, useTransition, CSSProperties } from 'react';
+import React, { useMemo } 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;
@@ -32,76 +28,16 @@ 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]
   );
 
@@ -119,241 +55,82 @@ 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="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="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>
 
-      {/* 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) => {
+        <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={() => {
                 handleSelectFilter({
-                  key: 'sorter',
-                  value: e.currentTarget.value
+                  key: 'page_size',
+                  value: String(value)
                 });
               }}
-              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
-                    })
+              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="cursor-pointer"
+              >
+                <Icon
+                  key={value}
+                  name={icon}
+                  size={16}
+                  className={
+                    Number(layoutSize) === value
+                      ? 'text-black'
+                      : 'text-gray-500'
                   }
-                  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>
-          )}
+                />
+              </a>
+            ))}
+          </div>
         </div>
-      )}
-
-      <div className="flex items-center w-full justify-between lg:hidden">
         <Button
-          className="relative p-0 hover:bg-transparent hover:text-black"
+          className="relative border-gray-100 text-left mr-5 bg-white text-primary-100 w-40 lg:hidden lg:mr-0"
           onClick={() => setMenuStatus()}
-          appearance="ghost"
           data-testid="list-filter"
         >
-          <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>
+          {t('category.filters.title')}
+          <Icon
+            name="chevron-down"
+            size={10}
+            className="absolute right-1 top-1/2 transform -translate-y-1/2"
+          />
         </Button>
-        <span>
-          <span data-testid="list-count">{totalCount}</span>{' '}
-          {t('category.header.results')}
-        </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
+            });
+          }}
+          borderless={false}
+        />
       </div>
       {totalCount === 0 && (
         <div className="h-40 flex items-center justify-center  flex-col bg-gray-200 p-4">