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

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

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

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