@wavemaker-ai/react-codegen 1.0.0-rc.309

package/templates/project/app/wm-globals.css

@@ -0,0 +1,152 @@
+.app-page .app-header-shrink {
+  flex-shrink: 0;
+}
+
+.wm-app
+  .app-composite-widget:has([disabled]):not(:has([aria-readonly='true'])) {
+  opacity: var(--wm-btn-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: unset;
+}
+
+/* Error Boundary Component styles Start */
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+.error-info-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 600px;
+  width: 100%;
+  margin-bottom: 30px;
+}
+
+.error-card {
+  background-color: oklch(88.5% 0.062 18.334);
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  width: 100%;
+}
+
+.error-card-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.error-card-row .error-fallback-erroricon {
+  margin-right: 8px;
+  color: #f44336;
+}
+
+.error-button-container {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.error-button-container .error-fallback-gotohome-btn,
+.error-button-container .error-fallback-goback-btn {
+  min-width: 120px;
+}
+
+/* Image container styles */
+.error-image-container {
+  margin-bottom: 20px;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Title styles */
+.error-fallback-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 8px !important;
+  text-align: center;
+}
+
+/* Subtitle styles */
+.error-fallback-subtitle {
+  font-size: 16px;
+  text-align: center;
+}
+
+/* Error label styles */
+.error-fallback-error-label {
+  font-size: 16px;
+  font-weight: bold;
+  color: red;
+}
+
+/* Error message styles */
+.error-fallback-error-message {
+  font-size: 14px;
+  color: #666;
+  word-break: break-word;
+}
+
+/* Error Boundary Component styles End  */
+
+/* for composite disabled styles */
+.wm-app
+  .app-composite-widget:has([disabled]).app-composite-widget:has(
+    [disabled]
+  ):not(:has([aria-readonly='true'])) {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.wm-app
+  .app-composite-widget:has([disabled]):not(:has([aria-readonly='true']))
+  * {
+  pointer-events: none;
+}
+
+.wm-app
+  .app-composite-widget:has(.app-richtexteditor .jodit-container [disabled]) {
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  cursor: auto !important;
+}
+
+/* Ensure all Jodit children are interactive */
+.wm-app
+  .app-composite-widget:has(.app-richtexteditor .jodit-container [disabled])
+  .app-richtexteditor
+  .jodit-container,
+.wm-app
+  .app-composite-widget:has(.app-richtexteditor .jodit-container [disabled])
+  .app-richtexteditor
+  .jodit-container
+  * {
+  pointer-events: auto !important;
+}
+
+.app-richtexteditor[aria-readonly='true'] .jodit-workplace {
+  cursor: not-allowed !important ;
+}
+
+.app-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: transparent;
+  position: fixed;
+  z-index: 1000;
+}

package/templates/project/app/wm-styles.css

@@ -0,0 +1,4 @@
+@import './wm-globals.css';
+@import './autoLayout.css';
+@import './components.css';
+@import './widgetInlineStylesOverride.css';

package/templates/project/hooks/usePageEvents.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { useEffect, useRef } from 'react';
+
+export interface PageEventHandlers {
+  attach?: () => void;
+  detach?: () => void;
+  destroy?: () => void;
+  orientationchange?: () => void;
+  resize?: () => void;
+}
+
+export const usePageEvent = (handlers: PageEventHandlers) => {
+  const handlersRef = useRef(handlers);
+  handlersRef.current = handlers;
+
+  useEffect(() => {
+    // this will be called when the page is mounted/attached
+    if (handlersRef.current.attach) {
+      handlersRef.current.attach();
+    }
+
+    const handleOrientationChange = () => {
+      handlersRef.current.orientationchange?.();
+    };
+
+    const handleResize = () => {
+      handlersRef.current.resize?.();
+    };
+
+    window.addEventListener('orientationchange', handleOrientationChange);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('orientationchange', handleOrientationChange); // called when page orientation changes
+      window.removeEventListener('resize', handleResize); // called when page is resized
+
+      // this will be called when the page is destroyed/unmounted
+      if (handlersRef.current.destroy) {
+        handlersRef.current.destroy();
+      }
+    };
+  }, []);
+
+  return null;
+};

package/templates/project/libs/appConfig.ts

@@ -0,0 +1,14 @@
+export default function getAppConfig() {
+  return {
+    appConfig: {
+      url: process.env.NEXT_PUBLIC_SERVER_PATH || null,
+      basePath: process.env.NEXT_PUBLIC_BASE_PATH
+        ? process.env.NEXT_PUBLIC_BASE_PATH.endsWith('/')
+          ? process.env.NEXT_PUBLIC_BASE_PATH
+          : process.env.NEXT_PUBLIC_BASE_PATH + '/'
+        : '/',
+      appProperties: {},
+    },
+    appVariables: {},
+  };
+}

package/templates/project/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/project/next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  distDir: 'build',
+  output: 'export',
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  reactStrictMode: false,
+  trailingSlash: false,
+  typescript: {
+    ignoreBuildErrors: true, // This flag is added for temporary. Ignores all TypeScript errors during `npm run build`
+  },
+  images: {
+    unoptimized: true,
+  },
+};
+
+export default nextConfig;