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

package/app-template/src/widgets/footer-social-client.tsx

@@ -1,251 +0,0 @@
-'use client';
-
-import type { CSSProperties } from 'react';
-import clsx from 'clsx';
-import { Link, Icon } from '@theme/components';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  useFooterSocialDesigner,
-  FOOTER_SOCIAL_ICONS_BLOCK_ID,
-  type SocialIconItem
-} from '../views/footer/footer-social-context';
-import {
-  FOOTER_PLACEHOLDER_ID,
-  FOOTER_SOCIAL_SECTION_ID
-} from '../views/footer/native-widget-config';
-
-const kebabToCamel = (str: string): string =>
-  str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-
-const normalizeStyles = (
-  styles: Record<string, unknown> | undefined
-): CSSProperties => {
-  if (!styles) return {};
-
-  const result: Record<string, string | number> = {};
-
-  for (const [key, value] of Object.entries(styles)) {
-    if (value == null) continue;
-
-    const camelKey = kebabToCamel(key);
-    let resolved: unknown = value;
-
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      const responsive = value as Record<string, unknown>;
-      resolved = responsive.desktop ?? responsive.mobile ?? responsive.tablet;
-    }
-
-    if (resolved != null) {
-      if (typeof resolved === 'number') {
-        result[camelKey] = resolved;
-      } else if (typeof resolved === 'string') {
-        result[camelKey] = resolved;
-      }
-    }
-  }
-
-  return result as CSSProperties;
-};
-
-// Legacy types for backwards compatibility
-type SocialNetwork = {
-  key: string;
-  url: string;
-  icon: string;
-};
-
-type SocialItem = {
-  value: {
-    icon_class?: string;
-    site_name: string;
-    redirect_url: string;
-    is_target_blank: string;
-  };
-};
-
-interface FooterSocialClientProps {
-  activeNetworks: SocialNetwork[];
-  socialItems: SocialItem[];
-}
-
-// Resolve responsive value to actual value
-const resolveValue = <T,>(value: unknown, defaultValue: T): T => {
-  if (value == null) return defaultValue;
-  if (typeof value === 'object' && !Array.isArray(value)) {
-    const responsive = value as Record<string, unknown>;
-    const resolved =
-      responsive.desktop ?? responsive.mobile ?? responsive.tablet;
-    return (resolved as T) ?? defaultValue;
-  }
-  return value as T;
-};
-
-export default function FooterSocialClient({
-  activeNetworks,
-  socialItems
-}: FooterSocialClientProps) {
-  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
-    useFooterSocialDesigner();
-
-  const iconsBlock =
-    blockVersion >= 0 ? getBlock(FOOTER_SOCIAL_ICONS_BLOCK_ID) : undefined;
-  const iconStylesRaw = iconsBlock?.styles as
-    | Record<string, unknown>
-    | undefined;
-  const iconStyles = normalizeStyles(iconStylesRaw);
-
-  // Get custom icons from properties (new social-icons-list format)
-  const blockProperties = iconsBlock?.properties as
-    | Record<string, unknown>
-    | undefined;
-  const customIcons = resolveValue<SocialIconItem[]>(
-    blockProperties?.icons,
-    []
-  );
-
-  // Gap between icons from styles
-  const iconGap = resolveValue<string | number>(iconStylesRaw?.gap, 16);
-
-  const { handleClick: handleIconsClick } = useDesignerFeatures({
-    blockId: FOOTER_SOCIAL_ICONS_BLOCK_ID,
-    placeholderId: FOOTER_PLACEHOLDER_ID,
-    sectionId: FOOTER_SOCIAL_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: FOOTER_SOCIAL_ICONS_BLOCK_ID,
-      type: 'social-icons-list',
-      label: 'Social Icons'
-    }
-  });
-
-  const isIconsSelected = selectedBlockId === FOOTER_SOCIAL_ICONS_BLOCK_ID;
-
-  // Process SVG to apply color - replace fill/stroke attributes with the chosen color
-  const processSvgColor = (svgHtml: string, color: string | undefined) => {
-    if (!color) return svgHtml;
-    // Replace fill and stroke attributes (but not fill="none" which is used for transparency)
-    let processed = svgHtml
-      .replace(/fill="(?!none)[^"]*"/gi, `fill="${color}"`)
-      .replace(/stroke="(?!none)[^"]*"/gi, `stroke="${color}"`);
-    // If no fill attribute exists, add one to the svg element
-    if (!processed.includes('fill=')) {
-      processed = processed.replace('<svg', `<svg fill="${color}"`);
-    }
-    return processed;
-  };
-
-  // Render custom icons from theme editor (new format)
-  if (customIcons.length > 0) {
-    return (
-      <div
-        className={clsx(
-          'flex items-center',
-          isDesigner && 'cursor-pointer',
-          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
-        )}
-        style={{ gap: `${iconGap}px` }}
-        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
-        onClick={isDesigner ? handleIconsClick : undefined}
-      >
-        {customIcons.map((item, i) => (
-          <Link key={i} href={item.link} target="_blank">
-            <Icon
-              size={item.size || 24}
-              name={item.icon}
-              style={{ color: item.color }}
-            />
-          </Link>
-        ))}
-      </div>
-    );
-  }
-
-  // Fallback: Render legacy activeNetworks (SVG icons from theme-config)
-  if (activeNetworks.length > 0) {
-    // Legacy: use global color/size from styles
-    const legacyIconColor = iconStyles.color as string | undefined;
-    const legacyIconSize = resolveValue<number>(iconStylesRaw?.size, 18);
-
-    return (
-      <div
-        className={clsx(
-          'flex items-center',
-          isDesigner && 'cursor-pointer',
-          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
-        )}
-        style={{ gap: `${iconGap}px` }}
-        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
-        onClick={isDesigner ? handleIconsClick : undefined}
-      >
-        {activeNetworks.map((network, i) => (
-          <Link key={i} href={network.url} target="_blank">
-            <div
-              className="flex items-center justify-center [&>svg]:w-full [&>svg]:h-full"
-              style={{
-                width: legacyIconSize,
-                height: legacyIconSize
-              }}
-              dangerouslySetInnerHTML={{
-                __html: processSvgColor(network.icon, legacyIconColor)
-              }}
-            />
-          </Link>
-        ))}
-      </div>
-    );
-  }
-
-  // Fallback: Render legacy socialItems (font icons from footer-social widget)
-  if (socialItems.length > 0) {
-    const legacyIconColor = iconStyles.color as string | undefined;
-    const legacyIconSize = resolveValue<number>(iconStylesRaw?.size, 18);
-
-    return (
-      <div
-        className={clsx(
-          'flex items-center',
-          isDesigner && 'cursor-pointer',
-          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
-        )}
-        style={{ gap: `${iconGap}px` }}
-        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
-        onClick={isDesigner ? handleIconsClick : undefined}
-      >
-        {socialItems.map((item, i) => (
-          <Link
-            key={i}
-            href={item?.value?.redirect_url}
-            target={
-              item?.value?.is_target_blank === 'true' ? '_blank' : '_self'
-            }
-            style={{ color: legacyIconColor }}
-          >
-            <Icon
-              size={legacyIconSize}
-              name={item?.value?.icon_class?.replace('pz-icon-', '')}
-            />
-          </Link>
-        ))}
-      </div>
-    );
-  }
-
-  // Designer mode: Show placeholder when no icons
-  if (isDesigner) {
-    return (
-      <div
-        className={clsx(
-          'flex items-center gap-4 py-2 px-4 border border-dashed border-gray-400 rounded text-gray-400 text-sm',
-          'cursor-pointer',
-          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2'
-        )}
-        data-block-id={FOOTER_SOCIAL_ICONS_BLOCK_ID}
-        onClick={handleIconsClick}
-      >
-        Click to add social icons
-      </div>
-    );
-  }
-
-  return null;
-}

