@akinon/next 2.0.0-beta.9 → 2.0.0

package/components/accordion.tsx

@@ -7,35 +7,46 @@ 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);
 
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
         className
       )}
     >
       <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/client-root.tsx

@@ -1,9 +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';
-import { useEffect } from 'react';
 
 export default function ClientRoot({
   children,
@@ -12,7 +27,103 @@ 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 } });
@@ -35,5 +146,10 @@ export default function ClientRoot({
     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

@@ -40,7 +40,7 @@ export const Input = forwardRef<
   const inputClass = twMerge(
     clsx(
       'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-hidden', // disable outline on focus
+      'focus-visible:outline-none', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
@@ -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 (

package/components/logger-popup.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import React, { useState, useCallback, memo, useMemo } from 'react';
+import { LogEntry } from '../hooks/use-logger';
+import { useLoggerContext } from '../hooks/use-logger-context';
+
+const LoggerAnimations = ({ color = '#dc2626' }: { color?: string }) => (
+  <style jsx global>{`
+    @keyframes pulse {
+      0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}80;
+      }
+
+      70% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px ${color}00;
+      }
+
+      100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}00;
+      }
+    }
+  `}</style>
+);
+
+const LogLevelColors = {
+  warn: '#ff9800', // orange
+  error: '#f44336' // red
+};
+
+const LoggerTrigger = memo(
+  ({
+    onClick,
+    logCount = 0,
+    currentColor
+  }: {
+    onClick: () => void;
+    logCount?: number;
+    currentColor: string;
+  }) => {
+    return (
+      <button
+        onClick={onClick}
+        className="fixed bottom-4 right-4 w-14 h-14 border border-white rounded-full flex items-center justify-center shadow-lg z-[9999] hover:opacity-90 transition-colors"
+        aria-label="Open Logger"
+        style={{
+          backgroundColor: currentColor,
+          ...(logCount > 0 && {
+            animation: 'pulse 2s infinite'
+          })
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="text-white size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+          />
+        </svg>
+
+        {logCount > 0 && (
+          <span
+            className="absolute w-5 h-5 -bottom-[5px] p-1 -left-[5px] border-2 border-white rounded-full flex items-center justify-center text-[8px] text-white font-bold"
+            style={{
+              backgroundColor: currentColor
+            }}
+          >
+            {logCount > 99 ? '99+' : logCount}
+          </span>
+        )}
+      </button>
+    );
+  }
+);
+
+LoggerTrigger.displayName = 'LoggerTrigger';
+
+const LogItem = memo(({ log }: { log: LogEntry }) => {
+  const [expanded, setExpanded] = useState(false);
+  const hasPayload = log.payload && Object.keys(log.payload).length > 0;
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  return (
+    <div className="border-b border-gray-200 py-2">
+      <div className="relative">
+        <div
+          className="absolute top-0 left-0 w-3 h-3 rounded-full mt-1.5 mr-2 flex-shrink-0"
+          style={{
+            backgroundColor: LogLevelColors[log.level],
+            boxShadow: `0 0 5px ${LogLevelColors[log.level]}`
+          }}
+        />
+        <div className="ml-6">
+          <div className="flex justify-between">
+            <span
+              className="font-medium capitalize"
+              style={{
+                color: LogLevelColors[log.level]
+              }}
+            >
+              {log.level}
+            </span>
+            <span className="text-xs text-gray-500">
+              {log.timestamp.toLocaleTimeString()}
+            </span>
+          </div>
+          <p className="text-sm">{log.message}</p>
+          {hasPayload && (
+            <button
+              onClick={toggleExpanded}
+              className="text-xs text-blue-500 mt-1 hover:text-blue-700 transition-colors"
+            >
+              {expanded ? 'Hide Details' : 'Show Details'}
+            </button>
+          )}
+          {expanded && hasPayload && (
+            <pre className="text-xs bg-gray-100 p-2 mt-1 rounded overflow-auto max-h-96 max-w-full">
+              {JSON.stringify(log.payload, null, 2)}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LogItem.displayName = 'LogItem';
+
+export const LoggerPopup = () => {
+  const {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    isDevelopment,
+    hasError,
+    hasWarning
+  } = useLoggerContext();
+
+  const currentColor = useMemo(() => {
+    if (logs.length === 0) return '#b5afaf';
+    if (hasError) return '#dc2626';
+    if (hasWarning) return '#ff9800';
+
+    return '#b5afaf';
+  }, [logs.length, hasError, hasWarning]);
+
+  if (!isDevelopment) {
+    return null;
+  }
+
+  if (!isVisible) {
+    return (
+      <>
+        <LoggerAnimations color={currentColor} />
+        <LoggerTrigger
+          onClick={toggleVisibility}
+          logCount={logs.length}
+          currentColor={currentColor}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <LoggerAnimations color={currentColor} />
+      <LoggerTrigger
+        onClick={toggleVisibility}
+        logCount={logs.length}
+        currentColor={currentColor}
+      />
+      <div className="fixed bottom-20 right-4 w-96 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-xl z-50 border-2 border-gray-200 max-h-[70vh] flex flex-col">
+        <div className="flex items-center justify-between p-3 border-b border-gray-200">
+          <h3 className="font-bold flex items-center">Development Logger</h3>
+          <div className="flex space-x-2">
+            <button
+              onClick={clearLogs}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Clear
+            </button>
+            <button
+              onClick={toggleVisibility}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+        <div className="overflow-y-auto flex-grow p-3">
+          {logs.length === 0 ? (
+            <p className="text-gray-500 text-center py-4">No logs yet</p>
+          ) : (
+            logs.map((log) => <LogItem key={log.id} log={log} />)
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

package/components/modal.tsx

@@ -4,16 +4,7 @@ import { ReactPortal } from './react-portal';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
+import { ModalProps } from '../types';
 
 export const Modal = (props: ModalProps) => {
   const {
@@ -23,7 +14,14 @@ export const Modal = (props: ModalProps) => {
     setOpen,
     title = '',
     showCloseButton = true,
-    className
+    className,
+    overlayClassName,
+    headerWrapperClassName,
+    titleClassName,
+    closeButtonClassName,
+    iconName = 'close',
+    iconSize = 16,
+    iconClassName
   } = props;
 
   useEffect(() => {
@@ -38,7 +36,12 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
+          overlayClassName
+        )}
+      />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
@@ -46,15 +49,28 @@ export const Modal = (props: ModalProps) => {
         )}
       >
         {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
+          <div
+            className={twMerge(
+              'flex px-6 py-4 border-b border-gray-400',
+              headerWrapperClassName
+            )}
+          >
+            {title && (
+              <h3 className={twMerge('text-lg font-light', titleClassName)}>
+                {title}
+              </h3>
+            )}
             {showCloseButton && (
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="ml-auto"
+                className={twMerge('ml-auto', closeButtonClassName)}
               >
-                <Icon name="close" size={16} />
+                <Icon
+                  name={iconName}
+                  size={iconSize}
+                  className={iconClassName}
+                />
               </button>
             )}
           </div>