@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/bin/pz-generate-routes.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const findBaseDir = require('../utils/find-base-dir');
+
+const generateRoutes = () => {
+  const baseDir = findBaseDir();
+  const srcDir = path.join(baseDir, 'src');
+  const appDir = path.join(srcDir, 'app');
+
+  const routesDir = path.join(srcDir, 'routes');
+  const jsOutputPath = path.join(routesDir, 'generated-routes.js');
+
+  if (!fs.existsSync(routesDir)) {
+    fs.mkdirSync(routesDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(appDir)) {
+    console.error(`Error: app directory not found at ${appDir}`);
+    console.error('Make sure you have an app directory in your project');
+    process.exit(1);
+  }
+
+  const routes = [];
+  const excludedDirs = ['api', 'pz-not-found'];
+
+  const skipSegments = [
+    '[pz]',
+    '[commerce]',
+    '[locale]',
+    '[currency]',
+    '[session]',
+    '[segment]',
+    '[url]',
+    '[theme]',
+    '[member_type]'
+  ];
+  const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
+
+  const walkDirectory = (dir, basePath = '') => {
+    const files = fs.readdirSync(dir);
+
+    files.forEach((file) => {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        if (excludedDirs.includes(file)) {
+          return;
+        }
+
+        if (skipCatchAllRoutes.includes(file.toLowerCase())) {
+          return;
+        }
+
+        let routePath = basePath;
+        if (skipSegments.includes(file.toLowerCase())) {
+          routePath = basePath;
+        } else if (file.startsWith('[') && file.endsWith(']')) {
+          if (file.startsWith('[...')) {
+            routePath = `${basePath}/.+`;
+          } else {
+            routePath = `${basePath}/[^/]+`;
+          }
+        } else if (file.startsWith('(') && file.endsWith(')')) {
+          routePath = basePath;
+        } else {
+          routePath = `${basePath}/${file}`;
+        }
+
+        const pageFiles = ['page.tsx'];
+        const hasPage = pageFiles.some((pageFile) =>
+          fs.existsSync(path.join(filePath, pageFile))
+        );
+
+        if (hasPage && routePath) {
+          routes.push(routePath === '' ? '/' : routePath);
+        }
+
+        walkDirectory(filePath, routePath);
+      }
+    });
+  };
+
+  walkDirectory(appDir);
+
+  routes.push('/');
+
+  const cleanedRoutes = routes
+    .map((route) => {
+      return route.replace(/\/+/g, '/');
+    })
+    .filter((route, index, self) => {
+      return self.indexOf(route) === index;
+    })
+    .sort();
+
+  const jsContent = `// Generated by pz-generate-routes script
+// Do not edit manually
+module.exports = ${JSON.stringify(cleanedRoutes, null, 2)};`;
+
+  fs.writeFileSync(jsOutputPath, jsContent);
+
+  console.info(
+    `Routes generated successfully. (Found ${cleanedRoutes.length} routes)`
+  );
+};
+
+try {
+  generateRoutes();
+} catch (error) {
+  console.error('Error generating routes:', error);
+  process.exit(1);
+}

package/bin/pz-prebuild.js

@@ -5,3 +5,4 @@ const runScript = require('./run-script');
 runScript('pz-install-theme.js');
 runScript('pz-pre-check-dist.js');
 runScript('pz-generate-translations.js');
+runScript('pz-generate-routes.js');

package/bin/pz-predev.js

@@ -6,3 +6,4 @@ runScript('pz-install-extensions.js');
 runScript('pz-check-env.js');
 runScript('pz-install-theme.js');
 runScript('pz-generate-translations.js');
+runScript('pz-generate-routes.js');

