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

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

@@ -0,0 +1,486 @@
+'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;