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

package/app-template/src/widgets/footer-value-props.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { useCallback, type CSSProperties } from 'react';
+import clsx from 'clsx';
+import { Icon } from '@theme/components';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useFooterValuePropsDesigner,
+  FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+  type ValuePropItem
+} from '../views/footer/footer-value-props-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_VALUE_PROPS_SECTION_ID
+} from '../views/footer/native-widget-config';
+
+const resolveValue = <T,>(value: unknown, defaultValue: T): T => {
+  if (value == null) return defaultValue;
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const responsive = value as Record<string, unknown>;
+    const resolved =
+      responsive.desktop ?? responsive.mobile ?? responsive.tablet;
+    return (resolved as T) ?? defaultValue;
+  }
+  return value as T;
+};
+
+const DEFAULT_VALUE_PROPS: ValuePropItem[] = [
+  { icon: 'home', title: 'Free Shipping', description: 'On orders over $50' },
+  { icon: 'add', title: 'Secure Payment', description: '256-bit SSL encryption' },
+  { icon: 'search', title: 'Easy Returns', description: '30-day return policy' }
+];
+
+interface FooterValuePropsProps {
+  renderPosition?: 'footer-top' | 'footer-bottom';
+}
+
+export default function FooterValueProps({ renderPosition }: FooterValuePropsProps) {
+  const {
+    isDesigner,
+    selectedSectionId,
+    selectedBlockId,
+    getBlock,
+    getSectionProperty,
+    getSectionStyle,
+    blockVersion
+  } = useFooterValuePropsDesigner();
+
+  const { handleClick: handleListClick } = useDesignerFeatures({
+    blockId: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_VALUE_PROPS_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+      type: 'value-props-list',
+      label: 'Value Props List'
+    }
+  });
+
+  const handleSectionClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.stopPropagation();
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'SELECT_SECTION',
+              data: {
+                placeholderId: FOOTER_PLACEHOLDER_ID,
+                sectionId: FOOTER_VALUE_PROPS_SECTION_ID
+              }
+            },
+            '*'
+          );
+        }
+      }
+    },
+    [isDesigner]
+  );
+
+  const enabled = resolveValue<boolean>(getSectionProperty('enabled'), true);
+  const layout = resolveValue<string>(getSectionProperty('layout'), 'horizontal');
+  const position = resolveValue<string>(getSectionProperty('position'), 'footer-top');
+
+  if (renderPosition && position !== renderPosition) {
+    return null;
+  }
+
+  if (!enabled && !isDesigner) {
+    return null;
+  }
+
+  const sectionStyles: CSSProperties = {
+    backgroundColor: resolveValue<string>(getSectionStyle('background-color'), '#ffffff'),
+    paddingTop: `${resolveValue<number>(getSectionStyle('padding-top'), 24)}px`,
+    paddingBottom: `${resolveValue<number>(getSectionStyle('padding-bottom'), 24)}px`,
+    borderTopWidth: `${resolveValue<number>(getSectionStyle('border-top-width'), 1)}px`,
+    borderTopStyle: 'solid',
+    borderTopColor: resolveValue<string>(getSectionStyle('border-top-color'), '#e5e7eb'),
+    borderBottomWidth: `${resolveValue<number>(getSectionStyle('border-bottom-width'), 0)}px`,
+    borderBottomStyle: 'solid',
+    borderBottomColor: resolveValue<string>(getSectionStyle('border-bottom-color'), '#e5e7eb')
+  };
+
+  const listBlock = blockVersion >= 0 ? getBlock(FOOTER_VALUE_PROPS_LIST_BLOCK_ID) : undefined;
+  const listStylesRaw = listBlock?.styles as Record<string, unknown> | undefined;
+  const listGap = resolveValue<number>(listStylesRaw?.gap, 32);
+
+  const blockProperties = listBlock?.properties as Record<string, unknown> | undefined;
+  const items = resolveValue<ValuePropItem[]>(blockProperties?.items, DEFAULT_VALUE_PROPS);
+
+  const isSectionSelected = selectedSectionId === FOOTER_VALUE_PROPS_SECTION_ID && !selectedBlockId;
+
+  if (!enabled && isDesigner) {
+    return (
+      <div
+        data-section-id={FOOTER_VALUE_PROPS_SECTION_ID}
+        className="theme-section relative cursor-pointer"
+        style={sectionStyles}
+        onClick={handleSectionClick}
+      >
+        <div
+          className={clsx(
+            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
+          )}
+        />
+        <div className="container py-6 text-center text-gray-400 border border-dashed border-gray-300 rounded relative z-10">
+          Value Propositions (disabled - click section to enable)
+        </div>
+      </div>
+    );
+  }
+
+  const isListSelected = selectedBlockId === FOOTER_VALUE_PROPS_LIST_BLOCK_ID;
+
+  return (
+    <div
+      data-section-id={FOOTER_VALUE_PROPS_SECTION_ID}
+      className={clsx(
+        'theme-section relative',
+        isDesigner && 'cursor-pointer'
+      )}
+      style={sectionStyles}
+      onClick={isDesigner ? handleSectionClick : undefined}
+    >
+      {isDesigner && (
+        <div
+          className={clsx(
+            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
+          )}
+        />
+      )}
+      <div className="container relative z-10">
+        <div
+          className={clsx(
+            layout === 'horizontal'
+              ? 'flex flex-wrap justify-center md:justify-between items-start'
+              : 'grid grid-cols-2 md:grid-cols-4',
+            isDesigner && 'cursor-pointer',
+            isListSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded p-2'
+          )}
+          style={{ gap: `${listGap}px` }}
+          onClick={isDesigner ? handleListClick : undefined}
+          data-block-id={isDesigner ? FOOTER_VALUE_PROPS_LIST_BLOCK_ID : undefined}
+        >
+          {items.length > 0 ? (
+            items.map((item, index) => (
+              <div
+                key={index}
+                className="flex flex-col items-center text-center"
+              >
+                <div className="mb-2">
+                  <Icon
+                    name={item.icon}
+                    size={32}
+                    className="text-current"
+                  />
+                </div>
+                <h4 className="font-semibold text-base mb-1">
+                  {item.title}
+                </h4>
+                {item.description && (
+                  <p className="text-sm text-gray-600">
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            ))
+          ) : isDesigner ? (
+            <div className="w-full py-4 text-center text-gray-400 border border-dashed border-gray-300 rounded">
+              Click to add value propositions
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/widgets/index.ts

@@ -23,3 +23,10 @@ export const HOME_WIDGETS: {
     async () => import('@theme/widgets/home-stories-eng')
   )
 };
+
+export const FLATPAGE_COMPONENT: {
+  [key: string]: ComponentType<WidgetResultType<unknown>>;
+} = {
+  'about-us': dynamic(async () => import('@theme/widgets/flatpages/about-us')),
+  'blog-list': dynamic(async () => import('@theme/widgets/flatpages/blog-list'))
+};

package/app-template/src/widgets/schemas/about-us.json

@@ -0,0 +1,46 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text",
+    "is_localizable": true
+  },
+  "content": {
+    "key": "content",
+    "label": "Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "image_1": {
+    "key": "image_1",
+    "label": "Banner Image 1* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_2": {
+    "key": "image_2",
+    "label": "Banner Image 2* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_3": {
+    "key": "image_3",
+    "label": "Banner Image 3* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "highlight_section": {
+    "key": "highlight_section",
+    "label": "Highlight Section Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "highlight_section_title": {
+    "key": "highlight_section_title",
+    "label": "Highlight Section Title",
+    "data_type": "text",
+    "is_localizable": true
+  }
+}

package/app-template/src/widgets/schemas/blog-list.json

@@ -0,0 +1,37 @@
+{
+  "blogs": {
+    "key": "blogs",
+    "label": "Blogs",
+    "is_localizable": true,
+    "multi": true,
+    "data_type": "nested",
+    "schema": {
+      "title": {
+        "key": "title",
+        "label": "Title",
+        "data_type": "text"
+      },
+      "description": {
+        "key": "description",
+        "label": "Description",
+        "data_type": "text"
+      },
+      "date": {
+        "key": "date",
+        "display": "date_picker",
+        "label": "Date",
+        "data_type": "text"
+      },
+      "image": {
+        "key": "image",
+        "label": "Image* (Ex: 370x250px)",
+        "data_type": "image"
+      },
+      "link": {
+        "key": "link",
+        "label": "Link",
+        "data_type": "text"
+      }
+    }
+  }
+}

package/app-template/src/widgets/schemas/blog.json

@@ -0,0 +1,29 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text"
+  },
+  "description": {
+    "key": "description",
+    "label": "Description",
+    "display": "html-editor",
+    "data_type": "area"
+  },
+  "date": {
+    "key": "date",
+    "display": "date_picker",
+    "label": "Date",
+    "data_type": "text"
+  },
+  "image": {
+    "key": "image",
+    "label": "Image* (Ex: 1072x923px)",
+    "data_type": "image"
+  },
+  "link": {
+    "key": "link",
+    "label": "Product Link",
+    "data_type": "text"
+  }
+}

package/app-template/tailwind.config.js

@@ -1,4 +1,4 @@
-const getAkinonNextContent = require("@akinon/next/tailwind/content");
+const getAkinonNextContent = require('@akinon/next/tailwind/content');
 const deepMerge = require('@akinon/next/utils/deep-merge');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const plugins = require('./src/plugins');
@@ -20,6 +20,8 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 
 const defaultConfig = {
   content: [
+    './node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
+    '../../node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
     './src/app/**/*.{js,ts,jsx,tsx}',
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',
@@ -60,10 +62,20 @@ const defaultConfig = {
           '100%': {
             transform: 'translateX(100%)'
           }
+        },
+        'slide-in': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' }
+        },
+        'slide-out': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-100%)' }
         }
       },
       animation: {
-        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite'
+        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite',
+        'slide-in': 'slide-in 0.4s ease-out forwards',
+        'slide-out': 'slide-out 0.4s ease-out forwards'
       }
     },
     colors: {
@@ -106,12 +118,15 @@ const defaultConfig = {
         500: '#2d2d2d',
         600: '#292929',
         700: '#2b2b2b',
+        750: '#121212',
         800: '#181818',
+        850: '#0a0a0a',
         900: '#000000'
       },
       gray: {
         DEFAULT: '#ebebeb',
         25: '#fdfdfd',
+        30: '#fafafa',
         50: '#f7f7f7',
         100: '#f5f5f5',
         150: '#f4f4f4',
@@ -121,6 +136,7 @@ const defaultConfig = {
         450: '#d4d4d4',
         500: '#c9c9c9',
         600: '#9d9d9d',
+        650: '#7d7d7d',
         700: '#686868',
         800: '#615f62',
         850: '#58585a',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.19",
+  "version": "2.0.0-beta.20",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {