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

package/utils/redirect.ts

@@ -3,21 +3,27 @@ import Settings from 'settings';
 import { headers } from 'next/headers';
 import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
+import { urlLocaleMatcherRegex } from '@akinon/next/utils';
 
 export const redirect = async (path: string, type?: RedirectType) => {
   const nextHeaders = await headers();
   const pageUrl = new URL(
-    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
+    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL ?? ''
   );
 
   const currentLocale = Settings.localization.locales.find(
     (locale) => locale.value === ServerVariables.locale
   );
 
-  const callbackUrl = pageUrl.pathname;
+  const searchParams = new URLSearchParams(pageUrl.search);
+
+  const callbackUrl =
+    pageUrl.pathname.replace(urlLocaleMatcherRegex, '') +
+    (searchParams.toString() ? `?${searchParams.toString()}` : '');
+
   const redirectUrlWithLocale = getUrlPathWithLocale(
     path,
-    currentLocale.localePath ?? currentLocale.value
+    currentLocale?.value
   );
 
   const redirectUrl = `${redirectUrlWithLocale}?callbackUrl=${callbackUrl}`;

package/utils/redirection-iframe.ts

@@ -1,8 +1,14 @@
 const iframeURLChange = (iframe, callback) => {
   iframe.addEventListener('load', () => {
     setTimeout(() => {
-      if (iframe?.contentWindow?.location) {
-        callback(iframe.contentWindow.location);
+      try {
+        if (iframe?.contentWindow?.location) {
+          const iframeLocation = iframe.contentWindow.location;
+
+          callback(iframeLocation);
+        }
+      } catch (error) {
+        // Expected: browser blocks cross-origin iframe access for security
       }
     }, 0);
   });

package/utils/widget-styles.ts

@@ -0,0 +1,107 @@
+const kebabize = (str: string) => {
+  return str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? '-' : '') + $.toLowerCase()
+  );
+};
+
+const formatCssValue = (value: string | number) => {
+  return /^\d+$/.test(value.toString()) ? `${value}px` : value;
+};
+
+interface NodeProperties {
+  style?: Record<string, any>;
+  parent_id?: string;
+  type?: string;
+  tag?: string;
+  breakpoints?: any[];
+  dataSources?: any[];
+  is_slider?: boolean;
+  iteratingNode?: string;
+  iteratorValue?: string;
+  selectedDataSourceId?: string;
+  order?: number;
+}
+
+interface Node {
+  key: string;
+  properties: NodeProperties;
+  label?: string;
+  data_type?: string;
+}
+
+const processNode = (node: Node, selector = '', styles: string[] = []) => {
+  const { key, properties } = node;
+  const { style } = properties;
+
+  if (key && style) {
+    const baseStyles: Record<string, any> = {};
+    const breakpointStyles: Record<string, Record<string, any>> = {};
+
+    Object.entries(style).forEach(([prop, val]) => {
+      if (typeof val === 'object') {
+        breakpointStyles[prop] = val;
+      } else {
+        baseStyles[prop] = val;
+      }
+    });
+
+    const baseCssRules = Object.entries(baseStyles)
+      .map(([prop, val]) => `${kebabize(prop)}: ${formatCssValue(val)};`)
+      .join(' ');
+
+    if (baseCssRules) {
+      styles.push(`${selector} { ${baseCssRules} }`);
+    }
+
+    Object.keys(breakpointStyles)
+      .map((bp) => parseInt(bp, 10))
+      .sort((a, b) => a - b)
+      .forEach((bp) => {
+        const bpCssRules = Object.entries(breakpointStyles[bp])
+          .map(([prop, val]) => `${kebabize(prop)}: ${formatCssValue(val)};`)
+          .join(' ');
+
+        if (bpCssRules) {
+          styles.push(
+            `@media only screen and (min-width: ${bp}px) { ${selector} { ${bpCssRules} } }`
+          );
+        }
+      });
+  }
+
+  return styles;
+};
+
+const componentToCss = (components: Record<string, Node>) => {
+  const styles: string[] = [];
+  const componentsById: Record<string, Node> = {};
+
+  Object.values(components).forEach((component) => {
+    componentsById[component.key] = component;
+  });
+
+  const addStylesForComponent = (component: Node) => {
+    const selector = `[data-id="${component.key}"]`;
+    processNode(component, selector, styles);
+
+    Object.values(componentsById)
+      .filter((child) => child.properties.parent_id === component.key)
+      .forEach(addStylesForComponent);
+  };
+
+  Object.values(componentsById)
+    .filter((component) => !component.properties?.parent_id)
+    .forEach(addStylesForComponent);
+
+  return styles.join(' ');
+};
+
+export const generateWidgetStyles = (widgetSchemas: Record<string, Node>[]) => {
+  return widgetSchemas
+    .filter((schema) => Object.keys(schema).length > 0)
+    .map((data) => componentToCss(data))
+    .join('\n');
+};
+
+export type { Node, NodeProperties };

package/views/error-page.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useLocalization } from '../hooks';
+import { Button, Link } from '../components';
+import { ROUTES } from 'routes';
+
+export default function PzErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  const [isServerError, setIsServerError] = useState(false);
+
+  useEffect(() => {
+    if ('isServerError' in error) {
+      setIsServerError(true);
+      return;
+    }
+
+    setIsServerError(!!error.digest);
+  }, [error]);
+
+  return isServerError ? (
+    <ServerErrorUI />
+  ) : (
+    <ClientErrorUI error={error} reset={reset} />
+  );
+}
+
+function ClientErrorUI({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const { t } = useLocalization();
+
+  const errorMessage = error?.message || 'Unknown error';
+
+  return (
+    <section className="text-center px-6 py-6 my-14 md:px-0 md:m-14">
+      <div className="text-4xl font-bold md:text-6xl text-red-500">500</div>
+      <h1 className="text-lg md:text-xl mt-4">
+        {t('common.client_error.title')}
+      </h1>
+      <p className="text-lg md:text-xl mt-2">
+        {t('common.client_error.description')}
+      </p>
+
+      <div className="mt-4 mx-auto max-w-lg">
+        <p className="text-xs text-gray-600 font-mono bg-gray-100 p-3 rounded overflow-auto text-left">
+          <span className="font-semibold">Error:</span> {errorMessage}
+        </p>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.client_error.link_text')}
+        </Link>
+        <Button onClick={reset} className="text-lg">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+function ServerErrorUI() {
+  const { t } = useLocalization();
+
+  const reloadPage = () => {
+    window.location.reload();
+  };
+
+  return (
+    <section className="text-center px-6 my-14 md:px-0 md:m-14">
+      <div className="text-7xl font-bold md:text-8xl">500</div>
+      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
+      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.page_500.link_text')}
+        </Link>
+        <Button onClick={reloadPage} className="text-lg">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}

package/with-pz-config.js

@@ -1,19 +1,22 @@
+const path = require('path');
 const pzPlugins = require('./plugins');
 const deepMerge = require('./utils/deep-merge');
 
 /** @type {import('next').NextConfig} */
 const defaultConfig = {
-  experimental: { instrumentationHook: true },
   reactStrictMode: true,
-  transpilePackages: ['@akinon/next', ...pzPlugins.map((p) => `@akinon/${p}`)],
+  transpilePackages: ['@akinon/next', '@akinon/pz-theme', ...pzPlugins.map((p) => `@akinon/${p}`)],
   skipTrailingSlashRedirect: true,
   poweredByHeader: false,
   cacheMaxMemorySize: 0,
+  output: 'standalone',
+  compress: false,
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
   },
   images: {
     remotePatterns: [
+      //It has to be like this for security reasons
       {
         protocol: 'https',
         hostname: '**.akinoncloud.com'
@@ -44,14 +47,21 @@ const defaultConfig = {
             value: 'max-age=63072000; includeSubDomains; preload'
           },
           {
-            key: 'X-Frame-Options',
-            value: 'SAMEORIGIN'
+            key: 'Content-Security-Policy',
+            value:
+              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com http://localhost:5174 localhost:5174"
           }
         ]
       }
     ];
   },
   webpack: (config, options) => {
+    // Alias 'redux/store' to the app's local redux/store module to prevent
+    // collision with the npm 'redux' package's exports field
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'redux/store': path.resolve(process.cwd(), 'src/redux/store')
+    };
     config.resolve.fallback = {
       ...config.resolve.fallback,
       ...pzPlugins.reduce((acc, plugin) => {
@@ -60,10 +70,14 @@ const defaultConfig = {
       }, {}),
       translations: false
     };
+    // Ensure webpack can resolve deps from the app's node_modules when
+    // compiling transpiled packages (e.g. @akinon/next) whose imports
+    // may not be hoisted to the monorepo root.
+    const appNodeModules = path.resolve(process.cwd(), 'node_modules');
+    if (!config.resolve.modules.includes(appNodeModules)) {
+      config.resolve.modules.push(appNodeModules);
+    }
     return config;
-  },
-  sentry: {
-    hideSourceMaps: true
   }
 };