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

package/components/theme-editor/sections/stats-counter-section.tsx

@@ -1,486 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-import ThemeBlock, { Block } from '../theme-block';
-import { Section } from '../theme-section';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import { getCSSStyles, getResponsiveValue } from '../utils';
-
-interface StatsCounterSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-interface CounterTarget {
-  blockId: string;
-  endValue: number;
-  decimals: number;
-  useGrouping: boolean;
-}
-
-type CounterAnimationEasing = 'linear' | 'ease-out' | 'ease-in-out';
-
-const NUMBER_TOKEN_REGEX = /-?\d[\d.,]*/;
-
-const parseNumber = (value: unknown, fallback: number): number => {
-  if (value === undefined || value === null || value === '') return fallback;
-  if (typeof value === 'number') {
-    return Number.isFinite(value) ? value : fallback;
-  }
-
-  if (typeof value === 'string') {
-    const trimmed = value.trim();
-    if (!trimmed) return fallback;
-
-    const directParsed = Number(trimmed);
-    if (Number.isFinite(directParsed)) return directParsed;
-
-    const numericToken = trimmed
-      // Keep only numeric-safe chars so values like `1400ms` or `1,400` can still be parsed.
-      .replace(/[^\d.,-]/g, '')
-      .replace(/,/g, '');
-    const tokenParsed = Number(numericToken);
-
-    return Number.isFinite(tokenParsed) ? tokenParsed : fallback;
-  }
-
-  return fallback;
-};
-
-const parseBoolean = (value: unknown, fallback: boolean): boolean => {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') {
-    const normalized = value.trim().toLowerCase();
-    if (normalized === 'true') return true;
-    if (normalized === 'false') return false;
-  }
-  if (typeof value === 'number') return value !== 0;
-  return fallback;
-};
-
-const readEasingValue = (value: unknown): string | null => {
-  if (typeof value === 'string') return value;
-
-  if (typeof value === 'object' && value !== null) {
-    const objectValue = value as Record<string, unknown>;
-
-    if (typeof objectValue.value === 'string') {
-      return objectValue.value;
-    }
-
-    if (typeof objectValue.label === 'string') {
-      return objectValue.label;
-    }
-
-    const firstString = Object.values(objectValue).find(
-      (item) => typeof item === 'string'
-    );
-
-    if (typeof firstString === 'string') {
-      return firstString;
-    }
-  }
-
-  return null;
-};
-
-const parseAnimationEasing = (value: unknown): CounterAnimationEasing => {
-  const raw = readEasingValue(value);
-  if (!raw) return 'linear';
-
-  const normalized = raw
-    .trim()
-    .toLowerCase()
-    .replace(/_/g, '-')
-    .replace(/\s+/g, '-');
-
-  if (normalized === 'ease-out' || normalized === 'easeout') return 'ease-out';
-  if (
-    normalized === 'ease-in-out' ||
-    normalized === 'easeinout' ||
-    normalized === 'ease-inout'
-  ) {
-    return 'ease-in-out';
-  }
-
-  return 'linear';
-};
-
-const applyAnimationEasing = (
-  progress: number,
-  easing: CounterAnimationEasing
-): number => {
-  if (easing === 'ease-out') {
-    // Cubic ease-out: stronger acceleration contrast for visible difference.
-    return 1 - Math.pow(1 - progress, 3);
-  }
-
-  if (easing === 'ease-in-out') {
-    // Cubic ease-in-out: noticeably slower start and end.
-    return progress < 0.5
-      ? 4 * progress * progress * progress
-      : 1 - Math.pow(-2 * progress + 2, 3) / 2;
-  }
-
-  return progress;
-};
-
-const clampNumber = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), max);
-
-const stripHtml = (value: string): string =>
-  value
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/&nbsp;/gi, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-const resolveTextValue = (raw: unknown): string | null => {
-  let value = raw;
-
-  if (typeof value === 'string' && value.trim().startsWith('{')) {
-    try {
-      value = JSON.parse(value);
-    } catch {
-      // Keep original string.
-    }
-  }
-
-  if (typeof value === 'string') {
-    return value;
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    const objectValue = value as Record<string, unknown>;
-    const firstString = Object.values(objectValue).find(
-      (item) => typeof item === 'string'
-    );
-    return typeof firstString === 'string' ? firstString : null;
-  }
-
-  return null;
-};
-
-const getCounterTargetFromText = (value: string): Omit<CounterTarget, 'blockId'> | null => {
-  const plain = stripHtml(value);
-  const tokenMatch = plain.match(NUMBER_TOKEN_REGEX);
-
-  if (!tokenMatch) return null;
-
-  const token = tokenMatch[0];
-  const normalized = token.replace(/,/g, '');
-  const endValue = Number(normalized);
-
-  if (!Number.isFinite(endValue)) return null;
-
-  const decimals = normalized.includes('.')
-    ? normalized.split('.')[1]?.length || 0
-    : 0;
-
-  return {
-    endValue,
-    decimals,
-    useGrouping: token.includes(',')
-  };
-};
-
-const collectCounterTargets = (blocks: Block[]): CounterTarget[] => {
-  const targets: CounterTarget[] = [];
-
-  const walk = (block: Block) => {
-    const isCounterValueBlock =
-      block.type === 'text' &&
-      (block.properties?.statsRole === 'value' || block.label === 'Value');
-
-    if (isCounterValueBlock) {
-      const rawText = resolveTextValue(block.value);
-      if (!rawText) return;
-      const parsed = getCounterTargetFromText(rawText);
-      if (parsed) {
-        targets.push({
-          blockId: block.id,
-          ...parsed
-        });
-      }
-    }
-
-    if (block.blocks && block.blocks.length > 0) {
-      block.blocks.forEach(walk);
-    }
-  };
-
-  blocks.forEach(walk);
-  return targets;
-};
-
-const formatAnimatedNumber = (
-  value: number,
-  decimals: number,
-  useGrouping: boolean
-): string => {
-  if (decimals > 0) {
-    const rounded = Number(value.toFixed(decimals));
-    if (!useGrouping) return rounded.toFixed(decimals);
-
-    return rounded.toLocaleString(undefined, {
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals
-    });
-  }
-
-  const rounded = Math.round(value);
-  return useGrouping ? rounded.toLocaleString() : String(rounded);
-};
-
-const injectAnimatedValues = (
-  blocks: Block[],
-  animatedValues: Record<string, string>
-): Block[] => {
-  const replaceTokenInContent = (content: string, replacement: string): string => {
-    if (content.includes('<') && content.includes('>')) {
-      return content.replace(/>([^<]*)</, (fullMatch, innerText: string) => {
-        const nextInner = innerText.replace(NUMBER_TOKEN_REGEX, replacement);
-        return fullMatch.replace(innerText, nextInner);
-      });
-    }
-
-    return content.replace(NUMBER_TOKEN_REGEX, replacement);
-  };
-
-  const walk = (block: Block): Block => {
-    const cloned: Block = {
-      ...block,
-      properties: block.properties ? { ...block.properties } : block.properties,
-      styles: block.styles ? { ...block.styles } : block.styles
-    };
-
-    if (
-      cloned.type === 'text' &&
-      animatedValues[cloned.id] !== undefined
-    ) {
-      const replacement = animatedValues[cloned.id];
-
-      if (typeof cloned.value === 'string') {
-        const raw = cloned.value.trim();
-
-        if (raw.startsWith('{')) {
-          try {
-            const parsed = JSON.parse(cloned.value) as Record<string, unknown>;
-            const nextValue = Object.fromEntries(
-              Object.entries(parsed).map(([key, value]) => [
-                key,
-                typeof value === 'string'
-                  ? replaceTokenInContent(value, replacement)
-                  : value
-              ])
-            );
-            cloned.value = JSON.stringify(nextValue);
-          } catch {
-            cloned.value = replaceTokenInContent(cloned.value, replacement);
-          }
-        } else {
-          cloned.value = replaceTokenInContent(cloned.value, replacement);
-        }
-      } else if (typeof cloned.value === 'object' && cloned.value !== null) {
-        const parsed = cloned.value as Record<string, unknown>;
-        cloned.value = Object.fromEntries(
-          Object.entries(parsed).map(([key, value]) => [
-            key,
-            typeof value === 'string'
-              ? replaceTokenInContent(value, replacement)
-              : value
-          ])
-        );
-      }
-    }
-
-    if (cloned.blocks && cloned.blocks.length > 0) {
-      cloned.blocks = cloned.blocks.map(walk);
-    }
-
-    return cloned;
-  };
-
-  return blocks.map(walk);
-};
-
-const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}) => {
-  const themeSettings = useThemeSettingsContext();
-
-  const sortedBlocks = useMemo(
-    () =>
-      [...(section.blocks || [])]
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .filter((block) => (isDesigner ? true : !block.hidden)),
-    [section.blocks, isDesigner]
-  );
-
-  const targets = useMemo(() => collectCounterTargets(sortedBlocks), [sortedBlocks]);
-  const targetsKey = useMemo(
-    () =>
-      targets
-        .map(
-          (target) =>
-            `${target.blockId}:${target.endValue}:${target.decimals}:${target.useGrouping}`
-        )
-        .join('|'),
-    [targets]
-  );
-
-  const countUpEnabled = parseBoolean(
-    getResponsiveValue(section.properties?.['count-up-enabled'], currentBreakpoint, true),
-    true
-  );
-  const countUpDuration = clampNumber(
-    parseNumber(
-      getResponsiveValue(section.properties?.['count-up-duration'], currentBreakpoint, 1400),
-      1400
-    ),
-    300,
-    10000
-  );
-  const animationEasing = parseAnimationEasing(
-    getResponsiveValue(section.properties?.['count-up-easing'], currentBreakpoint, 'linear')
-  );
-
-  const [animatedValues, setAnimatedValues] = useState<Record<string, string>>({});
-  const targetsRef = useRef<CounterTarget[]>(targets);
-
-  useEffect(() => {
-    targetsRef.current = targets;
-  }, [targets]);
-
-  useEffect(() => {
-    const currentTargets = targetsRef.current;
-
-    if (currentTargets.length === 0) {
-      setAnimatedValues({});
-      return;
-    }
-
-    const buildValues = (progress: number): Record<string, string> => {
-      const next: Record<string, string> = {};
-
-      currentTargets.forEach((target) => {
-        const currentValue = target.endValue * progress;
-        next[target.blockId] = formatAnimatedNumber(
-          currentValue,
-          target.decimals,
-          target.useGrouping
-        );
-      });
-
-      return next;
-    };
-
-    if (!countUpEnabled) {
-      setAnimatedValues(buildValues(1));
-      return;
-    }
-
-    let rafId = 0;
-    const startTime = performance.now();
-    const duration = Math.max(countUpDuration, 1);
-
-    const tick = (now: number) => {
-      const progress = Math.min((now - startTime) / duration, 1);
-      setAnimatedValues(buildValues(applyAnimationEasing(progress, animationEasing)));
-
-      if (progress < 1) {
-        rafId = window.requestAnimationFrame(tick);
-      }
-    };
-
-    setAnimatedValues(buildValues(0));
-    rafId = window.requestAnimationFrame(tick);
-
-    return () => {
-      if (rafId) {
-        window.cancelAnimationFrame(rafId);
-      }
-    };
-  }, [countUpEnabled, countUpDuration, animationEasing, targetsKey]);
-
-  const renderedBlocks = useMemo(
-    () => injectAnimatedValues(sortedBlocks, animatedValues),
-    [sortedBlocks, animatedValues]
-  );
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    currentBreakpoint,
-    'normal'
-  );
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-      ? 'max-w-7xl'
-      : '';
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  const filteredStyles = Object.fromEntries(
-    Object.entries(section.styles || {}).filter(([key]) => !['max-width'].includes(key))
-  );
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
-
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
-    if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
-  };
-
-  const renderBlock = (block: Block) => (
-    <ThemeBlock
-      key={block.id}
-      block={block}
-      placeholderId={placeholderId}
-      sectionId={section.id}
-      isDesigner={isDesigner}
-      isSelected={selectedBlockId === block.id}
-      selectedBlockId={selectedBlockId}
-      currentBreakpoint={currentBreakpoint}
-      onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
-      onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
-      onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
-      onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
-    />
-  );
-
-  return (
-    <div
-      className={twMerge(
-        clsx('stats-counter-section w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
-      )}
-      style={sectionStyles}
-    >
-      {renderedBlocks.map(renderBlock)}
-    </div>
-  );
-};
-
-export default StatsCounterSection;