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

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

@@ -0,0 +1,63 @@
+import { Button, Icon, LoaderSpinner } from '@theme/components';
+
+interface QuantityInputProps {
+  quantity: number;
+  onChange?: (newQuantity: number) => void;
+  min?: number;
+  max?: number;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const QuantityInput = ({
+  quantity,
+  onChange,
+  min = 1,
+  max = 999,
+  isLoading = false,
+  disabled = false,
+  className = ''
+}: QuantityInputProps) => {
+  const handleDecrease = () => {
+    if (quantity > min && onChange) {
+      onChange(quantity - 1);
+    }
+  };
+
+  const handleIncrease = () => {
+    if (quantity < max && onChange) {
+      onChange(quantity + 1);
+    }
+  };
+
+  return (
+    <div
+      className={`w-[138px] h-11 flex items-center justify-between border p-4 ${className}`}
+    >
+      <Button
+        className="h-auto p-0 hover:bg-transparent hover:text-black"
+        appearance="ghost"
+        onClick={handleDecrease}
+        disabled={disabled || isLoading || quantity <= min}
+      >
+        <Icon name="minus" size={12} />
+      </Button>
+      <div>
+        {isLoading ? (
+          <LoaderSpinner className="w-4 h-4" />
+        ) : (
+          <span>{quantity}</span>
+        )}
+      </div>
+      <Button
+        className="h-auto p-0 hover:bg-transparent hover:text-black"
+        appearance="ghost"
+        onClick={handleIncrease}
+        disabled={disabled || isLoading || quantity >= max}
+      >
+        <Icon name="plus" size={12} />
+      </Button>
+    </div>
+  );
+};

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,66 +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,
-    ...rest
-  } = props;
+interface ExtendedSelectProps extends SelectProps {
+  /** Custom SVG icon content */
+  customIcon?: string;
+}
 
-  return (
-    <label
-      className={clsx('flex flex-col relative text-xs text-gray-800', {
-        'pl-7': icon
-      })}
-    >
-      {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="mb-1">
-          {label} {required && <span className="text-secondary">*</span>}
-        </span>
-      )}
-      <select
-        {...rest}
-        ref={ref}
+    // Check if customIcon is SVG content
+    const hasCustomSvgIcon =
+      customIcon &&
+      typeof customIcon === 'string' &&
+      customIcon.includes('<svg');
+
+    return (
+      <label
         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'
-          ),
-          className
+          clsx('flex flex-col relative text-xs text-gray-800', {
+            'pl-7': icon || hasCustomSvgIcon
+          }),
+          labelClassName
         )}
       >
-        {options.map((option) => (
-          <option
-            key={option.value}
-            value={option.value}
-            className={option.class}
+        {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
+            )}
           >
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
-      )}
-    </label>
-  );
-});
+            {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>
+        {error && (
+          <span className="mt-1 text-sm text-error">{error.message}</span>
+        )}
+      </label>
+    );
+  }
+);
 
 Select.displayName = 'Select';
 

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

@@ -39,7 +39,7 @@ export const Tabs = (props: Props) => {
             tabBarPosition === 'left' || tabBarPosition === 'right'
         })}
       >
-        {children.map((item, index) => (
+        {children?.map((item, index) => (
           <Tab
             key={item.props.title}
             title={item.props.title}
@@ -52,7 +52,7 @@ export const Tabs = (props: Props) => {
         ))}
       </ul>
 
-      <div className="w-full">{children[selectedTabIndex]}</div>
+      <div className="w-full">{children?.[selectedTabIndex]}</div>
     </div>
   );
 };

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

@@ -4,7 +4,10 @@ import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export interface PaginationProps {
@@ -24,9 +27,38 @@ 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 type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export type RadioProps = React.HTMLProps<HTMLInputElement>;
 
@@ -55,6 +87,7 @@ export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
   iconSize?: number;
   error?: FieldError | undefined;
   required?: boolean;
+  labelClassName?: string;
 }
 export interface IconProps extends React.ComponentPropsWithRef<'i'> {
   name: string;
@@ -88,3 +121,23 @@ export interface BadgeProps {
   children: ReactNode;
   className?: string;
 }
+
+export type AccordionProps = {
+  isCollapse?: boolean;
+  collapseClassName?: string;
+  title?: string;
+  subTitle?: string;
+  icons?: string[];
+  iconSize?: number;
+  iconColor?: string;
+  children?: ReactNode;
+  headerClassName?: string;
+  className?: string;
+  titleClassName?: string;
+  subTitleClassName?: string;
+  dataTestId?: string;
+  contentClassName?: string;
+  leftIcon?: string;
+  leftIconSize?: number;
+  leftIconClassName?: string;
+};