package/bin/pz-run-tests.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const findBaseDir = require('../utils/find-base-dir');
+const checkMonorepo = require('../utils/check-monorepo');
+
+const IS_MONOREPO = checkMonorepo() !== null;
+const BASE_DIR = findBaseDir();
+const PLUGINS = require(path.join(BASE_DIR, 'src', 'plugins.js'));
+
+function findPluginTestFiles(akinonNextPackagePath) {
+  const pluginsRootPath = path.join(
+    akinonNextPackagePath,
+    '..',
+    '..',
+    IS_MONOREPO ? 'packages' : '@akinon'
+  );
+
+  if (!fs.existsSync(pluginsRootPath)) {
+    console.log('Plugins directory not found:', pluginsRootPath);
+    return [];
+  }
+
+  return PLUGINS.reduce((testFiles, pluginName) => {
+    const pluginDirectoryPath = path.join(pluginsRootPath, pluginName);
+    if (fs.existsSync(pluginDirectoryPath)) {
+      const pluginTestFiles = glob.sync('**/*.test.ts', {
+        cwd: pluginDirectoryPath,
+        absolute: true
+      });
+
+      return testFiles.concat(pluginTestFiles);
+    } else {
+      console.log(`Plugin directory not found: ${pluginName}`);
+    }
+    return testFiles;
+  }, []);
+}
+
+function isJestInstalled() {
+  try {
+    const jestExecutablePath = path.join(
+      BASE_DIR,
+      'node_modules',
+      '.bin',
+      'jest'
+    );
+    return fs.existsSync(jestExecutablePath);
+  } catch (error) {
+    return false;
+  }
+}
+
+function getAkinonNextPackagePath() {
+  if (!IS_MONOREPO) {
+    return path.resolve(__dirname, '..');
+  }
+
+  return path.resolve(__dirname, '../../../packages/akinon-next');
+}
+
+if (!isJestInstalled()) {
+  console.error('\x1b[31mError: Jest is not installed in the project!\x1b[0m');
+  console.error(
+    'Please install all dependencies by running one of the following commands:'
+  );
+  console.error('  npm install');
+  console.error('  yarn install');
+  process.exit(1);
+}
+
+const jestExecutablePath = path.join(BASE_DIR, 'node_modules', '.bin', 'jest');
+const akinonNextPackagePath = getAkinonNextPackagePath();
+
+const testFiles = [
+  ...glob.sync('__tests__/**/*.test.ts', {
+    cwd: akinonNextPackagePath,
+    absolute: true
+  }),
+  ...findPluginTestFiles(akinonNextPackagePath)
+];
+
+console.log(`Found ${testFiles.length} test files to run`);
+
+const jestArguments = [
+  ...testFiles,
+  `--config ${path.join(akinonNextPackagePath, 'jest.config.js')}`,
+  '--runTestsByPath',
+  '--passWithNoTests'
+];
+
+spawn(jestExecutablePath, jestArguments, {
+  cwd: akinonNextPackagePath,
+  stdio: 'inherit',
+  shell: true
+});

package/bin/run-prebuild-tests.js

@@ -0,0 +1,46 @@
+const path = require('path')
+const fs = require('fs')
+
+function runPrebuildTests() {
+  const workspaceRoot = process.cwd()
+  const configPath = path.join(workspaceRoot, 'config/prebuild-tests.json')
+
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'))
+
+    if (config.tests && Array.isArray(config.tests)) {
+      for (const testScript of config.tests) {
+        console.log(`🧪 Running test script: ${testScript}`)
+        const result = require('child_process').spawnSync('yarn', [testScript], {
+          stdio: 'inherit',
+          shell: true
+        })
+
+        if (result.status !== 0) {
+          console.error(`❌ Test script '${testScript}' failed`)
+          process.exit(1)
+        }
+      }
+      console.log('✅ All prebuild tests passed successfully!')
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.log('🧪 Running default test: test:middleware')
+      const result = require('child_process').spawnSync('yarn', ['test:middleware'], {
+        stdio: 'inherit',
+        shell: true
+      })
+
+      if (result.status !== 0) {
+        console.error('❌ Middleware test failed')
+        process.exit(1)
+      }
+      console.log('✅ Default test passed successfully!')
+    } else {
+      console.error('❌ Error reading test configuration:', error)
+      process.exit(1)
+    }
+  }
+}
+
+module.exports = runPrebuildTests