package/app-template/src/widgets/footer-value-props.tsx

@@ -1,201 +0,0 @@
-'use client';
-
-import { useCallback, type CSSProperties } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@theme/components';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  useFooterValuePropsDesigner,
-  FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
-  type ValuePropItem
-} from '../views/footer/footer-value-props-context';
-import {
-  FOOTER_PLACEHOLDER_ID,
-  FOOTER_VALUE_PROPS_SECTION_ID
-} from '../views/footer/native-widget-config';
-
-const resolveValue = <T,>(value: unknown, defaultValue: T): T => {
-  if (value == null) return defaultValue;
-  if (typeof value === 'object' && !Array.isArray(value)) {
-    const responsive = value as Record<string, unknown>;
-    const resolved =
-      responsive.desktop ?? responsive.mobile ?? responsive.tablet;
-    return (resolved as T) ?? defaultValue;
-  }
-  return value as T;
-};
-
-const DEFAULT_VALUE_PROPS: ValuePropItem[] = [
-  { icon: 'home', title: 'Free Shipping', description: 'On orders over $50' },
-  { icon: 'add', title: 'Secure Payment', description: '256-bit SSL encryption' },
-  { icon: 'search', title: 'Easy Returns', description: '30-day return policy' }
-];
-
-interface FooterValuePropsProps {
-  renderPosition?: 'footer-top' | 'footer-bottom';
-}
-
-export default function FooterValueProps({ renderPosition }: FooterValuePropsProps) {
-  const {
-    isDesigner,
-    selectedSectionId,
-    selectedBlockId,
-    getBlock,
-    getSectionProperty,
-    getSectionStyle,
-    blockVersion
-  } = useFooterValuePropsDesigner();
-
-  const { handleClick: handleListClick } = useDesignerFeatures({
-    blockId: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
-    placeholderId: FOOTER_PLACEHOLDER_ID,
-    sectionId: FOOTER_VALUE_PROPS_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
-      type: 'value-props-list',
-      label: 'Value Props List'
-    }
-  });
-
-  const handleSectionClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner) {
-        e.stopPropagation();
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'SELECT_SECTION',
-              data: {
-                placeholderId: FOOTER_PLACEHOLDER_ID,
-                sectionId: FOOTER_VALUE_PROPS_SECTION_ID
-              }
-            },
-            '*'
-          );
-        }
-      }
-    },
-    [isDesigner]
-  );
-
-  const enabled = resolveValue<boolean>(getSectionProperty('enabled'), true);
-  const layout = resolveValue<string>(getSectionProperty('layout'), 'horizontal');
-  const position = resolveValue<string>(getSectionProperty('position'), 'footer-top');
-
-  if (renderPosition && position !== renderPosition) {
-    return null;
-  }
-
-  if (!enabled && !isDesigner) {
-    return null;
-  }
-
-  const sectionStyles: CSSProperties = {
-    backgroundColor: resolveValue<string>(getSectionStyle('background-color'), '#ffffff'),
-    paddingTop: `${resolveValue<number>(getSectionStyle('padding-top'), 24)}px`,
-    paddingBottom: `${resolveValue<number>(getSectionStyle('padding-bottom'), 24)}px`,
-    borderTopWidth: `${resolveValue<number>(getSectionStyle('border-top-width'), 1)}px`,
-    borderTopStyle: 'solid',
-    borderTopColor: resolveValue<string>(getSectionStyle('border-top-color'), '#e5e7eb'),
-    borderBottomWidth: `${resolveValue<number>(getSectionStyle('border-bottom-width'), 0)}px`,
-    borderBottomStyle: 'solid',
-    borderBottomColor: resolveValue<string>(getSectionStyle('border-bottom-color'), '#e5e7eb')
-  };
-
-  const listBlock = blockVersion >= 0 ? getBlock(FOOTER_VALUE_PROPS_LIST_BLOCK_ID) : undefined;
-  const listStylesRaw = listBlock?.styles as Record<string, unknown> | undefined;
-  const listGap = resolveValue<number>(listStylesRaw?.gap, 32);
-
-  const blockProperties = listBlock?.properties as Record<string, unknown> | undefined;
-  const items = resolveValue<ValuePropItem[]>(blockProperties?.items, DEFAULT_VALUE_PROPS);
-
-  const isSectionSelected = selectedSectionId === FOOTER_VALUE_PROPS_SECTION_ID && !selectedBlockId;
-
-  if (!enabled && isDesigner) {
-    return (
-      <div
-        data-section-id={FOOTER_VALUE_PROPS_SECTION_ID}
-        className="theme-section relative cursor-pointer"
-        style={sectionStyles}
-        onClick={handleSectionClick}
-      >
-        <div
-          className={clsx(
-            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
-            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
-          )}
-        />
-        <div className="container py-6 text-center text-gray-400 border border-dashed border-gray-300 rounded relative z-10">
-          Value Propositions (disabled - click section to enable)
-        </div>
-      </div>
-    );
-  }
-
-  const isListSelected = selectedBlockId === FOOTER_VALUE_PROPS_LIST_BLOCK_ID;
-
-  return (
-    <div
-      data-section-id={FOOTER_VALUE_PROPS_SECTION_ID}
-      className={clsx(
-        'theme-section relative',
-        isDesigner && 'cursor-pointer'
-      )}
-      style={sectionStyles}
-      onClick={isDesigner ? handleSectionClick : undefined}
-    >
-      {isDesigner && (
-        <div
-          className={clsx(
-            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
-            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
-          )}
-        />
-      )}
-      <div className="container relative z-10">
-        <div
-          className={clsx(
-            layout === 'horizontal'
-              ? 'flex flex-wrap justify-center md:justify-between items-start'
-              : 'grid grid-cols-2 md:grid-cols-4',
-            isDesigner && 'cursor-pointer',
-            isListSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded p-2'
-          )}
-          style={{ gap: `${listGap}px` }}
-          onClick={isDesigner ? handleListClick : undefined}
-          data-block-id={isDesigner ? FOOTER_VALUE_PROPS_LIST_BLOCK_ID : undefined}
-        >
-          {items.length > 0 ? (
-            items.map((item, index) => (
-              <div
-                key={index}
-                className="flex flex-col items-center text-center"
-              >
-                <div className="mb-2">
-                  <Icon
-                    name={item.icon}
-                    size={32}
-                    className="text-current"
-                  />
-                </div>
-                <h4 className="font-semibold text-base mb-1">
-                  {item.title}
-                </h4>
-                {item.description && (
-                  <p className="text-sm text-gray-600">
-                    {item.description}
-                  </p>
-                )}
-              </div>
-            ))
-          ) : isDesigner ? (
-            <div className="w-full py-4 text-center text-gray-400 border border-dashed border-gray-300 rounded">
-              Click to add value propositions
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}