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

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>
   );

package/components/link.tsx

@@ -19,26 +19,56 @@ export const Link = ({ children, href, ...rest }: LinkProps) => {
       return '#';
     }
 
-    if (
-      typeof href !== 'string' ||
-      urlSchemes.some((scheme) => href.startsWith(scheme))
-    ) {
-      return href;
-    }
+    if (typeof href === 'string') {
+      const trimmedHref = href.trim();
+      if (!trimmedHref) {
+        return '#';
+      }
+
+      if (urlSchemes.some((scheme) => trimmedHref.startsWith(scheme))) {
+        if (
+          trimmedHref.startsWith('mailto:') ||
+          trimmedHref.startsWith('tel:')
+        ) {
+          return trimmedHref;
+        }
+
+        try {
+          new URL(trimmedHref);
+          return trimmedHref;
+        } catch {
+          return '#';
+        }
+      }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+      try {
+        new URL(trimmedHref, 'http://localhost');
+      } catch {
+        return '#';
+      }
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      const pathnameWithoutLocale = trimmedHref.replace(
+        urlLocaleMatcherRegex,
+        ''
+      );
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
+
+      return trimmedHref || '#';
     }
 
-    return href || '#';
+    if (typeof href !== 'string') {
+      return href;
+    }
+    return '#';
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (