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

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

@@ -1,357 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Button, Icon } from '@theme/components';
-// eslint-disable-next-line @akinon/projectzero/link-import
-import Link from 'next/link';
-import {
-  useProductDetail,
-  SHARE_SECTION_ID,
-  ShareLayoutType
-} from '@theme/views/product-detail';
-import clsx from 'clsx';
-
-interface ShareItem {
-  href: string;
-  iconName: 'facebook' | 'twitter' | 'whatsapp';
-  iconSize?: number;
-}
-
-interface ShareSectionProps {
-  productName: string;
-  buttonText?: string;
-  items: ShareItem[];
-  className?: string;
-}
-
-export const ShareSection: React.FC<ShareSectionProps> = ({
-  productName,
-  buttonText,
-  items,
-  className
-}) => {
-  const { isDesigner, selectedSectionId, shareStyles, shareProperties } =
-    useProductDetail();
-
-  const [open, setOpen] = useState(false);
-  const isSelected = selectedSectionId === SHARE_SECTION_ID;
-  const layout = shareProperties.layout || 'floating';
-  const showLabel = shareProperties.showLabel ?? true;
-
-  // Handle designer click for section selection
-  const handleDesignerClick = (e: React.MouseEvent) => {
-    if (isDesigner) {
-      e.stopPropagation();
-      window.parent?.postMessage(
-        {
-          type: 'SELECT_SECTION',
-          data: {
-            placeholderId: 'product-detail',
-            sectionId: SHARE_SECTION_ID
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  // Build CSS variables from shareStyles
-  const shareStyleVars: Record<string, string> = {};
-
-  // Button styles
-  if (shareStyles['button-font-size'])
-    shareStyleVars['--share-button-font-size'] =
-      shareStyles['button-font-size'];
-  if (shareStyles['button-font-weight'])
-    shareStyleVars['--share-button-font-weight'] =
-      shareStyles['button-font-weight'];
-  if (shareStyles['button-color'])
-    shareStyleVars['--share-button-color'] = shareStyles['button-color'];
-  if (shareStyles['button-background-color'])
-    shareStyleVars['--share-button-background-color'] =
-      shareStyles['button-background-color'];
-  if (shareStyles['button-border-color'])
-    shareStyleVars['--share-button-border-color'] =
-      shareStyles['button-border-color'];
-  if (shareStyles['button-border-width'])
-    shareStyleVars['--share-button-border-width'] =
-      shareStyles['button-border-width'];
-  if (shareStyles['button-border-radius'])
-    shareStyleVars['--share-button-border-radius'] =
-      shareStyles['button-border-radius'];
-  if (shareStyles['button-padding-x'])
-    shareStyleVars['--share-button-padding-x'] =
-      shareStyles['button-padding-x'];
-  if (shareStyles['button-padding-y'])
-    shareStyleVars['--share-button-padding-y'] =
-      shareStyles['button-padding-y'];
-
-  // Icon styles
-  if (shareStyles['icon-size'])
-    shareStyleVars['--share-icon-size'] = shareStyles['icon-size'];
-  if (shareStyles['icon-color'])
-    shareStyleVars['--share-icon-color'] = shareStyles['icon-color'];
-  if (shareStyles['icon-hover-color'])
-    shareStyleVars['--share-icon-hover-color'] =
-      shareStyles['icon-hover-color'];
-  if (shareStyles['icon-background-color'])
-    shareStyleVars['--share-icon-background-color'] =
-      shareStyles['icon-background-color'];
-  if (shareStyles['icon-hover-background-color'])
-    shareStyleVars['--share-icon-hover-background-color'] =
-      shareStyles['icon-hover-background-color'];
-  if (shareStyles['icon-border-radius'])
-    shareStyleVars['--share-icon-border-radius'] =
-      shareStyles['icon-border-radius'];
-  if (shareStyles['icon-spacing'])
-    shareStyleVars['--share-icon-spacing'] = shareStyles['icon-spacing'];
-
-  // Render different layouts
-  const renderFloatingLayout = () => (
-    <div className={clsx('flex items-center gap-4 border-t', className)}>
-      <Button
-        onClick={() => setOpen(!open)}
-        appearance="ghost"
-        className="text-base p-0 bg-transparent hover:bg-transparent hover:text-primary"
-        style={{
-          fontSize: 'var(--share-button-font-size, 16px)',
-          fontWeight: 'var(--share-button-font-weight, 400)',
-          color: 'var(--share-button-color, inherit)',
-          backgroundColor: 'var(--share-button-background-color, transparent)',
-          borderColor: 'var(--share-button-border-color, transparent)',
-          borderWidth: 'var(--share-button-border-width, 0)',
-          borderRadius: 'var(--share-button-border-radius, 0)',
-          paddingLeft: 'var(--share-button-padding-x, 0)',
-          paddingRight: 'var(--share-button-padding-x, 0)',
-          paddingTop: 'var(--share-button-padding-y, 0)',
-          paddingBottom: 'var(--share-button-padding-y, 0)'
-        }}
-        aria-label="Share"
-      >
-        <div className="flex items-center gap-2">
-          <Icon
-            name="share"
-            size={Number(shareStyles['icon-size']) || 24}
-            style={{
-              color: 'var(--share-icon-color, inherit)'
-            }}
-          />
-          {showLabel && buttonText && <span>{buttonText}</span>}
-        </div>
-      </Button>
-
-      <div
-        className={clsx(
-          'share-group flex transition-max-width ease-linear duration-300',
-          open
-            ? 'opacity-100 max-w-xs visible pointer-events-auto'
-            : 'opacity-0 max-w-0 invisible pointer-events-none'
-        )}
-        style={{
-          gap: 'var(--share-icon-spacing, 0)'
-        }}
-      >
-        {items.map((item, index) => (
-          <Link
-            key={index}
-            target="_blank"
-            href={item.href}
-            className="p-4 h-auto flex items-center hover:bg-gray-100"
-            style={{
-              borderRadius: 'var(--share-icon-border-radius, 0)',
-              backgroundColor: 'var(--share-icon-background-color, transparent)'
-            }}
-          >
-            <Icon
-              name={item.iconName}
-              size={Number(shareStyles['icon-size']) || item.iconSize || 12}
-              style={{
-                color: 'var(--share-icon-color, inherit)'
-              }}
-            />
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-
-  const renderInlineHorizontalLayout = () => (
-    <div
-      className={clsx('flex items-center flex-wrap', className)}
-      style={{
-        gap: 'var(--share-icon-spacing, 12px)'
-      }}
-    >
-      {showLabel && buttonText && (
-        <span
-          style={{
-            fontSize: 'var(--share-button-font-size, 16px)',
-            fontWeight: 'var(--share-button-font-weight, 400)',
-            color: 'var(--share-button-color, inherit)'
-          }}
-        >
-          {buttonText}:
-        </span>
-      )}
-      {items.map((item, index) => (
-        <Link
-          key={index}
-          target="_blank"
-          href={item.href}
-          className="inline-flex items-center justify-center transition-colors"
-          style={{
-            padding: 'var(--share-button-padding-y, 8px)',
-            borderRadius: 'var(--share-icon-border-radius, 4px)',
-            backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
-            color: 'var(--share-icon-color, inherit)'
-          }}
-        >
-          <Icon
-            name={item.iconName}
-            size={Number(shareStyles['icon-size']) || item.iconSize || 20}
-          />
-        </Link>
-      ))}
-    </div>
-  );
-
-  const renderInlineVerticalLayout = () => (
-    <div
-      className={clsx('flex flex-col', className)}
-      style={{
-        gap: 'var(--share-icon-spacing, 12px)'
-      }}
-    >
-      {showLabel && buttonText && (
-        <span
-          style={{
-            fontSize: 'var(--share-button-font-size, 16px)',
-            fontWeight: 'var(--share-button-font-weight, 400)',
-            color: 'var(--share-button-color, inherit)'
-          }}
-        >
-          {buttonText}
-        </span>
-      )}
-      <div className="flex flex-col gap-2">
-        {items.map((item, index) => (
-          <Link
-            key={index}
-            target="_blank"
-            href={item.href}
-            className="inline-flex items-center justify-center transition-colors"
-            style={{
-              padding: 'var(--share-button-padding-y, 8px)',
-              borderRadius: 'var(--share-icon-border-radius, 4px)',
-              backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
-              color: 'var(--share-icon-color, inherit)',
-              width: 'fit-content'
-            }}
-          >
-            <Icon
-              name={item.iconName}
-              size={Number(shareStyles['icon-size']) || item.iconSize || 20}
-            />
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-
-  const renderIconOnlyLayout = () => (
-    <div
-      className={clsx('flex items-center flex-wrap', className)}
-      style={{
-        gap: 'var(--share-icon-spacing, 8px)'
-      }}
-    >
-      {items.map((item, index) => (
-        <Link
-          key={index}
-          target="_blank"
-          href={item.href}
-          className="inline-flex items-center justify-center transition-colors"
-          style={{
-            padding: 'var(--share-button-padding-y, 8px)',
-            borderRadius: 'var(--share-icon-border-radius, 50%)',
-            backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
-            color: 'var(--share-icon-color, inherit)'
-          }}
-        >
-          <Icon
-            name={item.iconName}
-            size={Number(shareStyles['icon-size']) || item.iconSize || 18}
-          />
-        </Link>
-      ))}
-    </div>
-  );
-
-  const renderCompactLayout = () => (
-    <div
-      className={clsx('flex items-center', className)}
-      style={{
-        gap: 'var(--share-icon-spacing, 6px)'
-      }}
-    >
-      {showLabel && buttonText && (
-        <span
-          style={{
-            fontSize: 'var(--share-button-font-size, 14px)',
-            fontWeight: 'var(--share-button-font-weight, 400)',
-            color: 'var(--share-button-color, inherit)'
-          }}
-        >
-          {buttonText}
-        </span>
-      )}
-      {items.map((item, index) => (
-        <Link
-          key={index}
-          target="_blank"
-          href={item.href}
-          className="inline-flex items-center justify-center transition-colors"
-          style={{
-            padding: 'var(--share-button-padding-y, 4px)',
-            borderRadius: 'var(--share-icon-border-radius, 4px)',
-            backgroundColor: 'var(--share-icon-background-color, transparent)',
-            color: 'var(--share-icon-color, inherit)'
-          }}
-        >
-          <Icon
-            name={item.iconName}
-            size={Number(shareStyles['icon-size']) || item.iconSize || 16}
-          />
-        </Link>
-      ))}
-    </div>
-  );
-
-  const renderLayout = () => {
-    switch (layout) {
-      case 'inline-horizontal':
-        return renderInlineHorizontalLayout();
-      case 'inline-vertical':
-        return renderInlineVerticalLayout();
-      case 'icon-only':
-        return renderIconOnlyLayout();
-      case 'compact':
-        return renderCompactLayout();
-      case 'floating':
-      default:
-        return renderFloatingLayout();
-    }
-  };
-
-  return (
-    <div
-      style={shareStyleVars}
-      className={clsx('relative', {
-        'ring-2 ring-blue-500 ring-offset-2': isDesigner && isSelected
-      })}
-      onClick={handleDesignerClick}
-    >
-      {renderLayout()}
-    </div>
-  );
-};

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

@@ -1,126 +0,0 @@
-'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>
-  );
-};