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

package/app-template/src/views/product/variant.tsx

@@ -4,7 +4,7 @@ import React, { useMemo, useCallback } from 'react';
 import { VariantOption, VariantType } from '@akinon/next/types';
 import { usePathname, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
-import { useRouter, useLocalization } from '@akinon/next/hooks';
+import { useRouter } from '@akinon/next/hooks';
 
 type VariantProps = {
   className?: string;
@@ -20,7 +20,6 @@ export const Variant = ({
   onChange,
   className
 }: VariantProps) => {
-  const { t } = useLocalization();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -30,16 +29,6 @@ export const Variant = ({
     [searchParams]
   );
 
-  const hasSelected = useMemo(
-    () => options.some((option) => option.is_selected),
-    [options]
-  );
-
-  const selectedVariant = useMemo(
-    () => options.find((option) => option.is_selected),
-    [options]
-  );
-
   const handleClick = useCallback(
     (option: VariantOption) => {
       if (onChange) {
@@ -54,44 +43,83 @@ export const Variant = ({
     [onChange, preventDefaultClick, params, attribute_key, pathname, router]
   );
 
+  // Base button classes that don't change with theme editor
+  const baseButtonClasses = 'transition-colors duration-200 tracking-[0.39px]';
+
   return (
     <div
-      className={clsx('flex flex-col gap-2', className)}
+      className={clsx('flex flex-col gap-2.5', className)}
       data-testid={`product-variant-${attribute_name}`}
     >
-      <p className="flex gap-2 text-xs leading-4">
-        <span>
-          {hasSelected
-            ? `${t('product.selected')} ${attribute_name}:`
-            : attribute_name}
-        </span>
-        {hasSelected && (
-          <span
-            className="font-bold"
-            data-testid={`product-variant-${attribute_name}-value`}
-          >
-            {selectedVariant?.value}
-          </span>
-        )}
+      <p
+        style={{
+          fontSize: 'var(--variant-label-font-size, 13px)',
+          fontWeight: 'var(--variant-label-font-weight, 400)',
+          color: 'var(--variant-label-color, #030712)'
+        }}
+      >
+        <span>{attribute_name}</span>
       </p>
-      <div className="flex gap-3 flex-wrap justify-center">
+
+      <div className="flex gap-1.5 flex-wrap">
         {options.map((option, i) => (
           <button
             key={`${i}-${option.value}`}
-            className={clsx(
-              'h-10 px-4 transition-colors duration-200 text-xs',
-              {
-                'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground pointer-events-none':
-                  option.is_selected,
-                'bg-gray-200 hover:bg-gray-400':
-                  option.is_selectable && !option.is_selected,
-                'border border-gray-300 text-gray-600': !option.is_selectable,
-                'cursor-not-allowed':
-                  !option.is_selectable && !option.is_selectable_without_stock,
-                'border border-dashed border-black bg-white text-gray-600 overflow-hidden relative':
-                  !option.is_selectable && option.is_selected
+            className={clsx(baseButtonClasses, {
+              'pointer-events-none': option.is_selected,
+              'cursor-not-allowed':
+                !option.is_selectable && !option.is_selectable_without_stock
+            })}
+            style={{
+              fontSize: 'var(--variant-button-font-size, 13px)',
+              fontWeight: 'var(--variant-button-font-weight, 400)',
+              height: 'var(--variant-button-height, 36px)',
+              paddingLeft: 'var(--variant-button-padding-x, 12px)',
+              paddingRight: 'var(--variant-button-padding-x, 12px)',
+              borderRadius: 'var(--variant-button-border-radius)',
+              borderWidth: 'var(--variant-button-border-width, 1px)',
+              borderStyle: 'solid',
+              ...(option.is_selected
+                ? {
+                    color: 'var(--variant-selected-color, #ffffff)',
+                    backgroundColor:
+                      'var(--variant-selected-background-color, #030712)',
+                    borderColor: 'var(--variant-selected-border-color, #030712)'
+                  }
+                : option.is_selectable
+                ? {
+                    color: 'var(--variant-button-color, #1f2937)',
+                    backgroundColor:
+                      'var(--variant-button-background-color, transparent)',
+                    borderColor: 'var(--variant-button-border-color, #9ca3af)'
+                  }
+                : {
+                    color: 'var(--variant-disabled-color, #9ca3af)',
+                    backgroundColor:
+                      'var(--variant-disabled-background-color, transparent)',
+                    borderColor: 'var(--variant-disabled-border-color, #d1d5db)'
+                  })
+            }}
+            onMouseEnter={(e) => {
+              if (option.is_selectable && !option.is_selected) {
+                e.currentTarget.style.color =
+                  'var(--variant-hover-color, #ffffff)';
+                e.currentTarget.style.backgroundColor =
+                  'var(--variant-hover-background-color, #030712)';
+                e.currentTarget.style.borderColor =
+                  'var(--variant-hover-border-color, #030712)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (option.is_selectable && !option.is_selected) {
+                e.currentTarget.style.color =
+                  'var(--variant-button-color, #1f2937)';
+                e.currentTarget.style.backgroundColor =
+                  'var(--variant-button-background-color, transparent)';
+                e.currentTarget.style.borderColor =
+                  'var(--variant-button-border-color, #9ca3af)';
               }
-            )}
+            }}
             onClick={() => handleClick(option)}
           >
             {option.value}

package/app-template/src/views/product/variants-section.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ProductVariants } from './product-variants';
+import { VariantType } from '@akinon/next/types';
+import {
+  useProductDetail,
+  VARIANTS_SECTION_ID
+} from '@theme/views/product-detail';
+import clsx from 'clsx';
+
+interface VariantsSectionProps {
+  variants: VariantType[];
+  onVariantChange: () => void;
+}
+
+export const VariantsSection: React.FC<VariantsSectionProps> = ({
+  variants,
+  onVariantChange
+}) => {
+  const { isDesigner, selectedSectionId, variantsStyles } = useProductDetail();
+
+  const isSelected = selectedSectionId === VARIANTS_SECTION_ID;
+
+  // Handle designer click for section selection
+  const handleDesignerClick = () => {
+    if (isDesigner) {
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: VARIANTS_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  const variantStyles = useMemo(() => {
+    const result: Record<string, string> = {};
+
+    // Label styles
+    if (variantsStyles['label-font-size'])
+      result['--variant-label-font-size'] = variantsStyles['label-font-size'];
+    if (variantsStyles['label-font-weight'])
+      result['--variant-label-font-weight'] =
+        variantsStyles['label-font-weight'];
+    if (variantsStyles['label-color'])
+      result['--variant-label-color'] = variantsStyles['label-color'];
+
+    // Button typography
+    if (variantsStyles['button-font-size'])
+      result['--variant-button-font-size'] = variantsStyles['button-font-size'];
+    if (variantsStyles['button-font-weight'])
+      result['--variant-button-font-weight'] =
+        variantsStyles['button-font-weight'];
+
+    // Button sizing
+    if (variantsStyles['button-height'])
+      result['--variant-button-height'] = variantsStyles['button-height'];
+    if (variantsStyles['button-padding-x'])
+      result['--variant-button-padding-x'] = variantsStyles['button-padding-x'];
+    if (variantsStyles['button-border-radius'])
+      result['--variant-button-border-radius'] =
+        variantsStyles['button-border-radius'];
+    if (variantsStyles['button-border-width'])
+      result['--variant-button-border-width'] =
+        variantsStyles['button-border-width'];
+
+    // Default state
+    if (variantsStyles['button-color'])
+      result['--variant-button-color'] = variantsStyles['button-color'];
+    if (variantsStyles['button-background-color'])
+      result['--variant-button-background-color'] =
+        variantsStyles['button-background-color'];
+    if (variantsStyles['button-border-color'])
+      result['--variant-button-border-color'] =
+        variantsStyles['button-border-color'];
+
+    // Selected state
+    if (variantsStyles['selected-color'])
+      result['--variant-selected-color'] = variantsStyles['selected-color'];
+    if (variantsStyles['selected-background-color'])
+      result['--variant-selected-background-color'] =
+        variantsStyles['selected-background-color'];
+    if (variantsStyles['selected-border-color'])
+      result['--variant-selected-border-color'] =
+        variantsStyles['selected-border-color'];
+
+    // Hover state
+    if (variantsStyles['hover-color'])
+      result['--variant-hover-color'] = variantsStyles['hover-color'];
+    if (variantsStyles['hover-background-color'])
+      result['--variant-hover-background-color'] =
+        variantsStyles['hover-background-color'];
+    if (variantsStyles['hover-border-color'])
+      result['--variant-hover-border-color'] =
+        variantsStyles['hover-border-color'];
+
+    // Disabled state
+    if (variantsStyles['disabled-color'])
+      result['--variant-disabled-color'] = variantsStyles['disabled-color'];
+    if (variantsStyles['disabled-background-color'])
+      result['--variant-disabled-background-color'] =
+        variantsStyles['disabled-background-color'];
+    if (variantsStyles['disabled-border-color'])
+      result['--variant-disabled-border-color'] =
+        variantsStyles['disabled-border-color'];
+
+    return result;
+  }, [variantsStyles]);
+
+  return (
+    <div
+      style={variantStyles}
+      className={clsx('relative', {
+        'ring-2 ring-blue-500 ring-offset-2': isDesigner && isSelected
+      })}
+      onClick={handleDesignerClick}
+    >
+      <ProductVariants variants={variants} onVariantChange={onVariantChange} />
+    </div>
+  );
+};

package/app-template/src/views/product-detail/constants.ts

@@ -0,0 +1,272 @@
+/**
+ * Product Detail Page Constants
+ *
+ * Shared constants for product detail native widget.
+ * This file can be imported by both server and client components.
+ */
+
+export const PRODUCT_DETAIL_PLACEHOLDER_ID = 'product-detail';
+export const PRODUCT_DETAIL_WIDGET_SLUG = 'product-detail-styles';
+
+// Section IDs
+export const ADD_TO_CART_SECTION_ID = 'add-to-cart-section';
+export const QUANTITY_SECTION_ID = 'quantity-section';
+export const VARIANTS_SECTION_ID = 'variants-section';
+export const PRODUCT_INFO_SECTION_ID = 'product-info-section';
+export const SHARE_SECTION_ID = 'share-section';
+export const ACCORDION_SECTION_ID = 'accordion-section';
+export const FAVORITES_BUTTON_SECTION_ID = 'favorites-button-section';
+export const FIND_IN_STORE_SECTION_ID = 'find-in-store-section';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface AddToCartProperties {
+  // Future properties can be added here
+}
+
+export interface AddToCartStyles {
+  'font-size'?: string;
+  'font-weight'?: string;
+  color?: string;
+  'background-color'?: string;
+  'border-color'?: string;
+  'border-width'?: string;
+  'border-radius'?: string;
+  'padding-x'?: string;
+  'padding-y'?: string;
+  height?: string;
+  'hover-background-color'?: string;
+  'hover-text-color'?: string;
+  [key: string]: string | undefined;
+}
+
+/**
+ * Quantity Selector Display Type
+ * - 'buttons': Plus/minus buttons (default)
+ * - 'dropdown': Dropdown select menu
+ */
+export type QuantityDisplayType = 'buttons' | 'dropdown';
+
+export interface QuantityProperties {
+  displayType: QuantityDisplayType;
+  maxDropdownOptions?: number;
+}
+
+export interface QuantityStyles {
+  // Container styles
+  width?: string;
+  height?: string;
+  'background-color'?: string;
+  'border-color'?: string;
+  'border-width'?: string;
+  'border-radius'?: string;
+  // Button styles (for buttons mode)
+  'button-color'?: string;
+  'button-hover-color'?: string;
+  // Text styles
+  'font-size'?: string;
+  'font-weight'?: string;
+  color?: string;
+  [key: string]: string | undefined;
+}
+
+export interface VariantsStyles {
+  // Label styles
+  'label-font-size'?: string;
+  'label-font-weight'?: string;
+  'label-color'?: string;
+  // Button styles
+  'button-font-size'?: string;
+  'button-font-weight'?: string;
+  'button-height'?: string;
+  'button-padding-x'?: string;
+  'button-border-radius'?: string;
+  // Default state
+  'button-color'?: string;
+  'button-background-color'?: string;
+  'button-border-color'?: string;
+  'button-border-width'?: string;
+  // Selected state
+  'selected-color'?: string;
+  'selected-background-color'?: string;
+  'selected-border-color'?: string;
+  // Hover state
+  'hover-color'?: string;
+  'hover-background-color'?: string;
+  'hover-border-color'?: string;
+  // Disabled state
+  'disabled-color'?: string;
+  'disabled-background-color'?: string;
+  'disabled-border-color'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface ProductInfoStyles {
+  // Product name styles
+  'name-font-size'?: string;
+  'name-font-weight'?: string;
+  'name-color'?: string;
+  'name-line-height'?: string;
+  // Price styles
+  'price-font-size'?: string;
+  'price-font-weight'?: string;
+  'price-color'?: string;
+  // Retail price styles
+  'retail-price-font-size'?: string;
+  'retail-price-font-weight'?: string;
+  'retail-price-color'?: string;
+  'retail-price-text-decoration'?: string;
+  // Description styles
+  'description-font-size'?: string;
+  'description-font-weight'?: string;
+  'description-color'?: string;
+  'description-line-height'?: string;
+  [key: string]: string | undefined;
+}
+
+/**
+ * Share Button Layout Type
+ * - 'floating': Expandable horizontal (default, sağa açılan)
+ * - 'inline-horizontal': Icons displayed inline horizontally
+ * - 'inline-vertical': Icons displayed inline vertically
+ * - 'icon-only': Only icons without button text
+ * - 'compact': Minimal size view
+ */
+export type ShareLayoutType =
+  | 'floating'
+  | 'inline-horizontal'
+  | 'inline-vertical'
+  | 'icon-only'
+  | 'compact';
+
+export interface ShareProperties {
+  layout: ShareLayoutType;
+  showLabel?: boolean;
+}
+
+export interface ShareStyles {
+  // Button styles
+  'button-font-size'?: string;
+  'button-font-weight'?: string;
+  'button-color'?: string;
+  'button-background-color'?: string;
+  'button-border-color'?: string;
+  'button-border-width'?: string;
+  'button-border-radius'?: string;
+  'button-padding-x'?: string;
+  'button-padding-y'?: string;
+  // Icon styles
+  'icon-size'?: string;
+  'icon-color'?: string;
+  'icon-hover-color'?: string;
+  'icon-background-color'?: string;
+  'icon-hover-background-color'?: string;
+  'icon-border-radius'?: string;
+  'icon-spacing'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface AccordionStyles {
+  // Container styles
+  'container-border-color'?: string;
+  'container-border-width'?: string;
+  'container-border-radius'?: string;
+  'container-spacing'?: string;
+  // Header/Title styles
+  'title-font-size'?: string;
+  'title-font-weight'?: string;
+  'title-color'?: string;
+  'title-background-color'?: string;
+  'title-padding-x'?: string;
+  'title-padding-y'?: string;
+  // Icon styles
+  'icon-size'?: string;
+  'icon-color'?: string;
+  'icon-hover-color'?: string;
+  // Content styles
+  'content-font-size'?: string;
+  'content-font-weight'?: string;
+  'content-color'?: string;
+  'content-padding-x'?: string;
+  'content-padding-y'?: string;
+  'content-background-color'?: string;
+  // Hover state
+  'hover-background-color'?: string;
+  'hover-title-color'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface FavoritesButtonProperties {
+  icon?: string;
+  iconActive?: string;
+}
+
+export interface FavoritesButtonStyles {
+  // Button styles
+  'font-size'?: string;
+  'font-weight'?: string;
+  color?: string;
+  'background-color'?: string;
+  'border-color'?: string;
+  'border-width'?: string;
+  'border-radius'?: string;
+  'padding-x'?: string;
+  'padding-y'?: string;
+  height?: string;
+  // Icon styles
+  'icon-size'?: string;
+  'icon-color'?: string;
+  'icon-active-color'?: string;
+  // Hover state
+  'hover-background-color'?: string;
+  'hover-text-color'?: string;
+  'hover-icon-color'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface FindInStoreProperties {
+  icon?: string;
+  showIcon?: boolean;
+}
+
+export interface FindInStoreStyles {
+  // Button styles
+  'button-font-size'?: string;
+  'button-font-weight'?: string;
+  'button-color'?: string;
+  'button-background-color'?: string;
+  'button-border-color'?: string;
+  'button-border-width'?: string;
+  'button-border-radius'?: string;
+  'button-padding-x'?: string;
+  'button-padding-y'?: string;
+  'button-height'?: string;
+  // Icon styles
+  'icon-size'?: string;
+  'icon-color'?: string;
+  // Hover state
+  'button-hover-background-color'?: string;
+  'button-hover-text-color'?: string;
+  'button-hover-icon-color'?: string;
+  // Modal styles
+  'modal-width'?: string;
+  'modal-max-width'?: string;
+  'modal-max-height'?: string;
+  'modal-title-font-size'?: string;
+  'modal-title-font-weight'?: string;
+  'modal-title-color'?: string;
+  'modal-background-color'?: string;
+  'modal-border-radius'?: string;
+  // Modal button styles
+  'modal-button-font-size'?: string;
+  'modal-button-font-weight'?: string;
+  'modal-button-color'?: string;
+  'modal-button-background-color'?: string;
+  'modal-button-border-color'?: string;
+  'modal-button-border-width'?: string;
+  'modal-button-border-radius'?: string;
+  'modal-button-padding-x'?: string;
+  'modal-button-padding-y'?: string;
+  'modal-button-hover-background-color'?: string;
+  'modal-button-hover-text-color'?: string;
+  [key: string]: string | undefined;
+}

package/app-template/src/views/product-detail/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Product Detail Native Widget
+ *
+ * This module exports the product detail registrar and context
+ * for Theme Editor integration.
+ */
+
+export { default as ProductDetailRegistrar } from './product-detail-registrar';
+export { useProductDetail } from './product-detail-registrar';
+export * from './constants';