@akinon/projectzero 2.0.0-beta.9 → 2.0.1

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

@@ -39,8 +39,8 @@ export const Input = forwardRef<
   const hasFloatingLabel = label && labelStyle === 'floating';
   const inputClass = twMerge(
     clsx(
-      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer disabled:bg-gray-50',
-      'focus-visible:outline-hidden', // disable outline on focus
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
+      'focus-visible:outline-none', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
@@ -48,7 +48,13 @@ export const Input = forwardRef<
     props.className
   );
 
-  const inputProps: any = {
+  const inputProps: {
+    id?: string;
+    ref?: Ref<HTMLInputElement>;
+    className?: string;
+    onFocus?: () => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  } = {
     id,
     ref,
     className: inputClass,
@@ -68,7 +74,7 @@ export const Input = forwardRef<
         className={twMerge(
           'text-xs text-gray-800 transition-all',
           clsx({
-            'absolute left-2.5 pointer-events-none transform flex items-center h-full top-0!  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
+            'absolute left-2.5 pointer-events-none transform flex items-center h-full !top-0  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
               hasFloatingLabel,
             'mb-2': !hasFloatingLabel,
             '-translate-y-2 bg-white inline-flex h-auto':
@@ -112,7 +118,7 @@ export const Input = forwardRef<
         )}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </div>
   );

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

@@ -1,30 +1,116 @@
 'use client';
 
 import { useLocalization } from '@akinon/next/hooks';
+import { useEffect, useRef } from 'react';
 import { Select } from './select';
 
 interface LanguageSelectProps {
   className?: string;
+  showIcon?: boolean;
+  iconClassName?: string;
+  /** Custom SVG icon content */
+  customIcon?: string;
+  /** Label format: 'full' (English), 'short' (EN), 'code' (en) */
+  labelFormat?: 'full' | 'short' | 'code';
 }
 
 export const LanguageSelect = (props: LanguageSelectProps) => {
   const { locale, locales, setLocale } = useLocalization();
+  const isUpdatingFromParent = useRef(false);
+
+  useEffect(() => {
+    if (window.parent !== window && !isUpdatingFromParent.current) {
+      window.parent.postMessage(
+        {
+          type: 'LOCALE_UPDATE',
+          data: {
+            locale,
+            locales: locales.map((lang) => ({
+              value: lang.value,
+              label: lang.label
+            }))
+          }
+        },
+        '*'
+      );
+    }
+  }, [locale, locales]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'LOCALE_UPDATE') {
+        const { locale: newLocale } = event.data.data;
+
+        if (newLocale && newLocale !== locale) {
+          isUpdatingFromParent.current = true;
+          setLocale(newLocale);
+          setTimeout(() => {
+            isUpdatingFromParent.current = false;
+          }, 100);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [locale, setLocale]);
 
   const handleChange = async (e) => {
     const selectedLanguage = e.currentTarget.value;
 
     setLocale(selectedLanguage);
+
+    if (window.parent !== window) {
+      window.parent.postMessage(
+        {
+          type: 'LOCALE_UPDATE',
+          data: {
+            locale: selectedLanguage,
+            locales: locales.map((lang) => ({
+              value: lang.value,
+              label: lang.label
+            }))
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  // Format label based on labelFormat prop
+  const formatLabel = (lang: { value: string; label: string }) => {
+    switch (props.labelFormat) {
+      case 'short':
+        // Get first 2 characters uppercase (EN, TR, etc.)
+        return lang.value.slice(0, 2).toUpperCase();
+      case 'code':
+        // Return locale code as-is (en, tr, etc.)
+        return lang.value;
+      case 'full':
+      default:
+        // Return full label (English, Türkçe, etc.)
+        return lang.label;
+    }
   };
 
+  // Check if customIcon has actual SVG content
+  const hasValidCustomIcon =
+    props.customIcon &&
+    typeof props.customIcon === 'string' &&
+    props.customIcon.includes('<svg');
+
   return (
     <Select
       onChange={handleChange}
       options={locales.map((lang) => ({
         value: lang.value,
-        label: lang.label
+        label: formatLabel(lang)
       }))}
       value={locale}
-      icon="globe"
+      icon={
+        props.showIcon !== false && !hasValidCustomIcon ? 'globe' : undefined
+      }
+      customIcon={props.showIcon !== false ? props.customIcon : undefined}
       data-testid="language"
       borderless
       className={props.className}

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

@@ -4,16 +4,7 @@ import ReactPortal from './react-portal';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
+import { ModalProps } from '@theme/types';
 
 export const Modal = (props: ModalProps) => {
   const {
@@ -23,7 +14,14 @@ export const Modal = (props: ModalProps) => {
     setOpen,
     title = '',
     showCloseButton = true,
-    className
+    className,
+    overlayClassName,
+    headerWrapperClassName,
+    titleClassName,
+    closeButtonClassName,
+    iconName = 'close',
+    iconSize = 16,
+    iconClassName
   } = props;
 
   useEffect(() => {
@@ -38,23 +36,43 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
+          overlayClassName
+        )}
+        onClick={(e) => e.stopPropagation()}
+      />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
           className
         )}
+        onClick={(e) => e.stopPropagation()}
       >
         {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
+          <div
+            className={twMerge(
+              'flex px-6 py-4 border-b border-gray-400',
+              headerWrapperClassName
+            )}
+          >
+            {title && (
+              <h3 className={twMerge('text-lg font-light', titleClassName)}>
+                {title}
+              </h3>
+            )}
             {showCloseButton && (
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="ml-auto"
+                className={twMerge('ml-auto', closeButtonClassName)}
               >
-                <Icon name="close" size={16} />
+                <Icon
+                  name={iconName}
+                  size={iconSize}
+                  className={iconClassName}
+                />
               </button>
             )}
           </div>

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

@@ -8,6 +8,14 @@ import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';
 import { useInView } from 'react-intersection-observer';
 
+const parseSafeUrl = (url: string) => {
+  try {
+    return new URL(url, window.location.origin);
+  } catch {
+    return null;
+  }
+};
+
 export const Pagination = (props: PaginationProps) => {
   const { t } = useLocalization();
   const router = useRouter();
@@ -26,7 +34,8 @@ export const Pagination = (props: PaginationProps) => {
     onPageChange,
     direction,
     render,
-    isLoading
+    isLoading,
+    customStyles
   } = props;
 
   const pagination = usePagination(total, limit, currentPage, numberOfPages);
@@ -96,7 +105,11 @@ export const Pagination = (props: PaginationProps) => {
   const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
     e.preventDefault();
 
-    const newUrl = new URL(url, window.location.origin);
+    const newUrl = parseSafeUrl(url);
+    if (!newUrl) {
+      return;
+    }
+
     const page = newUrl.searchParams.get('page');
 
     if (page === '1') {
@@ -117,7 +130,21 @@ export const Pagination = (props: PaginationProps) => {
       setNextPage(changingPage);
     }
 
-    onPageChange(changingPage);
+    // Navigate to new page using router if onPageChange is not provided
+    if (onPageChange) {
+      onPageChange(changingPage);
+    } else {
+      const currentUrl = parseSafeUrl(window.location.href);
+      if (!currentUrl) {
+        return;
+      }
+
+      currentUrl.searchParams.set('page', String(changingPage));
+      if (changingPage === 1) {
+        currentUrl.searchParams.delete('page');
+      }
+      router.push(currentUrl.pathname + currentUrl.search, undefined);
+    }
   };
 
   useEffect(() => {
@@ -125,6 +152,7 @@ export const Pagination = (props: PaginationProps) => {
       setPrevPage(1);
       setNextPage(1);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page]);
 
   useEffect(() => {
@@ -155,11 +183,77 @@ export const Pagination = (props: PaginationProps) => {
     return <>{render(pagination)}</>;
   }
 
+  // Custom styles for pagination container
+  const containerStyles: React.CSSProperties = {
+    marginTop: customStyles?.marginTop || '32px',
+    marginBottom: customStyles?.marginBottom || '16px',
+    gap: customStyles?.pageGap || '8px'
+  };
+
+  // Custom styles for page links (button-like)
+  const pageStyles: React.CSSProperties = {
+    fontSize: customStyles?.pageFontSize || '14px',
+    color: customStyles?.pageColor || '#9ca3af',
+    backgroundColor: customStyles?.pageBgColor || 'transparent',
+    paddingLeft: customStyles?.pagePaddingX || '8px',
+    paddingRight: customStyles?.pagePaddingX || '8px',
+    paddingTop: customStyles?.pagePaddingY || '4px',
+    paddingBottom: customStyles?.pagePaddingY || '4px',
+    borderRadius: customStyles?.pageBorderRadius || '0px',
+    borderWidth: customStyles?.pageBorderWidth || '0px',
+    borderStyle: 'solid',
+    borderColor: customStyles?.pageBorderColor || '#e5e7eb',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  const activePageStyles: React.CSSProperties = {
+    fontSize: customStyles?.pageFontSize || '14px',
+    color: customStyles?.pageActiveColor || '#1a1a1a',
+    fontWeight: customStyles?.pageActiveFontWeight || '600',
+    backgroundColor: customStyles?.pageActiveBgColor || 'transparent',
+    paddingLeft: customStyles?.pagePaddingX || '8px',
+    paddingRight: customStyles?.pagePaddingX || '8px',
+    paddingTop: customStyles?.pagePaddingY || '4px',
+    paddingBottom: customStyles?.pagePaddingY || '4px',
+    borderRadius: customStyles?.pageBorderRadius || '0px',
+    borderWidth: customStyles?.pageBorderWidth || '0px',
+    borderStyle: 'solid',
+    borderColor: customStyles?.pageActiveBorderColor || '#1a1a1a',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  const arrowStyles: React.CSSProperties = {
+    color: customStyles?.arrowColor || '#1a1a1a'
+  };
+
+  // Custom styles for more button
+  const buttonStyles: React.CSSProperties = {
+    backgroundColor: customStyles?.buttonBgColor || '#000000',
+    color: customStyles?.buttonTextColor || '#ffffff',
+    borderRadius: customStyles?.buttonBorderRadius || '4px',
+    paddingLeft: customStyles?.buttonPaddingX || '20px',
+    paddingRight: customStyles?.buttonPaddingX || '20px',
+    paddingTop: customStyles?.buttonPaddingY || '12px',
+    paddingBottom: customStyles?.buttonPaddingY || '12px'
+  };
+
   return direction === 'prev' && type !== 'list' ? (
     <>
-      <div className="flex items-center justify-center">
+      <div
+        className="flex items-center justify-center"
+        style={{
+          marginTop: customStyles?.marginTop,
+          marginBottom: customStyles?.marginBottom
+        }}
+        data-section-id="pagination-section"
+      >
         <Button
           className={twMerge('px-5', moreButtonClassName)}
+          style={buttonStyles}
           onClick={() => handlePageChange()}
         >
           {isLoading ? (
@@ -173,15 +267,26 @@ export const Pagination = (props: PaginationProps) => {
   ) : (
     <>
       {type === 'more' && (
-        <div className="flex items-center justify-center">
+        <div
+          className="flex items-center justify-center"
+          style={{
+            marginTop: customStyles?.marginTop,
+            marginBottom: customStyles?.marginBottom
+          }}
+          data-section-id="pagination-section"
+        >
           <Button
             className={twMerge(
-              'px-5',
-              Number(nextPage) === Number(last)
-                ? 'bg-gray-600 border-gray-600 pointer-events-none'
-                : 'bg-black',
+              Number(nextPage) === Number(last) ? 'pointer-events-none' : '',
               moreButtonClassName
             )}
+            style={{
+              ...buttonStyles,
+              backgroundColor:
+                Number(nextPage) === Number(last)
+                  ? '#6b7280'
+                  : customStyles?.buttonBgColor || '#000000'
+            }}
             onClick={() => handlePageChange()}
             disabled={Number(nextPage) === Number(last)}
           >
@@ -209,9 +314,11 @@ export const Pagination = (props: PaginationProps) => {
       {type === 'list' && (
         <ul
           className={twMerge(
-            'mb-4 mt-8 flex items-center justify-center',
+            'flex items-center justify-center',
             containerClassName
           )}
+          style={containerStyles}
+          data-section-id="pagination-section"
         >
           {prev && currentPage !== 1 && (
             <li>
@@ -219,9 +326,10 @@ export const Pagination = (props: PaginationProps) => {
                 onClick={(e) => handleClick(e, prev)}
                 href={prev}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-sm items-center',
+                  'flex cursor-pointer px-2 items-center',
                   prevClassName
                 )}
+                style={arrowStyles}
               >
                 <span>&lt;</span>
                 <span className="ms-4 hidden lg:inline-block">
@@ -238,20 +346,24 @@ export const Pagination = (props: PaginationProps) => {
                   onClick={(e) => handleClick(e, item.url)}
                   href={item.url}
                   className={twMerge(
-                    clsx(
-                      'cursor-pointer px-2 text-xs items-center',
-                      { 'pointer-events-none': item.url === null },
-                      Number(page) === Number(item?.page)
-                        ? 'font-semibold text-black-800'
-                        : 'text-gray-400'
-                    ),
+                    clsx('cursor-pointer px-2 items-center', {
+                      'pointer-events-none': item.url === null
+                    }),
                     pageClassName
                   )}
+                  style={
+                    Number(page) === Number(item?.page)
+                      ? activePageStyles
+                      : pageStyles
+                  }
                 >
                   {item?.page}
                 </Link>
               ) : (
-                <span className="flex cursor-default items-center justify-center text-xs">
+                <span
+                  className="flex cursor-default items-center justify-center"
+                  style={pageStyles}
+                >
                   {item?.page}
                 </span>
               )}
@@ -264,9 +376,10 @@ export const Pagination = (props: PaginationProps) => {
                 onClick={(e) => handleClick(e, next)}
                 href={next}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-xs items-center',
+                  'flex cursor-pointer px-2 items-center',
                   nextClassName
                 )}
+                style={arrowStyles}
               >
                 <span className="me-4 hidden lg:inline-block">
                   {t('category.pagination.next')}

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

@@ -56,7 +56,7 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
 
   const currentCurrencyDecimalScale = Settings.localization.currencies.find(
     (currency) => currency.code === currencyCode_
-  ).decimalScale;
+  )?.decimalScale;
 
   return (
     <NumericFormat

package/app-template/src/components/pwa-tags.tsx

@@ -2,6 +2,7 @@ import { Metadata } from '@akinon/next/types';
 
 const pwaTags: Metadata = {
   manifest: '/manifest.json',
+  themeColor: '#FFFFFF',
   formatDetection: {
     telephone: false
   },

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>
+  );
+};