package/components/accordion.tsx

@@ -7,15 +7,19 @@ import { AccordionProps } from '../types';
 
 export const Accordion = ({
   isCollapse = false,
+  collapseClassName,
   title,
   subTitle,
   icons = ['chevron-up', 'chevron-down'],
   iconSize = 16,
   iconColor = 'fill-[#000000]',
   children,
+  headerClassName,
   className,
   titleClassName,
-  dataTestId
+  subTitleClassName,
+  dataTestId,
+  contentClassName
 }: AccordionProps) => {
   const [collapse, setCollapse] = useState(isCollapse);
 
@@ -27,15 +31,22 @@ export const Accordion = ({
       )}
     >
       <div
-        className="flex items-center justify-between cursor-pointer"
+        className={twMerge(
+          'flex items-center justify-between cursor-pointer',
+          headerClassName
+        )}
         onClick={() => setCollapse(!collapse)}
         data-testid={dataTestId}
       >
-        <div className="flex flex-col">
+        <div className={twMerge('flex flex-col', contentClassName)}>
           {title && (
             <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
           )}
-          {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
+          {subTitle && (
+            <h4 className={twMerge('text-xs text-gray-700', subTitleClassName)}>
+              {subTitle}
+            </h4>
+          )}
         </div>
 
         {icons && (
@@ -46,7 +57,11 @@ export const Accordion = ({
           />
         )}
       </div>
-      {collapse && <div className="mt-3 text-sm">{children}</div>}
+      {collapse && (
+        <div className={twMerge('mt-3 text-sm', collapseClassName)}>
+          {children}
+        </div>
+      )}
     </div>
   );
 };

package/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
-import { ButtonProps } from '../types/index';
+import { ButtonProps } from '../types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Link } from './link';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/components/client-root.tsx

@@ -1,6 +1,24 @@
 'use client';
 
+import React from 'react';
+import { useCallback, useEffect } from 'react';
 import { useMobileIframeHandler } from '../hooks';
+import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import {
+  setComponents,
+  setDataSources,
+  setDesignMode,
+  setDraggingActive,
+  setPlaceholders,
+  setResponsive,
+  setSelectedComponentId,
+  setSelectedPlaceholder,
+  setSelectedWidget
+} from '../redux/reducers/widget';
+import { LoggerPopup } from './logger-popup';
+import { LoggerProvider } from '../hooks/use-logger-context';
+import * as Sentry from '@sentry/nextjs';
+import { initSentry } from '../sentry';
 
 export default function ClientRoot({
   children,
@@ -9,11 +27,129 @@ export default function ClientRoot({
   children: React.ReactNode;
   sessionId?: string;
 }) {
-  const { preventPageRender } = useMobileIframeHandler({ sessionId });
+  const { preventPageRender } = useMobileIframeHandler({
+    sessionId: sessionId || ''
+  });
+  const { components } = useAppSelector((state) => state.widget);
+  const dispatch = useAppDispatch();
+
+  const postMessage = (message: {
+    type: string;
+    data: Record<string, unknown>;
+  }) => {
+    window.parent.postMessage(message, '*');
+  };
+
+  const handleWidgetMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.type === 'UPDATE_COMPONENTS') {
+        const { components } = event.data.data;
+
+        dispatch(setComponents(components));
+      } else if (event.data.type === 'UPDATE_WIDGET_SYSTEM') {
+        const {
+          responsive,
+          designMode,
+          selectedComponentId,
+          placeholders,
+          dataSources
+        } = event.data.data;
+
+        dispatch(setResponsive(responsive));
+        dispatch(setDesignMode(designMode));
+        dispatch(setSelectedComponentId(selectedComponentId));
+        dispatch(setPlaceholders(placeholders));
+        dispatch(setDataSources(dataSources));
+      } else if (event.data.type === 'SELECT_PLACEHOLDER') {
+        const { placeholderSlug } = event.data.data;
+
+        dispatch(setSelectedPlaceholder(placeholderSlug));
+      } else if (event.data.type === 'SELECT_WIDGET') {
+        const { widgetSlug } = event.data.data;
+
+        dispatch(setSelectedWidget(widgetSlug));
+
+        postMessage({
+          type: 'SELECT_COMPONENT',
+          data: {
+            componentId: null
+          }
+        });
+      } else if (event.data.type === 'DRAG_START') {
+        dispatch(setDraggingActive(true));
+      } else if (event.data.type === 'DRAG_END') {
+        dispatch(setDraggingActive(false));
+      } else if (event.data.type === 'GET_DROP_TARGET') {
+        const { x, y, component } = event.data.data;
+        const elements = document.elementsFromPoint(x, y);
+        const dropTargetId = elements
+          .find((element) => element.hasAttribute('data-component'))
+          ?.getAttribute('data-id');
+
+        postMessage({
+          type: 'DROP_TARGET_RESPONSE',
+          data: {
+            targetId: dropTargetId,
+            component
+          }
+        });
+      } else if (event.data.type === 'SET_COOKIE') {
+        const { key, value } = event.data.data.value;
+
+        if (key && value) {
+          let cookieString = '';
+          if (window.parent !== window) {
+            cookieString = `${key}=${value}; path=/; SameSite=None; Secure`;
+          } else if (key === 'widget_builder') {
+            cookieString = `${key}=false; path=/; SameSite=None; Secure`;
+          }
+
+          if (cookieString) {
+            document.cookie = cookieString;
+          }
+        }
+      }
+    },
+    [dispatch, components]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleWidgetMessage);
+
+    if (window.parent === window) {
+      document.cookie = 'widget_builder=false; path=/; SameSite=None; Secure';
+    }
+
+    return () => {
+      window.removeEventListener('message', handleWidgetMessage);
+    };
+  }, [handleWidgetMessage]);
+
+  const initializeSentry = async () => {
+    const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
+    const data = await response.json();
+
+    const options = {
+      dsn: data.dsn
+    };
+
+    initSentry('Client', options);
+  };
+
+  useEffect(() => {
+    if (!Sentry.isInitialized()) {
+      initializeSentry();
+    }
+  }, []);
 
   if (preventPageRender) {
     return null;
   }
 
