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

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

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

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

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