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

package/app-template/src/components/widget-content.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useMemo } from 'react';
+import { WidgetContentProps } from '../types/widget';
+import clsx from 'clsx';
+import { getResponsiveStyle, ResponsiveSize } from '../utils/styles';
+import { ActionTooltip } from '@theme/components';
+
+export function WidgetContent({
+  widgetData,
+  skipParentWrapper = false,
+  onWidgetClick,
+  selectedWidget,
+  designMode,
+  responsive,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}: WidgetContentProps) {
+  const componentId = Object.keys(widgetData.attributes)[0];
+  const componentData = widgetData.attributes[componentId];
+  const parentData = widgetData.parent;
+
+  const combinedStyles = useMemo(
+    () =>
+      getResponsiveStyle(
+        componentData?.style || {},
+        responsive as ResponsiveSize
+      ),
+    [componentData?.style, responsive]
+  );
+
+  if (!componentData) return null;
+
+  const parentStyles = parentData?.style
+    ? Object.keys(parentData.style).reduce(
+        (acc, breakpoint) => ({
+          ...acc,
+          ...parentData.style[breakpoint]
+        }),
+        {}
+      )
+    : {};
+
+  const getClickableStyles = (isSelected: boolean) => {
+    const baseComponentId = componentId.split('-')[0];
+    const baseSelectedId = selectedWidget?.id?.split('-')[0];
+
+    return clsx(
+      designMode && [
+        'cursor-pointer',
+        (isSelected || baseComponentId === baseSelectedId) &&
+          'outline outline-2 outline-[#3B82F6] outline-offset-2'
+      ]
+    );
+  };
+
+  const renderActionTooltip = () => {
+    if (!designMode || !selectedWidget || selectedWidget.id !== componentId) {
+      return null;
+    }
+
+    return (
+      <ActionTooltip
+        widgetData={widgetData}
+        selectedWidget={selectedWidget}
+        designMode={designMode}
+        onDelete={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_DELETE',
+              data: { id: componentId }
+            },
+            '*'
+          );
+        }}
+        onMoveUp={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_MOVE',
+              data: { id: componentId, direction: 'up' }
+            },
+            '*'
+          );
+        }}
+        onMoveDown={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_MOVE',
+              data: { id: componentId, direction: 'down' }
+            },
+            '*'
+          );
+        }}
+        onCopy={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_COPY',
+              data: { id: componentId }
+            },
+            '*'
+          );
+        }}
+      />
+    );
+  };
+
+  const wrapWithTooltip = (component: React.ReactNode) => {
+    return (
+      <div className="relative">
+        {renderActionTooltip()}
+        {component}
+      </div>
+    );
+  };
+
+  const renderComponent = () => {
+    let iconSvg;
+    let Tag;
+    let CustomTag;
+
+    const dragProps =
+      designMode && draggable
+        ? {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDragLeave,
+            onDrop
+          }
+        : {};
+
+    switch (componentData.type) {
+      case 'text':
+        Tag = (
+          componentData.tag || 'div'
+        ).toLowerCase() as keyof JSX.IntrinsicElements;
+        return wrapWithTooltip(
+          <Tag
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={getClickableStyles(selectedWidget?.id === componentId)}
+            {...dragProps}
+          >
+            {componentData.value?.text}
+          </Tag>
+        );
+
+      case 'image': {
+        const {
+          src,
+          mobileSrc,
+          tabletSrc,
+          desktopSrc,
+          alt = '',
+          sizes,
+          mediaQueries = {
+            mobile: '(max-width: 767px)',
+            tablet: '(min-width: 768px) and (max-width: 1023px)',
+            desktop: '(min-width: 1024px)'
+          }
+        } = componentData.value || {};
+
+        return wrapWithTooltip(
+          <picture
+            id={componentId}
+            onClick={onWidgetClick}
+            className={clsx(
+              designMode && [
+                'cursor-pointer relative',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            {...dragProps}
+          >
+            {mobileSrc && (
+              <source
+                media={mediaQueries.mobile}
+                srcSet={mobileSrc}
+                sizes={sizes?.mobile}
+              />
+            )}
+            {tabletSrc && (
+              <source
+                media={mediaQueries.tablet}
+                srcSet={tabletSrc}
+                sizes={sizes?.tablet}
+              />
+            )}
+            {desktopSrc && (
+              <source
+                media={mediaQueries.desktop}
+                srcSet={desktopSrc}
+                sizes={sizes?.desktop}
+              />
+            )}
+            <img
+              className={clsx(
+                designMode && [
+                  'cursor-pointer',
+                  selectedWidget?.id === componentId
+                    ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                    : ''
+                ]
+              )}
+              src={src || desktopSrc || tabletSrc || mobileSrc || ''}
+              alt={alt}
+              style={combinedStyles}
+              loading="lazy"
+            />
+          </picture>
+        );
+      }
+
+      case 'icon':
+        iconSvg =
+          componentData.value?.sizes?.[
+            Object.keys(componentData.value.sizes || {})[0]
+          ];
+        if (!iconSvg) return null;
+        return wrapWithTooltip(
+          <div
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={clsx(
+              'relative',
+              designMode && [
+                'cursor-pointer',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            dangerouslySetInnerHTML={{ __html: iconSvg }}
+            {...dragProps}
+          />
+        );
+
+      case 'link':
+        return wrapWithTooltip(
+          <a
+            id={componentId}
+            href={componentData.value?.href || '#'}
+            target={componentData.value?.target}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={clsx(
+              'relative data-container',
+              designMode && [
+                'cursor-pointer',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            {...dragProps}
+          >
+            {componentData.value?.text || componentData.value?.title || 'Link'}
+          </a>
+        );
+
+      case 'divider':
+        return wrapWithTooltip(
+          <hr
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            {...dragProps}
+          />
+        );
+
+      default:
+        if (componentData.tag) {
+          CustomTag =
+            componentData.tag.toLowerCase() as keyof JSX.IntrinsicElements;
+          return wrapWithTooltip(
+            <CustomTag
+              id={componentId}
+              style={combinedStyles}
+              onClick={onWidgetClick}
+              className={getClickableStyles(selectedWidget?.id === componentId)}
+              {...dragProps}
+            >
+              {componentData.value?.text}
+            </CustomTag>
+          );
+        }
+        return wrapWithTooltip(
+          <div
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            {...dragProps}
+          >
+            {componentData.value?.text}
+          </div>
+        );
+    }
+  };
+
+  if (parentData && !skipParentWrapper) {
+    const ParentTag = (
+      parentData.tag || 'div'
+    ).toLowerCase() as keyof JSX.IntrinsicElements;
+    return (
+      <ParentTag
+        id={parentData.id}
+        style={parentStyles}
+        onClick={onWidgetClick}
+      >
+        {renderComponent()}
+      </ParentTag>
+    );
+  }
+
+  return renderComponent();
+}

package/app-template/src/data/server/theme.ts

@@ -0,0 +1,70 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+
+interface ThemeSettings {
+  logo?: string;
+  favicon?: string;
+  plainHeader?: boolean;
+  fontFamily?: string;
+  backupFontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+  fontSize?: string;
+  fontColor?: string;
+  fontOpacity?: number;
+  mainMenuSticky?: boolean;
+  breadcrumbSeparator?: string;
+  socialNetworks?: Record<string, { url?: string; icon?: string }>;
+}
+
+interface ThemeConfigWidget {
+  attributes?: {
+    theme_name?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_slug?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_settings?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_breakpoints?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_dataSources?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+  };
+}
+
+/**
+ * Fetches theme configuration from the widget API
+ * This is a server-side function that reads theme settings stored in the theme-config widget
+ */
+export async function getThemeSettings(): Promise<ThemeSettings> {
+  try {
+    const themeConfigData = await getWidgetData<any>({
+      slug: 'theme-config'
+    });
+
+    if (!themeConfigData?.attributes?.theme_settings?.value) {
+      return {};
+    }
+
+    // Parse the theme_settings JSON string from the value property
+    const settings: ThemeSettings = JSON.parse(
+      themeConfigData.attributes.theme_settings.value
+    );
+
+    return settings;
+  } catch (error) {
+    console.error('Error loading theme settings:', error);
+    return {};
+  }
+}

package/app-template/src/hooks/use-fav-button.tsx

@@ -15,6 +15,7 @@ interface FavButtonProps {
   label?: string;
   size?: number;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 const useFavButton = (productPk: number) => {
@@ -73,12 +74,14 @@ const useFavButton = (productPk: number) => {
           'flex items-center hover:text-secondary-hover hover:cursor-pointer',
           props.className
         )}
+        style={props.style}
         onClick={handleClick}
         data-testid="favourites-icon"
       >
         <Icon
-          name={isActive ? 'heart-full' : 'heart-stroke'}
-          className={clsx('text-2xl md:text-xl hover:fill-secondary-hover')}
+          name={isActive ? 'fav-on' : 'fav-off'}
+          size={props.size ?? 16}
+          className={clsx('hover:fill-secondary-hover')}
         />
         {props.label && <span className="ml-2">{props.label}</span>}
       </button>

package/app-template/src/hooks/use-product-cart.ts

@@ -22,26 +22,29 @@ interface AddToCartError {
 }
 
 export const useProductCart = ({ product, variants }: UseProductCartProps) => {
-  const [productError, setProductError] = useState<React.ReactNode | null>(null);
-  const [addProduct, { isLoading: isAddToCartLoading }] = useAddProductToBasket();
+  const [productError, setProductError] = useState<React.ReactNode | null>(
+    null
+  );
+  const [addProduct, { isLoading: isAddToCartLoading }] =
+    useAddProductToBasket();
 
   const formatError = (error: AddToCartError) => {
     if (error?.data?.non_field_errors) {
       return error.data.non_field_errors;
     }
-    
+
     if (error?.data) {
       return Object.keys(error.data).map(
         (key) => `${key}: ${error.data[key].join(', ')}`
       );
     }
-    
+
     return 'An error occurred';
   };
 
-  const addProductToCart = async () => {
+  const addProductToCart = async (quantity: number = 1) => {
     const validation = validateVariantSelection(variants);
-    
+
     if (!validation.isValid) {
       setProductError(validation.errorMessage);
       return false;
@@ -50,7 +53,7 @@ export const useProductCart = ({ product, variants }: UseProductCartProps) => {
     try {
       await addProduct({
         product: product.pk,
-        quantity: 1,
+        quantity,
         attributes: {}
       });
 
@@ -74,4 +77,4 @@ export const useProductCart = ({ product, variants }: UseProductCartProps) => {
     clearProductError,
     isAddToCartLoading
   };
-};
+};

package/app-template/src/hooks/use-theme-settings.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface ThemeSettings {
+  logo?: string;
+  favicon?: string;
+  plainHeader?: boolean;
+  fontFamily?: string;
+  backupFontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+}
+
+/**
+ * Client-side hook to fetch theme settings
+ * Note: This makes a client-side API call. For server components, use getThemeSettings() instead.
+ */
+export function useThemeSettings() {
+  const [settings, setSettings] = useState<ThemeSettings>({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const response = await fetch('/api/theme-settings');
+        if (response.ok) {
+          const data = await response.json();
+          setSettings(data);
+        }
+      } catch (error) {
+        console.error('Failed to fetch theme settings:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  return { settings, isLoading };
+}

package/app-template/src/lib/fonts.ts

@@ -0,0 +1,149 @@
+import {
+  Roboto,
+  Open_Sans,
+  Lato,
+  Montserrat,
+  Jost,
+  Inter,
+  Poppins,
+  Playfair_Display,
+  Raleway,
+  Ubuntu
+} from 'next/font/google';
+
+// Google Fonts configuration
+export const roboto = Roboto({
+  weight: ['100', '300', '400', '500', '700', '900'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-roboto'
+});
+
+export const openSans = Open_Sans({
+  weight: ['300', '400', '500', '600', '700', '800'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-open-sans'
+});
+
+export const lato = Lato({
+  weight: ['100', '300', '400', '700', '900'],
+  subsets: ['latin', 'latin-ext'],
+  display: 'swap',
+  variable: '--font-lato'
+});
+
+export const montserrat = Montserrat({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],
+  display: 'swap',
+  variable: '--font-montserrat'
+});
+
+export const jost = Jost({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic'],
+  display: 'swap',
+  variable: '--font-jost'
+});
+
+export const inter = Inter({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-inter'
+});
+
+export const poppins = Poppins({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext'],
+  display: 'swap',
+  variable: '--font-poppins'
+});
+
+export const playfairDisplay = Playfair_Display({
+  weight: ['400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic'],
+  display: 'swap',
+  variable: '--font-playfair-display'
+});
+
+export const raleway = Raleway({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext'],
+  display: 'swap',
+  variable: '--font-raleway'
+});
+
+export const ubuntu = Ubuntu({
+  weight: ['300', '400', '500', '700'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext'
+  ],
+  display: 'swap',
+  variable: '--font-ubuntu'
+});
+
+// Font mapping for easy access
+export const fontMap = {
+  Roboto: roboto,
+  'Open Sans': openSans,
+  Lato: lato,
+  Montserrat: montserrat,
+  Jost: jost,
+  Inter: inter,
+  Poppins: poppins,
+  'Playfair Display': playfairDisplay,
+  Raleway: raleway,
+  Ubuntu: ubuntu
+} as const;
+
+export type GoogleFontName = keyof typeof fontMap;
+
+// Get font class name by font name
+export function getFontClassName(fontName: string): string {
+  const font = fontMap[fontName as GoogleFontName];
+  return font?.className || '';
+}
+
+// Get font variable by font name
+export function getFontVariable(fontName: string): string {
+  const font = fontMap[fontName as GoogleFontName];
+  return font?.variable || '';
+}
+
+// Get all font variables for CSS variables
+export function getAllFontVariables(): string {
+  return Object.values(fontMap)
+    .map((font) => font.variable)
+    .join(' ');
+}

package/app-template/src/settings.js

@@ -16,14 +16,14 @@ module.exports = {
   localization: {
     locales: [
       {
-        label: 'EN',
+        label: 'English',
         value: 'en',
         localePath: 'en',
         apiValue: 'en-us',
         rtl: false
       },
       {
-        label: 'TR',
+        label: 'Turkish',
         value: 'tr',
         localePath: 'tr',
         apiValue: 'tr-tr',

package/app-template/src/types/hookform-resolvers-yup.d.ts

@@ -0,0 +1,28 @@
+declare module '@hookform/resolvers/yup' {
+  import { FieldValues, ResolverOptions, ResolverResult, UnpackNestedValue } from 'react-hook-form';
+  import * as Yup from 'yup';
+  import type Lazy from 'yup/lib/Lazy';
+
+  type Options<T extends Yup.AnyObjectSchema | Lazy<any>> =
+    Parameters<T['validate']>[1];
+
+  export type Resolver = <
+    T extends Yup.AnyObjectSchema | Lazy<any>
+  >(
+    schema: T,
+    schemaOptions?: Options<T>,
+    factoryOptions?: {
+      mode?: 'async' | 'sync';
+      rawValues?: boolean;
+    }
+  ) => <
+    TFieldValues extends FieldValues,
+    TContext
+  >(
+    values: UnpackNestedValue<TFieldValues>,
+    context: TContext | undefined,
+    options: ResolverOptions<TFieldValues>
+  ) => Promise<ResolverResult<TFieldValues>>;
+
+  export const yupResolver: Resolver;
+}