@akinon/projectzero 2.0.0-beta.2 → 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/home-stories-eng.tsx

@@ -6,6 +6,41 @@ import { getWidgetData } from '@akinon/next/data/server';
 import { Link } from '@theme/components';
 import { Image } from '@akinon/next/components/image';
 
+function TitleSection({
+  mobileTitle,
+  mobileSubtitle
+}: {
+  mobileTitle?: { value: string };
+  mobileSubtitle?: { value: string };
+}) {
+  return (
+    <>
+      {mobileTitle ? (
+        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
+          {mobileTitle.value}
+        </h2>
+      ) : null}
+      {mobileSubtitle ? (
+        <p className="text-sm text-center mb-2 lg:hidden">
+          {mobileSubtitle.value}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+function MobileLinks({ mobileLinks }: { mobileLinks?: MobileLink[] }) {
+  return (
+    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
+      {mobileLinks?.map((item, index) => (
+        <li className="mr-4 first:ml-4" key={`${item?.value?.text}__${index}`}>
+          <Link href={item?.value?.url}>{item?.value?.text}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
 type StoryData = {
   value: {
     url: string;
@@ -20,7 +55,7 @@ type StoryData = {
   };
 };
 
-type MobileLinks = {
+type MobileLink = {
   value: {
     url: string;
     text: string;
@@ -35,7 +70,7 @@ type HomeStoriesEngType = {
     value: string;
   };
   stories: StoryData[];
-  mobileLinks: MobileLinks[];
+  mobileLinks: MobileLink[];
 };
 
 export default async function HomeStoriesEng() {
@@ -43,40 +78,13 @@ export default async function HomeStoriesEng() {
     slug: 'home-storieseng'
   });
 
-  const TitleSection = () => (
-    <>
-      {data?.attributes?.mobileTitle ? (
-        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
-          {data?.attributes?.mobileTitle?.value}
-        </h2>
-      ) : null}
-      {data?.attributes?.mobileSubtitle ? (
-        <p className="text-sm text-center mb-2 lg:hidden">
-          {data?.attributes?.mobileSubtitle?.value}
-        </p>
-      ) : null}
-    </>
-  );
-
-  const MobileLinks = () => (
-    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
-      {data?.attributes?.mobileLinks?.map((item, index) => {
-        return (
-          <li
-            className="mr-4 first:ml-4"
-            key={`${item?.value?.text}__${index}`}
-          >
-            <Link href={item?.value?.url}>{item?.value?.text}</Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-
   return (
     <section className="my-8">
-      <TitleSection />
-      <MobileLinks />
+      <TitleSection
+        mobileTitle={data?.attributes?.mobileTitle}
+        mobileSubtitle={data?.attributes?.mobileSubtitle}
+      />
+      <MobileLinks mobileLinks={data?.attributes?.mobileLinks} />
 
       <div className="flex items-center overflow-x-auto pb-4 md:justify-center">
         {data?.attributes?.stories?.map((story, index) => {

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,3 +1,4 @@
+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');
@@ -19,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}',
@@ -26,12 +29,7 @@ const defaultConfig = {
     './src/widgets/**/*.{js,ts,jsx,tsx}',
     './src/hooks/**/*.{js,ts,jsx,tsx}',
     './src/utils/**/*.{js,ts,jsx,tsx}',
-    ...plugins
-      .map((plugin) => [
-        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
-        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
-      ])
-      .flat()
+    ...getAkinonNextContent(plugins)
   ],
   theme: {
     extend: {
@@ -64,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: {
@@ -110,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',
@@ -125,6 +136,7 @@ const defaultConfig = {
         450: '#d4d4d4',
         500: '#c9c9c9',
         600: '#9d9d9d',
+        650: '#7d7d7d',
         700: '#686868',
         800: '#615f62',
         850: '#58585a',

package/app-template/tsconfig.json

@@ -4,17 +4,27 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
+      "@theme/*": [
+        "./*"
+      ],
+      "@root/*": [
+        "./app/[pz]/*"
+      ],
+      "@product/*": [
+        "./app/[pz]/product/*"
+      ],
       "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
+        "./app/[pz]/group-product/*"
+      ],
+      "@category/*": [
+        "./app/[pz]/category/*"
       ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
       "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
+        "./app/[pz]/special-page/*"
       ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
+      "@flat-page/*": [
+        "./app/[pz]/flat-page/*"
+      ]
     },
     "allowSyntheticDefaultImports": true,
     "composite": false,
@@ -26,7 +36,11 @@
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -37,7 +51,7 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
@@ -50,7 +64,11 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../../packages/**/*"
+    "../../packages/**/*",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": [
+    "node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }