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

package/components/theme-editor/blocks/image-gallery-block.tsx

@@ -1,269 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Modal } from '../../modal';
-import ThemeBlock from '../theme-block';
-import { getResponsiveValue } from '../utils';
-import { BlockRendererProps } from './block-renderer-registry';
-
-type GalleryImage = {
-  url: string;
-  alt: string;
-  id: string;
-  objectFit: React.CSSProperties['objectFit'];
-  borderRadius: React.CSSProperties['borderRadius'];
-  width: React.CSSProperties['width'];
-  height: React.CSSProperties['height'];
-};
-
-const resolveImageUrl = (raw: unknown): string => {
-  const url = typeof raw === 'string' ? raw : '';
-
-  const isBase64 = url.startsWith('data:image');
-  const isAbsolutePath = url.startsWith('/');
-
-  if (
-    !isBase64 &&
-    !isAbsolutePath &&
-    url &&
-    !url.startsWith('http') &&
-    !url.startsWith('//')
-  ) {
-    return `https://${process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME ?? ''}/${url}`;
-  }
-
-  return url;
-};
-
-const ImageGalleryBlock = ({
-  block,
-  placeholderId,
-  sectionId,
-  isDesigner,
-  selectedBlockId,
-  currentBreakpoint = 'desktop'
-}: BlockRendererProps) => {
-  const images: GalleryImage[] = useMemo(() => {
-    const children = Array.isArray(block.blocks) ? block.blocks : [];
-
-    return children
-      .filter((child) => child.type === 'image')
-      .sort((a, b) => (a.order || 0) - (b.order || 0))
-      .map((child) => {
-        const url = resolveImageUrl(child.value);
-
-        const rawAlt = child.properties?.alt;
-        const alt =
-          typeof rawAlt === 'string'
-            ? rawAlt
-            : typeof rawAlt === 'object' && rawAlt
-            ? String(rawAlt[currentBreakpoint] ?? rawAlt.desktop ?? '')
-            : '';
-
-        const objectFit = getResponsiveValue(
-          child.styles?.['object-fit'],
-          currentBreakpoint,
-          'cover'
-        ) as React.CSSProperties['objectFit'];
-        const borderRadius = getResponsiveValue(
-          child.styles?.['border-radius'],
-          currentBreakpoint,
-          '0px'
-        ) as React.CSSProperties['borderRadius'];
-        const width = getResponsiveValue(
-          child.styles?.width,
-          currentBreakpoint,
-          '100%'
-        ) as React.CSSProperties['width'];
-        const height = getResponsiveValue(
-          child.styles?.height,
-          currentBreakpoint,
-          'auto'
-        ) as React.CSSProperties['height'];
-
-        return {
-          url,
-          alt,
-          id: child.id,
-          objectFit: objectFit ?? 'cover',
-          borderRadius: borderRadius ?? '0px',
-          width: width ?? '100%',
-          height: height ?? 'auto'
-        };
-      })
-      .filter((img) => Boolean(img.url));
-  }, [block.blocks, currentBreakpoint]);
-
-  // Hooks must be called unconditionally. `isDesigner` can flip after mount
-  // (theme editor cookie / iframe messages), so keep state/effects above any early returns.
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  const goPrev = () => {
-    if (!images.length) return;
-    setActiveIndex((i) => (i - 1 + images.length) % images.length);
-  };
-
-  const goNext = () => {
-    if (!images.length) return;
-    setActiveIndex((i) => (i + 1) % images.length);
-  };
-
-  useEffect(() => {
-    if (isDesigner) return;
-    if (!open) return;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-      if (e.key === 'ArrowLeft') goPrev();
-      if (e.key === 'ArrowRight') goNext();
-    };
-
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isDesigner, open, images.length]);
-
-  useEffect(() => {
-    if (activeIndex >= images.length) {
-      setActiveIndex(0);
-    }
-  }, [activeIndex, images.length]);
-
-  // In designer mode: keep nested ThemeBlock rendering so the editor can select/edit child images.
-  if (isDesigner) {
-    if (!block.blocks || block.blocks.length === 0) {
-      return (
-        <div style={{ padding: '20px', color: '#6b7280' }}>
-          Empty image gallery
-        </div>
-      );
-    }
-
-    return (
-      <div className="contents">
-        {block.blocks
-          .filter((child) => (isDesigner ? true : !child.hidden))
-          .sort((a, b) => (a.order || 0) - (b.order || 0))
-          .map((child) => (
-            <ThemeBlock
-              key={child.id}
-              block={child}
-              placeholderId={placeholderId}
-              sectionId={sectionId}
-              isDesigner={isDesigner}
-              isSelected={selectedBlockId === child.id}
-              selectedBlockId={selectedBlockId}
-              currentBreakpoint={currentBreakpoint}
-            />
-          ))}
-      </div>
-    );
-  }
-
-  if (!images.length) {
-    return (
-      <div style={{ padding: '20px', color: '#6b7280' }}>
-        No images uploaded
-      </div>
-    );
-  }
-
-  const active = images[activeIndex];
-
-  return (
-    <>
-      <div className="contents">
-        {images.map((img, index) => (
-          <button
-            key={img.id}
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              setActiveIndex(index);
-              setOpen(true);
-            }}
-            className="relative"
-            style={{
-              all: 'unset',
-              cursor: 'pointer',
-              display: 'block',
-              width: '100%',
-              height: '100%'
-            }}
-            aria-label={img.alt || `Open image ${index + 1}`}
-          >
-            <img
-              src={img.url}
-              alt={img.alt}
-              style={{
-                display: 'block',
-                width: img.width ?? '100%',
-                height: img.height ?? 'auto',
-                objectFit: img.objectFit ?? 'cover',
-                borderRadius: img.borderRadius ?? '0px'
-              }}
-            />
-          </button>
-        ))}
-      </div>
-
-      <Modal
-        portalId="image-gallery-lightbox"
-        open={open}
-        setOpen={setOpen}
-        title=""
-        showCloseButton={true}
-        className="w-[92vw] max-w-[1024px] max-h-[90vh] overflow-hidden rounded"
-        headerWrapperClassName="border-0"
-      >
-        <div
-          className="relative bg-black"
-          style={{ width: '100%', height: '80vh' }}
-        >
-          <img
-            src={active.url}
-            alt={active.alt}
-            style={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'contain'
-            }}
-          />
-
-          <button
-            type="button"
-            onClick={goPrev}
-            aria-label="Previous"
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-white"
-            style={{
-              background: 'rgba(0,0,0,0.45)',
-              width: '40px',
-              height: '40px',
-              borderRadius: '9999px'
-            }}
-          >
-            ‹
-          </button>
-
-          <button
-            type="button"
-            onClick={goNext}
-            aria-label="Next"
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-white"
-            style={{
-              background: 'rgba(0,0,0,0.45)',
-              width: '40px',
-              height: '40px',
-              borderRadius: '9999px'
-            }}
-          >
-            ›
-          </button>
-        </div>
-      </Modal>
-    </>
-  );
-};
-
-export default ImageGalleryBlock;

package/components/theme-editor/blocks/input-block.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useState } from 'react';
-import { useLocalization } from '@akinon/next/hooks';
-import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
-import { BlockRendererProps } from './block-renderer-registry';
-import { useThemeSettingsContext } from '../theme-settings-context';
-
-const InputBlock = ({
-  block,
-  currentBreakpoint = 'desktop',
-  isDesigner = false
-}: BlockRendererProps) => {
-  const { locale } = useLocalization();
-  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
-  const themeSettings = useThemeSettingsContext();
-
-  const resolveLocalizedValue = (
-    value: unknown,
-    fallback: string
-  ): string => {
-    if (value == null) return fallback;
-
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      const localized = value as Record<string, unknown>;
-
-      if (localized[locale] != null) return String(localized[locale]);
-      if (localized[defaultLocale] != null)
-        return String(localized[defaultLocale]);
-
-      const responsive = getResponsiveValue(value, currentBreakpoint);
-      if (responsive != null && typeof responsive !== 'object') {
-        return String(responsive);
-      }
-
-      const firstValue = Object.values(localized).find(item => item != null);
-      if (firstValue != null) return String(firstValue);
-    }
-
-    const responsive = getResponsiveValue(value, currentBreakpoint, fallback);
-    return String(responsive ?? fallback);
-  };
-
-  const type = resolveLocalizedValue(block.properties?.type, 'text');
-  const name = resolveLocalizedValue(block.properties?.name, 'input');
-  const placeholder = resolveLocalizedValue(
-    block.properties?.placeholder,
-    'Enter text...'
-  );
-  const blockValue = resolveLocalizedValue(block.value, '');
-
-  const required = Boolean(
-    getResponsiveValue(block.properties?.required, currentBreakpoint, false)
-  );
-  const disabled = Boolean(
-    getResponsiveValue(block.properties?.disabled, currentBreakpoint, false)
-  );
-
-  const [localValue, setLocalValue] = useState(blockValue);
-
-  useEffect(() => {
-    setLocalValue(blockValue);
-  }, [blockValue]);
-
-  const inputStyles: React.CSSProperties = useMemo(() => {
-    const computedStyles: React.CSSProperties = {};
-
-    if (!block.styles) {
-      return computedStyles;
-    }
-
-    Object.keys(block.styles).forEach((key) => {
-      const styleValue = getResponsiveValue(block.styles[key], currentBreakpoint);
-      if (styleValue === undefined || styleValue === null) return;
-
-      const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
-        letter.toUpperCase()
-      );
-
-      let resolvedValue: unknown = styleValue;
-      if (typeof styleValue === 'string') {
-        resolvedValue = resolveThemeCssVariables(styleValue, themeSettings);
-      }
-
-      (computedStyles as Record<string, unknown>)[camelKey] = resolvedValue;
-    });
-
-    return computedStyles;
-  }, [block.styles, currentBreakpoint, themeSettings]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const nextValue = event.target.value;
-    setLocalValue(nextValue);
-
-    if (isDesigner && window.parent) {
-      window.parent.postMessage(
-        {
-          type: 'UPDATE_BLOCK_VALUE',
-          data: {
-            blockId: block.id,
-            value: nextValue
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  return (
-    <input
-      type={type}
-      name={name}
-      placeholder={placeholder}
-      value={localValue}
-      required={required}
-      disabled={disabled}
-      style={inputStyles}
-      onChange={handleChange}
-    />
-  );
-};
-
-export default InputBlock;

package/components/theme-editor/blocks/link-block.tsx

@@ -1,216 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-import NextLink from 'next/link';
-import { useLocalization } from '@akinon/next/hooks';
-import { LocaleUrlStrategy } from '@akinon/next/localization';
-import { urlLocaleMatcherRegex, urlSchemes } from '@akinon/next/utils';
-import { getResponsiveValue } from '../utils';
-import { BlockRendererProps } from './block-renderer-registry';
-import ThemeBlock from '../theme-block';
-
-const LinkBlock = ({
-  block,
-  placeholderId,
-  sectionId,
-  selectedBlockId,
-  currentBreakpoint = 'desktop',
-  isDesigner = false
-}: BlockRendererProps) => {
-  const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
-
-  const href = block.properties?.href
-    ? String(getResponsiveValue(block.properties.href, currentBreakpoint, '#'))
-    : '#';
-
-  const target = block.properties?.target
-    ? String(
-        getResponsiveValue(block.properties.target, currentBreakpoint, '_self')
-      )
-    : '_self';
-
-  const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
-
-  const formattedHref = useMemo(() => {
-    if (!href) {
-      return '#';
-    }
-
-    const trimmedHref = href.trim();
-    if (!trimmedHref) {
-      return '#';
-    }
-
-    if (urlSchemes.some((scheme) => trimmedHref.startsWith(scheme))) {
-      if (trimmedHref.startsWith('mailto:') || trimmedHref.startsWith('tel:')) {
-        return trimmedHref;
-      }
-
-      try {
-        new URL(trimmedHref);
-        return trimmedHref;
-      } catch {
-        return '#';
-      }
-    }
-
-    try {
-      new URL(trimmedHref, 'http://localhost');
-    } catch {
-      return '#';
-    }
-
-    const pathnameWithoutLocale = trimmedHref.replace(
-      urlLocaleMatcherRegex,
-      ''
-    );
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
-
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
-    }
-
-    return trimmedHref || '#';
-  }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
-
-  const getStyleEntry = (kebabKey: string) => {
-    if (!block.styles) return undefined;
-    const styles = block.styles as Record<string, unknown>;
-    const camelKey = kebabKey.replace(/-([a-z])/g, (_, letter) =>
-      letter.toUpperCase()
-    );
-    return styles[kebabKey] ?? styles[camelKey];
-  };
-
-  const normalizeKey = (key: string): string => {
-    if (key.includes('-')) return key;
-    return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-  };
-
-  const inlineStyles: React.CSSProperties = {};
-  if (block.styles) {
-    const keys = Object.keys(block.styles);
-    keys.forEach((key) => {
-      const normalizedKey = normalizeKey(key);
-
-      if (
-        normalizedKey === 'hover-flex' ||
-        normalizedKey === 'hover-child-flex' ||
-        normalizedKey === 'first-child-flex'
-      ) {
-        return;
-      }
-
-      const styleEntry = getStyleEntry(normalizedKey);
-      if (styleEntry) {
-        const val = getResponsiveValue(styleEntry, currentBreakpoint);
-        if (val !== undefined && val !== null) {
-          const camelKey = normalizedKey.replace(/-([a-z])/g, (_, letter) =>
-            letter.toUpperCase()
-          );
-          (inlineStyles as any)[camelKey] = val;
-        }
-      }
-    });
-  }
-
-  if (!block.blocks || block.blocks.length === 0) {
-    return (
-      <NextLink
-        href={isDesigner ? '#' : formattedHref}
-        target={isDesigner ? undefined : target}
-        rel={isDesigner ? undefined : rel}
-        style={inlineStyles}
-        onClick={(e) => {
-          if (isDesigner) {
-            e.preventDefault();
-          }
-        }}
-      >
-        <div style={{ padding: '20px', color: '#6b7280' }}>
-          Empty link block
-        </div>
-      </NextLink>
-    );
-  }
-
-  return (
-    <NextLink
-      href={isDesigner ? '#' : formattedHref}
-      target={isDesigner ? undefined : target}
-      rel={isDesigner ? undefined : rel}
-      style={inlineStyles}
-      onClick={(e) => {
-        if (isDesigner) {
-          e.preventDefault();
-        }
-      }}
-    >
-      {block.blocks
-        .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map((childBlock, index) => {
-          const createActionHandler = (actionType: string) => () => {
-            if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: actionType,
-                  data: {
-                    placeholderId,
-                    sectionId,
-                    blockId: childBlock.id
-                  }
-                },
-                '*'
-              );
-            }
-          };
-
-          const handleRename = (newLabel: string) => {
-            if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'RENAME_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId,
-                    blockId: childBlock.id,
-                    label: newLabel
-                  }
-                },
-                '*'
-              );
-            }
-          };
-
-          return (
-            <ThemeBlock
-              key={childBlock.id || `block-${index}`}
-              block={childBlock}
-              placeholderId={placeholderId}
-              sectionId={sectionId}
-              isDesigner={isDesigner}
-              isSelected={selectedBlockId === childBlock.id}
-              selectedBlockId={selectedBlockId}
-              currentBreakpoint={currentBreakpoint}
-              onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
-              onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
-              onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
-              onToggleVisibility={createActionHandler(
-                'TOGGLE_BLOCK_VISIBILITY'
-              )}
-              onDelete={createActionHandler('DELETE_BLOCK')}
-              onRename={handleRename}
-            />
-          );
-        })}
-    </NextLink>
-  );
-};
-
-export default LinkBlock;