@wavemaker/react-codegen 11.14.1-rc.236

package/templates/component/component-old.hbs

@@ -0,0 +1,29 @@
+'use client'
+import React, { Component } from 'react';
+{{#each eagerImports}}
+import {{name}} from '{{from}}';
+{{/each}}
+import add{{typeLabel}}Script from './{{name}}.script';
+import Base{{typeLabel}}Wrapper from '@wavemaker/react-runtime/dist/runtime/Base{{lType}}Wrapper';
+
+export default class {{name}}Component extends Base{{typeLabel}}Wrapper{
+  constructor(props) {
+    super(props);
+  }
+
+  init() {
+    add{{typeLabel}}Script(this.App, this);
+  }
+
+  componentDidMount() {
+    this.init();
+  }
+  renderPage(){
+    const fragment = this;
+    return (
+        <main>
+          {{{markup}}}
+        </main>
+    );
+  }
+}

package/templates/component/component.hbs

@@ -0,0 +1,82 @@
+'use client';
+import React,{useEffect} from "react";
+import dynamic from 'next/dynamic';
+import { useAppState } from "@wavemaker/react-runtime/context/WidgetProvider";
+{{#if (eq type "PREFAB")}}
+import { useProxy } from "@wavemaker/react-runtime/context/WidgetProvider";
+{{/if}}
+import Base{{typeLabel}} from '@wavemaker/react-runtime/higherOrder/Base{{typeLabel}}';
+import { formatMessage ,_get,toNumber} from '@wavemaker/react-runtime/core/util';
+
+{{#each eagerImports}}
+import {{name}} from '{{from}}';
+{{/each}}
+{{#each lazyImports}}
+const {{name}} = dynamic(() => import('{{from}}'), {
+  loading: () => <p>Loading...</p>,
+})
+{{/each}}
+import add{{typeLabel}}Script from './{{name}}.script';
+import "./{{name}}.css";
+import getVariables from './{{name}}.variables';
+{{#if (eq type "PREFAB")}}
+import DefaultPrefabProps from './{{name}}.props';
+import PartialConfig from '../components/partial-config';
+import PageConfigs from '../pages-config';
+import WmPrefab from '@wavemaker/react-runtime/components/prefab';
+{{/if}}
+
+const {{componentName}}Component = (props: any) => {
+  const fragment = useAppState();
+{{#if (eq type "PREFAB")}}
+  const stateProxy = useProxy();
+ 
+  useEffect(()=>{
+    if(props?.onRender){
+      props?.onRender(stateProxy);
+    }
+    if(fragment?.executeStartup){
+      fragment?.executeStartup();
+    }
+  },[])
+{{else}}
+  
+  useEffect(()=>{
+    if(fragment?.executeStartup){
+      fragment?.executeStartup();
+    }
+  },[])
+{{/if}}
+
+
+
+  return (
+    <React.Fragment>
+{{#if (eq type "PREFAB")}}
+      <WmPrefab prefabname="{{prefabName}}"  onRender={props?.onRender} {...props} animation={fragment?.animation} onLoad={fragment?.onLoad} onDestroy={fragment?.onDestroy}>
+{{/if}}
+        {{{markup}}}
+{{#if (eq type "PREFAB")}}
+      </WmPrefab>
+{{/if}}
+    </React.Fragment>
+  );
+}
+
+const ComponentWithPage = Base{{typeLabel}}(
+  {{componentName}}Component,
+  add{{typeLabel}}Script,
+  getVariables,
+  {
+    componentName: "{{componentName}}",
+    startUpVariables: [{{#each startUpVariables}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    startUpActions: [{{#each startUpActions}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    autoUpdateVariables: [{{#each autoUpdateVariables}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    componentType:{{#if (eq type "PREFAB")}}'PREFAB'{{else}}'PAGE'{{/if}},
+    {{#if (eq type "PREFAB")}}partials: PartialConfig, pages: PageConfigs  {{/if}}
+  }
+);
+
+export default React.memo((props: any) => {
+  return <ComponentWithPage  {{#if (not (eq typeLabel "Page"))}} inbound={props} outbound={DefaultPrefabProps} {...DefaultPrefabProps} prefabname="{{prefabName}}"  {{/if}}  {...props} />;
+});

package/templates/component/component.props.template

@@ -0,0 +1 @@
+export default {{{props}}};

package/templates/component/formatter.hbs

@@ -0,0 +1,8 @@
+{{{script}}}
+
+Object.keys(WM_CUSTOM_FORMATTERS).forEach(k => {
+    const formatter = WM_CUSTOM_FORMATTERS[k];
+    formatter.format = formatter.formatter;
+});
+
+export default WM_CUSTOM_FORMATTERS;

package/templates/component/page.hbs

@@ -0,0 +1,13 @@
+import { Metadata } from "next";
+import {{componentName}}Component from './{{name}}.component';
+
+
+export const metadata: Metadata = {
+  title: "{{componentName}}",
+};
+
+export default function Page() {
+  return (
+      <{{componentName}}Component />
+  );
+}

package/templates/component/partial.hbs

@@ -0,0 +1,73 @@
+'use client';
+import React,{useEffect} from "react";
+import dynamic from 'next/dynamic';
+{{#if prefabName}} 
+import BasePartial from "@wavemaker/react-runtime/higherOrder/BasePartial";
+{{else}}
+import BasePartial from "@wavemaker/react-runtime/higherOrder/BasePage";
+{{/if}}
+{{#if (eq componentName "Common")}}
+import { useAppContext } from "@wavemaker/react-runtime/context/AppContext";
+{{/if}}
+import { useAppState,useProxy } from "@wavemaker/react-runtime/context/WidgetProvider";
+import { formatMessage,_get,toNumber} from '@wavemaker/react-runtime/core/util';
+{{#each eagerImports}}
+import {{name}} from '{{from}}';
+{{/each}}
+{{#each lazyImports}}
+const {{name}} = dynamic(() => import('{{from}}'), {
+  loading: () => <p>Loading...</p>,
+})
+{{/each}}
+import add{{typeLabel}}Script from './{{name}}.script';
+import "./{{name}}.css";
+import getVariables from './{{name}}.variables';
+
+const {{componentName}}Component = (props:any) => {
+  {{#if (eq componentName "Common")}}
+  const pageContext = useAppState();
+  const notification= useAppContext()?.notification;
+  const fragment = { ...pageContext, notification: notification };
+{{else}}
+  const fragment = useAppState();
+{{/if}}
+const stateProxy = useProxy()
+
+   useEffect(() => {
+   
+    if (props?.onRender) {
+      props?.onRender(stateProxy);
+    }
+     if(fragment?.executeStartup){
+      fragment?.executeStartup();
+    }
+  
+  }, []);
+
+  
+  return (
+    <React.Fragment>
+      {{{markup}}}
+    </React.Fragment>
+  );
+}
+
+const ComponentWithPage = BasePartial(
+  {{componentName}}Component,
+  add{{typeLabel}}Script,
+  getVariables,
+  {
+    componentName: "{{componentName}}",
+    startUpVariables: [{{#each startUpVariables}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    startUpActions: [{{#each startUpActions}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    autoUpdateVariables: [{{#each autoUpdateVariables}}'{{this}}'{{#unless @last}},{{/unless}}{{/each}}],
+    componentType:"{{type}}",
+    {{#if prefabName}}
+    isPartOfPrefab: true,
+    {{/if}}
+  }
+);
+
+export default React.memo((props: any) => {
+  return <ComponentWithPage {...props} {{#if prefabName}} prefabName="{{prefabName}}" {{/if}} />;
+});

package/templates/component/script.template

@@ -0,0 +1,6 @@
+import _ from "lodash-es";
+export default function addPageScript(App, {{typeLabel}}) {
+  //auto refresh functions
+  
+  {{{prependSpace script 2}}}
+}

package/templates/component/style-def.template

@@ -0,0 +1,18 @@
+@import url('{{basePath}}variables.less');
+{{#each styledefs}}
+
+
+{{#ifNotEmpty this.document this}}
+/**********************************************************************************
+{{this.document}}
+***********************************************************************************/
+{{/ifNotEmpty}}
+{{this.className}} {
+    {{#each style}}
+    {{@key}}: {{this}};
+    {{/each}}
+}
+{{/each}}
+
+@import (optional) url('{{basePath}}../custom/{{path}}');
+@import (optional) url('{{basePath}}../custom/os/{{path}}');

package/templates/component/style.template

@@ -0,0 +1 @@
+export default {{{styles}}};

package/templates/entity-provider.template

@@ -0,0 +1,21 @@
+{{#each liveSources}}
+import {{this}}Json from './{{this}}.json';
+{{/each}}
+
+const metadata = {
+{{#each liveSources}}
+ {{this}}: {{this}}Json,
+{{/each}}
+};
+
+export const getEntityPropertyMap = (liveSource, entityName) => {
+    return metadata[liveSource] &&
+    metadata[liveSource][entityName] &&
+    metadata[liveSource][entityName].propertiesMap;
+}
+
+export const getEntityRelatedTables = (liveSource, entityName) => {
+    return metadata[liveSource] &&
+    metadata[liveSource][entityName] &&
+    metadata[liveSource][entityName].relatedTables;
+}

package/templates/foundation/layout.tsx

@@ -0,0 +1,30 @@
+import { Metadata } from "next";
+import "./globals.css";
+import { ClientLayout } from "./client.layout";
+import getAppConfig from "@/libs/appConfig";
+import "./app.css";
+
+const configs = getAppConfig();
+
+export const metadata: Metadata = {
+  title: "Wavemaker App",
+  description: "An nextjs app generated by wavemaker studio",
+  icons: {
+    icon: `${configs.appConfig.basePath}favicon.png`,
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html>
+      <head></head>
+      <body className={`wm-app`} suppressHydrationWarning>
+        <ClientLayout configs={configs}>{children}</ClientLayout>
+      </body>
+    </html>
+  );
+}

package/templates/pages-config.template

@@ -0,0 +1,12 @@
+
+interface Config {
+  name: string;
+  type: string;
+  params: any[];
+  permission?: 'Role' | 'Authenticated' | 'PermitAll';
+  allowedRoles?: string[];
+}
+
+const configs:Config[] = {{{pageConfigsStr}}};
+
+export default configs;

package/templates/partial-config.template

@@ -0,0 +1,58 @@
+{{#if lazyload}}
+import { lazy} from 'react';
+{{else}}
+{{#each pageConfigs}}
+import {{name}}Component from "../components/{{name}}/{{name}}";
+{{/each}}
+{{/if}}
+
+
+interface Config {
+  name: string;
+  type: string;
+  params: any[];
+  component?: any;
+  componentName?: string;
+  permission?: 'Role' | 'Authenticated' | 'PermitAll';
+  allowedRoles?:string[];
+}
+
+interface Partial {
+  type: any;
+  name: string;
+}
+interface Components {
+  [key: string]: Partial;
+}
+
+
+ const components:Components = {
+    {{#each pageConfigs}}
+    '{{name}}': {
+        {{#if ../lazyload}}
+        type: lazy(() => import("../components/{{name}}/{{name}}")),
+        {{else}}
+        type: {{name}}Component,
+        {{/if}}
+        name: '{{name}}Component'
+    },
+    {{/each}}
+};
+
+
+// Configuration objects
+export const baseConfigs: Config[] = {{{pageConfigsStr}}}
+
+// Enhance configs with component information
+const configs = ()=> baseConfigs.map(config => {
+  const component = components[config.name];
+  return {
+    ...config,
+    component: component.type,
+    componentName: component.name,
+  };
+});
+
+
+export default configs();
+

package/templates/project/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_SERVER_PATH="<PUT SERVER PATH HERE>"

package/templates/project/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

package/templates/project/.npmrc

@@ -0,0 +1,5 @@
+# Default to public npm registry
+registry=https://registry.npmjs.org/
+
+# Use private registry for packages under the @wavemaker scope
+@wavemaker:registry=https://repository.wavemaker.com/repository/wavemaker-npm-repo/

package/templates/project/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": true
+}

package/templates/project/README.md

@@ -0,0 +1,60 @@
+# 🚀 Next.js Project
+
+## 📌 Available Commands
+
+This project uses **Next.js**, a powerful React framework for building modern web applications. Below are the key commands for running and building the project.
+
+---
+
+## 🛠 **Development Mode**
+
+```bash
+npm run dev
+```
+
+- Starts the development server.
+- Runs on **http://localhost:3000** by default.
+- Auto-reloads when files are changed.
+- Shows full error messages in the browser and terminal.
+
+---
+
+## 🏷 **Building for Production**
+
+```bash
+npm run build
+```
+
+- Compiles the Next.js application for production.
+- Optimizes JavaScript, CSS, and images.
+- Generates a `.next/` folder containing the production-ready files.
+
+---
+
+## 🚀 **Starting the Production Server**
+
+```bash
+npm run start
+```
+
+- Runs the built application in **production mode**.
+- Requires running `npm run build` first.
+- Uses **http://localhost:3000** by default.
+- Can be run on a different port using:
+  ```bash
+  PORT=4000 npm run start
+  ```
+
+### **📌 Summary Table**
+
+| Command         | Description                                |
+| --------------- | ------------------------------------------ | ----------------------------------------------- |
+| `npm run dev`   | Start development mode with live reloading |
+| `npm run build` | Create an optimized production build       |
+| `npm run start` | Serve the built app in production mode     | Go into standalone folder and run this command. |
+
+---
+
+### 🚀 Happy Coding!
+
+Let me know if you need any modifications. 🎯

package/templates/project/app/client.layout.tsx

@@ -0,0 +1,182 @@
+'use client';
+import { useRouter, usePathname } from 'next/navigation';
+import { Provider } from 'react-redux';
+import { store } from '@wavemaker/react-runtime/store';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { useAppDispatch } from '@wavemaker/react-runtime/store';
+import { WmSpinner } from '@wavemaker/react-runtime/components/basic/spinner';
+import { updateConfig } from '@wavemaker/react-runtime/store/slices/appConfigSlice';
+import { setRouter } from '@wavemaker/react-runtime/store/middleware/navigationMiddleware';
+import { useAuth } from '@wavemaker/react-runtime/hooks/useAuth';
+import {
+  loadWmProperties,
+  handle401,
+  setupAxiosInterceptors,
+} from '@wavemaker/react-runtime/core/app.service';
+import { ToastProvider } from '@wavemaker/react-runtime/actions/toast-provider';
+import { WmThemeProvider } from '@wavemaker/react-runtime/mui-config/theme-provider';
+import { loadLocaleBundle } from '@wavemaker/react-runtime/store/slices/i18nSlice';
+import LocalizationProvider from '@wavemaker/react-runtime/context/LocalizationProvider';
+import PageConfigs from '@/app/pages-config';
+import App from '@/app/_app';
+import { baseConfigs as PartialConfigs } from '@/app/components/partial-config';
+import { ROUTING_BASEPATH } from '@wavemaker/react-runtime/core/constants';
+interface RouterLike {
+  push: (path: string) => void;
+  replace: (path: string) => void;
+  back: () => void;
+  forward: () => void;
+}
+
+interface AppConfig {
+  [key: string]: any;
+  appVariables?: any;
+}
+
+interface ClientLayoutProps {
+  children: React.ReactNode;
+  configs: AppConfig;
+}
+
+const ReduxProvider = ({ children }: { children: React.ReactNode }) => {
+  const _store = useMemo(() => store, []);
+  const router = useRouter();
+
+  useEffect(() => {
+    setupAxiosInterceptors();
+
+    const routerAdapter: RouterLike = {
+      push: (path: string) => router.push(path),
+      replace: (path: string) => router.replace(path),
+      back: () => router.back(),
+      forward: () => router.forward(),
+    };
+    setRouter(routerAdapter);
+  }, []);
+
+  return <Provider store={_store}>{children}</Provider>;
+};
+
+const SecurityInitializer = ({
+  children,
+  baseURL,
+}: {
+  children: React.ReactNode;
+  baseURL: string;
+}) => {
+  const dispatch = useAppDispatch();
+  const { getLoggedInUserDetails = () => {}, isPageLoading = false } =
+    useAuth() || {};
+  const router = useRouter();
+  const info = store.getState()?.info;
+  const homePage = info?.appConfig?.appProperties?.homePage || 'Main';
+  const pathname = usePathname();
+
+  useEffect(() => {
+    // Only redirect if we're at the root path
+    if (
+      pathname === '/' ||
+      pathname === '' ||
+      pathname === `/${ROUTING_BASEPATH}`
+    ) {
+      router.replace(`/${ROUTING_BASEPATH}/${homePage}`);
+    }
+  }, []);
+
+  useEffect(() => {
+    const initSecurity = async () => {
+      try {
+        await getLoggedInUserDetails(baseURL);
+      } catch (error) {
+        console.error('Failed to initialize security:', error);
+      }
+    };
+
+    initSecurity();
+  }, [baseURL, dispatch]);
+
+  if (isPageLoading) {
+    return <WmSpinner name="security-page-loader" caption="" listener={{}} />;
+  }
+
+  return children;
+};
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  fallbackUrl?: string;
+}
+
+const AppConfigWrapper = ({
+  children,
+  configs,
+}: {
+  children: React.ReactNode;
+  configs: AppConfig;
+}) => {
+  const dispatch = useAppDispatch();
+  const initialConfig = {
+    ...configs,
+    appConfig: {
+      ...configs.appConfig,
+    },
+  };
+  const [isConfigLoading, setIsConfigLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadAllConfigurations() {
+      try {
+        const appProperties = await loadWmProperties(
+          initialConfig.appConfig.url
+        );
+        dispatch(
+          updateConfig({
+            ...initialConfig,
+            appConfig: {
+              ...initialConfig.appConfig,
+              appProperties,
+              pages: PageConfigs,
+              partials: PartialConfigs,
+            },
+            appVariables: {},
+          })
+        );
+
+        await store.dispatch(loadLocaleBundle()).unwrap();
+      } catch (error) {
+        console.error('Failed to load configurations:', error);
+      } finally {
+        setIsConfigLoading(false);
+      }
+    }
+
+    loadAllConfigurations();
+  }, []);
+
+  if (isConfigLoading) {
+    return <WmSpinner name="page" caption="" listener={{}} />;
+  }
+
+  return <>{children}</>;
+};
+
+export const ClientLayout = ({ children, configs }: ClientLayoutProps) => {
+  return (
+    <>
+      <base href={configs.appConfig.basePath} />
+      <ReduxProvider>
+        <LocalizationProvider>
+          <WmThemeProvider>
+            <ToastProvider>
+              <AppConfigWrapper configs={configs}>
+                <SecurityInitializer baseURL={configs.appConfig.url}>
+                  <App>{children}</App>
+                </SecurityInitializer>
+              </AppConfigWrapper>
+            </ToastProvider>
+          </WmThemeProvider>
+        </LocalizationProvider>
+      </ReduxProvider>
+    </>
+  );
+};