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

package/app-template/src/components/quantity-selector.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { Button, Icon, LoaderSpinner, Select } from '@theme/components';
+import {
+  QuantityDisplayType,
+  QuantityStyles
+} from '@theme/views/product-detail';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+interface QuantitySelectorProps {
+  quantity: number;
+  onChange?: (newQuantity: number) => void;
+  min?: number;
+  max?: number;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  displayType?: QuantityDisplayType;
+  maxDropdownOptions?: number;
+  styles?: QuantityStyles;
+  isSelected?: boolean;
+  onDesignerClick?: () => void;
+}
+
+/**
+ * QuantitySelector Component
+ *
+ * Supports two display modes:
+ * - 'buttons': Plus/minus buttons with number display (default)
+ * - 'dropdown': Select dropdown with quantity options
+ *
+ * Styles can be customized via Theme Editor through the styles prop.
+ */
+export const QuantitySelector = ({
+  quantity,
+  onChange,
+  min = 1,
+  max = 999,
+  isLoading = false,
+  disabled = false,
+  className = '',
+  displayType = 'buttons',
+  maxDropdownOptions = 10,
+  styles = {},
+  isSelected = false,
+  onDesignerClick
+}: QuantitySelectorProps) => {
+  const handleDecrease = () => {
+    if (quantity > min && onChange) {
+      onChange(quantity - 1);
+    }
+  };
+
+  const handleIncrease = () => {
+    if (quantity < max && onChange) {
+      onChange(quantity + 1);
+    }
+  };
+
+  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newQuantity = parseInt(e.target.value, 10);
+    if (!isNaN(newQuantity) && onChange) {
+      onChange(newQuantity);
+    }
+  };
+
+  // Generate dropdown options
+  const dropdownOptions = useMemo(() => {
+    const optionCount = Math.min(max - min + 1, maxDropdownOptions);
+    return Array.from({ length: optionCount }, (_, i) => ({
+      value: String(min + i),
+      label: String(min + i)
+    }));
+  }, [min, max, maxDropdownOptions]);
+
+  // Handle designer click for section selection
+  const handleContainerClick = (e: React.MouseEvent) => {
+    if (onDesignerClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      onDesignerClick();
+    }
+  };
+
+  if (displayType === 'dropdown') {
+    return (
+      <div
+        className={clsx(
+          isSelected && 'ring-2 ring-blue-500 ring-offset-2',
+          className
+        )}
+        onClick={handleContainerClick}
+      >
+        {isLoading ? (
+          <div
+            className="flex items-center justify-center border"
+            style={{
+              width: styles.width || '138px',
+              height: styles.height || '44px'
+            }}
+          >
+            <LoaderSpinner className="w-4 h-4" />
+          </div>
+        ) : (
+          <Select
+            value={String(quantity)}
+            onChange={handleDropdownChange}
+            options={dropdownOptions}
+            disabled={disabled}
+            labelClassName="inline-block"
+            className="cursor-pointer w-full"
+            style={{
+              width: styles.width || '138px',
+              height: styles.height || '44px',
+              backgroundColor: styles['background-color'],
+              borderColor: styles['border-color'],
+              borderWidth: styles['border-width'],
+              borderRadius: styles['border-radius'],
+              fontSize: styles['font-size'],
+              fontWeight: styles['font-weight'],
+              color: styles.color
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Default: Buttons mode
+  return (
+    <div
+      className={clsx(
+        'quantity-selector flex items-center justify-between border p-4',
+        isSelected && 'ring-2 ring-blue-500 ring-offset-2',
+        className
+      )}
+      style={
+        {
+          width: styles.width || '138px',
+          height: styles.height || '44px',
+          backgroundColor: styles['background-color'],
+          borderColor: styles['border-color'],
+          borderWidth: styles['border-width'],
+          borderRadius: styles['border-radius'],
+          borderStyle: styles['border-width'] ? 'solid' : undefined,
+          '--quantity-button-color': styles['button-color'],
+          '--quantity-button-hover-color': styles['button-hover-color']
+        } as React.CSSProperties
+      }
+      onClick={handleContainerClick}
+    >
+      <Button
+        className={clsx(
+          'quantity-btn h-auto p-0 hover:bg-transparent',
+          styles['button-color'] ? '' : 'hover:text-black'
+        )}
+        style={{
+          color: styles['button-color'] || undefined
+        }}
+        appearance="ghost"
+        onClick={disabled ? undefined : handleDecrease}
+        disabled={disabled || isLoading || quantity <= min}
+      >
+        <Icon name="minus" size={12} />
+      </Button>
+      <div
+        style={{
+          color: styles.color,
+          fontSize: styles['font-size'],
+          fontWeight: styles['font-weight']
+        }}
+      >
+        {isLoading ? (
+          <LoaderSpinner className="w-4 h-4" />
+        ) : (
+          <span>{quantity}</span>
+        )}
+      </div>
+      <Button
+        className={clsx(
+          'quantity-btn h-auto p-0 hover:bg-transparent',
+          styles['button-color'] ? '' : 'hover:text-black'
+        )}
+        style={{
+          color: styles['button-color'] || undefined
+        }}
+        appearance="ghost"
+        onClick={disabled ? undefined : handleIncrease}
+        disabled={disabled || isLoading || quantity >= max}
+      >
+        <Icon name="plus" size={12} />
+      </Button>
+
+      {/* Inline style for hover states */}
+      <style jsx>{`
+        .quantity-selector .quantity-btn:hover:not(:disabled) {
+          color: var(--quantity-button-hover-color, inherit) !important;
+        }
+      `}</style>
+    </div>
+  );
+};

package/app-template/src/components/route-handler.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect } from 'react';
+import {
+  usePathname,
+  useSearchParams,
+  useSelectedLayoutSegment
+} from 'next/navigation';
+
+const RouteHandler = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const layoutSegment = useSelectedLayoutSegment();
+
+  useEffect(() => {
+    window.parent.postMessage(
+      {
+        type: 'ROUTE_CHANGE_COMPLETE',
+        url: `${pathname}?${searchParams}`,
+        layoutSegment: layoutSegment === null ? 'home' : layoutSegment
+      },
+      '*'
+    );
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const anchor = target.closest('a[href]');
+
+      if (anchor) {
+        const isMenuToggle =
+          anchor.getAttribute('data-is-menu-toggle') === 'true';
+        if (!isMenuToggle) {
+          window.parent.postMessage(
+            { type: 'ROUTE_CHANGE_START', url: anchor.getAttribute('href') },
+            '*'
+          );
+        }
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  return null;
+};
+
+export default RouteHandler;

package/app-template/src/components/select.tsx

@@ -4,78 +4,98 @@ import clsx from 'clsx';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    className,
-    options,
-    borderless = false,
-    icon,
-    iconSize,
-    error,
-    label,
-    required = false,
-    labelClassName,
-    ...rest
-  } = props;
+interface ExtendedSelectProps extends SelectProps {
+  /** Custom SVG icon content */
+  customIcon?: string;
+}
 
-  return (
-    <label
-      className={twMerge(
-        clsx('flex flex-col relative text-xs text-gray-800', {
-          'pl-7': icon
-        }),
-        labelClassName
-      )}
-    >
-      {icon && (
-        <Icon
-          name={icon}
-          size={iconSize ?? 20}
-          className="absolute left-0 top-1/2 transform -translate-y-1/2"
-        />
-      )}
+const Select = forwardRef<HTMLSelectElement, ExtendedSelectProps>(
+  (props, ref) => {
+    const {
+      className,
+      options,
+      borderless = false,
+      icon,
+      iconSize,
+      customIcon,
+      error,
+      label,
+      required = false,
+      labelClassName,
+      ...rest
+    } = props;
 
-      {label && (
-        <span className={twMerge('mb-1', labelClassName)}>
-          {label} {required && <span className="text-secondary">*</span>}
-        </span>
-      )}
-      <div className="relative">
-        <select
-          {...rest}
-          ref={ref}
-          className={twMerge(
-            clsx(
-              'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
-              !borderless &&
-                'border border-gray-200 transition-all duration-150 hover:border-primary focus:border-primary',
-              'appearance-none bg-transparent'
-            ),
-            className
-          )}
-        >
-          {options?.map((option) => (
-            <option
-              key={option.value}
-              value={option.value}
-              className={option.class}
-            >
-              {option.label}
-            </option>
-          ))}
-        </select>
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-          <svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
-            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-          </svg>
+    // Check if customIcon is SVG content
+    const hasCustomSvgIcon =
+      customIcon &&
+      typeof customIcon === 'string' &&
+      customIcon.includes('<svg');
+
+    return (
+      <label
+        className={twMerge(
+          clsx('flex flex-col relative text-xs text-gray-800', {
+            'pl-7': icon || hasCustomSvgIcon
+          }),
+          labelClassName
+        )}
+      >
+        {hasCustomSvgIcon ? (
+          <div
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 flex items-center justify-center"
+            style={{ width: iconSize ?? 20, height: iconSize ?? 20 }}
+            dangerouslySetInnerHTML={{ __html: customIcon }}
+          />
+        ) : icon ? (
+          <Icon
+            name={icon}
+            size={iconSize ?? 20}
+            className="absolute left-0 top-1/2 transform -translate-y-1/2"
+          />
+        ) : null}
+
+        {label && (
+          <span className={twMerge('mb-1', labelClassName)}>
+            {label} {required && <span className="text-secondary">*</span>}
+          </span>
+        )}
+        <div className="relative">
+          <select
+            {...rest}
+            ref={ref}
+            className={twMerge(
+              clsx(
+                'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
+                !borderless &&
+                  'border border-gray-200 transition-all duration-150 hover:border-primary focus:border-primary',
+                'appearance-none bg-transparent'
+              ),
+              className
+            )}
+          >
+            {options?.map((option) => (
+              <option
+                key={option.value}
+                value={option.value}
+                className={option.class}
+              >
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+            <svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
+              <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+            </svg>
+          </div>
         </div>
-      </div>
-      {error && (
-        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
-      )}
-    </label>
-  );
-});
+        {error && (
+          <span className="mt-1 text-sm text-error">{error.message}</span>
+        )}
+      </label>
+    );
+  }
+);
 
 Select.displayName = 'Select';
 

package/app-template/src/components/types/index.ts

@@ -27,6 +27,29 @@ export interface PaginationProps {
   onPageChange?: (page: number) => void;
   direction?: 'next' | 'prev';
   isLoading?: boolean;
+  customStyles?: {
+    marginTop?: string;
+    marginBottom?: string;
+    pageFontSize?: string;
+    pageColor?: string;
+    pageActiveColor?: string;
+    pageActiveFontWeight?: string;
+    pageGap?: string;
+    pageBgColor?: string;
+    pageActiveBgColor?: string;
+    pagePaddingX?: string;
+    pagePaddingY?: string;
+    pageBorderRadius?: string;
+    pageBorderWidth?: string;
+    pageBorderColor?: string;
+    pageActiveBorderColor?: string;
+    arrowColor?: string;
+    buttonBgColor?: string;
+    buttonTextColor?: string;
+    buttonBorderRadius?: string;
+    buttonPaddingX?: string;
+    buttonPaddingY?: string;
+  };
 }
 
 export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
@@ -114,4 +137,7 @@ export type AccordionProps = {
   subTitleClassName?: string;
   dataTestId?: string;
   contentClassName?: string;
+  leftIcon?: string;
+  leftIconSize?: number;
+  leftIconClassName?: string;
 };