-  return <>{children}</>;
+  return (
+    <LoggerProvider>
+      {children}
+      <LoggerPopup />
+    </LoggerProvider>
+  );
 }

package/components/file-input.tsx

@@ -1,8 +1,70 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
-import { FileInputProps } from '../types/index';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { FileInputProps } from '../types';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput(
+    {
+      buttonClassName,
+      onChange,
+      fileClassName,
+      fileNameWrapperClassName,
+      fileInputClassName,
+      ...props
+    },
+    ref
+  ) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className={twMerge(
+            'absolute inset-0 w-full h-full opacity-0 cursor-pointer',
+            fileInputClassName
+          )}
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={twMerge(
+            'bg-primary text-white py-2 px-4 text-sm',
+            buttonClassName
+          )}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div
+          className={twMerge('mt-1 text-gray-500', fileNameWrapperClassName)}
+        >
+          {fileNames.length > 0 ? (
+            <ul className={twMerge('list-disc pl-4 text-xs', fileClassName)}>
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className={twMerge('text-xs', fileClassName)}>
+              {t('common.file_input.no_file')}
+            </span>
+          )}
+        </div>
+      </div>
+    );
   }
 );

package/components/index.ts

@@ -21,3 +21,4 @@ export * from './link';
 export * from './pagination';
 export * from './live-commerce';
 export * from './file-input';
+export * from './logger-popup';

package/components/input.tsx

@@ -112,7 +112,7 @@ export const Input = forwardRef<
         )}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </div>
   );