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

package/app-template/src/widgets/footer-menu-compact.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+/**
+ * Footer Menu Compact
+ *
+ * A simplified footer menu without the logo, designed for compact layout.
+ * Shows only the menu columns side by side.
+ */
+
+import type { CSSProperties } from 'react';
+import clsx from 'clsx';
+import { Link } from '@theme/components';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+
+import {
+  useFooterMenuDesigner,
+  FOOTER_MENU_HEADING_BLOCK_ID,
+  FOOTER_MENU_LINK_BLOCK_ID
+} from '../views/footer/footer-menu-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_MENU_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;
+};
+
+const FooterMenuCompact = () => {
+  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
+    useFooterMenuDesigner();
+
+  const headingBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_MENU_HEADING_BLOCK_ID) : undefined;
+  const linkBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_MENU_LINK_BLOCK_ID) : undefined;
+
+  const headingStyles = normalizeStyles(
+    headingBlock?.styles as Record<string, unknown>
+  );
+  const linkStyles = normalizeStyles(
+    linkBlock?.styles as Record<string, unknown>
+  );
+
+  const { handleClick: handleHeadingClick } = useDesignerFeatures({
+    blockId: FOOTER_MENU_HEADING_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_MENU_HEADING_BLOCK_ID,
+      type: 'text',
+      label: 'Menu Headings'
+    }
+  });
+
+  const { handleClick: handleLinkClick } = useDesignerFeatures({
+    blockId: FOOTER_MENU_LINK_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_MENU_LINK_BLOCK_ID,
+      type: 'text',
+      label: 'Menu Links'
+    }
+  });
+
+  const isHeadingSelected = selectedBlockId === FOOTER_MENU_HEADING_BLOCK_ID;
+  const isLinkSelected = selectedBlockId === FOOTER_MENU_LINK_BLOCK_ID;
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
+      <div className="flex flex-col gap-6">
+        <h3
+          style={headingStyles}
+          data-block-id={isDesigner ? FOOTER_MENU_HEADING_BLOCK_ID : undefined}
+          onClick={isDesigner ? handleHeadingClick : undefined}
+          className={clsx(
+            'text-lg font-medium text-[#121212]',
+            isDesigner && 'cursor-pointer',
+            isHeadingSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          Quick links
+        </h3>
+        <ul className="flex flex-col gap-3">
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              data-block-id={isDesigner ? FOOTER_MENU_LINK_BLOCK_ID : undefined}
+              onClick={isDesigner ? handleLinkClick : undefined}
+              className={clsx(
+                'text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors',
+                isDesigner && 'cursor-pointer',
+                isLinkSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+              )}
+            >
+              Bags
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              Shoes
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              LookBook
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="flex flex-col gap-6">
+        <h3
+          style={headingStyles}
+          className={clsx(
+            'text-lg font-medium text-[#121212]',
+            isDesigner && 'cursor-pointer',
+            isHeadingSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          Info
+        </h3>
+        <ul className="flex flex-col gap-3">
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              About
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              Contact us
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              Shipping policy
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="flex flex-col gap-6">
+        <h3
+          style={headingStyles}
+          className={clsx(
+            'text-lg font-medium text-[#121212]',
+            isDesigner && 'cursor-pointer',
+            isHeadingSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          Customer Service
+        </h3>
+        <ul className="flex flex-col gap-3">
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              FAQ
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              Returns
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75 hover:text-opacity-100 transition-colors"
+            >
+              Track Order
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default FooterMenuCompact;

package/app-template/src/widgets/footer-menu-two.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import clsx from 'clsx';
+import { Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { Image } from '@akinon/next/components/image';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+
+import { useFooterLogoSettings } from '../views/footer/use-footer-logo';
+import {
+  FooterLogoSettings,
+  FOOTER_LOGO_BLOCK_ID,
+  FOOTER_LOGO_PLACEHOLDER_ID,
+  FOOTER_LOGO_SECTION_ID
+} from '../views/footer/logo-settings';
+import {
+  useFooterMenuDesigner,
+  FOOTER_MENU_HEADING_BLOCK_ID,
+  FOOTER_MENU_LINK_BLOCK_ID
+} from '../views/footer/footer-menu-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_MENU_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;
+};
+
+const parseSize = (value: number | string | undefined, fallback: number) => {
+  if (value === undefined) return fallback;
+  if (typeof value === 'number') return value;
+  const parsed = parseInt(value, 10);
+  return Number.isNaN(parsed) ? value : parsed;
+};
+
+interface SelectableFooterLogoProps {
+  fallbackSrc: string;
+  initialSettings: FooterLogoSettings;
+}
+
+const SelectableFooterLogo = ({
+  fallbackSrc,
+  initialSettings
+}: SelectableFooterLogoProps) => {
+  const logoSettings = useFooterLogoSettings(initialSettings);
+  const { isDesigner, selectedBlockId } = useExternalDesigner({
+    placeholderId: FOOTER_LOGO_PLACEHOLDER_ID
+  });
+  const { handleClick } = useDesignerFeatures({
+    blockId: FOOTER_LOGO_BLOCK_ID,
+    placeholderId: FOOTER_LOGO_PLACEHOLDER_ID,
+    sectionId: FOOTER_LOGO_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_LOGO_BLOCK_ID,
+      type: 'image',
+      label: 'Footer Logo'
+    }
+  });
+
+  const isSelected = selectedBlockId === FOOTER_LOGO_BLOCK_ID;
+  const logoSrc = logoSettings.src || fallbackSrc;
+  const width = parseSize(
+    logoSettings.width as number | string | undefined,
+    80
+  );
+  const height = parseSize(
+    logoSettings.height as number | string | undefined,
+    20
+  );
+
+  const logoElement = (
+    <Image
+      src={logoSrc}
+      alt="Project Zero"
+      width={typeof width === 'number' ? width : 80}
+      height={typeof height === 'number' ? height : 20}
+      className="block w-full"
+      style={{
+        maxWidth: logoSettings.maxWidth,
+        maxHeight: logoSettings.maxHeight,
+        objectFit: logoSettings.objectFit as React.CSSProperties['objectFit']
+      }}
+      unoptimized
+    />
+  );
+
+  if (!isDesigner) {
+    return logoElement;
+  }
+
+  return (
+    <span
+      data-block-id={FOOTER_LOGO_BLOCK_ID}
+      onClick={handleClick}
+      className={clsx(
+        'relative cursor-pointer inline-block',
+        isSelected && 'ring-2 ring-blue-500 ring-offset-1 rounded'
+      )}
+    >
+      {logoElement}
+    </span>
+  );
+};
+
+interface FooterMenuTwoProps {
+  fallbackLogoSrc: string;
+  initialLogoSettings: FooterLogoSettings;
+}
+
+const FooterMenuTwo = ({
+  fallbackLogoSrc,
+  initialLogoSettings
+}: FooterMenuTwoProps) => {
+  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
+    useFooterMenuDesigner();
+
+  const headingBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_MENU_HEADING_BLOCK_ID) : undefined;
+  const linkBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_MENU_LINK_BLOCK_ID) : undefined;
+
+  const headingStyles = normalizeStyles(
+    headingBlock?.styles as Record<string, unknown>
+  );
+  const linkStyles = normalizeStyles(
+    linkBlock?.styles as Record<string, unknown>
+  );
+
+  const { handleClick: handleHeadingClick } = useDesignerFeatures({
+    blockId: FOOTER_MENU_HEADING_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_MENU_HEADING_BLOCK_ID,
+      type: 'text',
+      label: 'Menu Headings'
+    }
+  });
+
+  const { handleClick: handleLinkClick } = useDesignerFeatures({
+    blockId: FOOTER_MENU_LINK_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_MENU_LINK_BLOCK_ID,
+      type: 'text',
+      label: 'Menu Links'
+    }
+  });
+
+  const isHeadingSelected = selectedBlockId === FOOTER_MENU_HEADING_BLOCK_ID;
+  const isLinkSelected = selectedBlockId === FOOTER_MENU_LINK_BLOCK_ID;
+
+  return (
+    <div className="container grid grid-cols-3 gap-10 lg:px-10">
+      <div className="flex flex-col gap-11">
+        <h3
+          style={headingStyles}
+          data-block-id={isDesigner ? FOOTER_MENU_HEADING_BLOCK_ID : undefined}
+          onClick={isDesigner ? handleHeadingClick : undefined}
+          className={clsx(
+            'text-lg text-[#121212]',
+            isDesigner && 'cursor-pointer',
+            isHeadingSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          Quick links
+        </h3>
+        <ul className="flex flex-col gap-4">
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              data-block-id={isDesigner ? FOOTER_MENU_LINK_BLOCK_ID : undefined}
+              onClick={isDesigner ? handleLinkClick : undefined}
+              className={clsx(
+                'text-sm text-[#121212] text-opacity-75',
+                isDesigner && 'cursor-pointer',
+                isLinkSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+              )}
+            >
+              Bags
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75"
+            >
+              Shoes
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75"
+            >
+              LookBook
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="flex flex-col gap-11">
+        <h3
+          style={headingStyles}
+          className={clsx(
+            'text-lg text-[#121212]',
+            isDesigner && 'cursor-pointer',
+            isHeadingSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          Info
+        </h3>
+        <ul className="flex flex-col gap-4">
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75"
+            >
+              About
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75"
+            >
+              Contact us
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="#"
+              style={linkStyles}
+              className="text-sm text-[#121212] text-opacity-75"
+            >
+              Shipping policy
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <Link
+          href={ROUTES.HOME}
+          passHref={true}
+          className="self-center block pl-3 sm:justify-self-center sm:p-0"
+          aria-label="Homepage"
+        >
+          <SelectableFooterLogo
+            fallbackSrc={fallbackLogoSrc}
+            initialSettings={initialLogoSettings}
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default FooterMenuTwo;