npm - @wavemaker-ai/react-codegen - Versions diffs - 1.0.0-rc.309 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (386) hide show

package/templates/foundation/layout.tsx ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/.DS_Store ADDED Viewed

Binary file

package/templates/project/.env ADDED Viewed

	@@ -0,0 +1 @@
1	+ NEXT_PUBLIC_SERVER_PATH=

package/templates/project/.gitignore ADDED Viewed

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

package/templates/project/.prettierrc ADDED Viewed

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

package/templates/project/README.md ADDED Viewed

@@ -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/autoLayout.css ADDED Viewed

@@ -0,0 +1,133 @@
+/*
+ * Auto Layout — Predefined Static CSS Utility Classes
+/* ── Flex Container ── */
+.d-flex {
+  display: flex !important;
+}
+.fd-row {
+  flex-direction: row !important;
+}
+.fd-column {
+  flex-direction: column !important;
+}
+.fw-nowrap {
+  flex-wrap: nowrap !important;
+}
+.fw-wrap {
+  flex-wrap: wrap !important;
+}
+/* ── Flex Alignment ── */
+.jc-flex-start {
+  justify-content: flex-start !important;
+}
+.jc-center {
+  justify-content: center !important;
+}
+.jc-flex-end {
+  justify-content: flex-end !important;
+}
+.jc-space-between {
+  justify-content: space-between !important;
+}
+.ai-flex-start {
+  align-items: flex-start !important;
+}
+.ai-center {
+  align-items: center !important;
+}
+.ai-flex-end {
+  align-items: flex-end !important;
+}
+.ai-stretch {
+  align-items: stretch !important;
+}
+.ac-flex-start {
+  align-content: flex-start !important;
+}
+.ac-center {
+  align-content: center !important;
+}
+.ac-flex-end {
+  align-content: flex-end !important;
+}
+.ac-space-between {
+  align-content: space-between !important;
+}
+/* ── Flex Item Sizing ── */
+.fs-0 {
+  flex-shrink: 0 !important;
+}
+.fg-1 {
+  flex-grow: 1 !important;
+}
+.as-stretch {
+  align-self: stretch !important;
+}
+/* ── Overflow (applied only when clipcontent is true) ── */
+.ov-hidden {
+  overflow: hidden !important;
+}
+.ov-scroll {
+  overflow: scroll !important;
+}
+.ovx-scroll {
+  overflow-x: scroll !important;
+}
+.ovx-hidden {
+  overflow-x: hidden !important;
+}
+.ovy-scroll {
+  overflow-y: scroll !important;
+}
+.ovy-hidden {
+  overflow-y: hidden !important;
+}
+/* ── Position ── */
+.pos-relative {
+  position: relative !important;
+}
+.pos-absolute {
+  position: absolute !important;
+}
+.pos-sticky {
+  position: sticky !important;
+}
+.pos-fixed {
+  position: fixed !important;
+}
+/* ── Dynamic CSS rules generated by codegen are appended below at build time ── */

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

@@ -0,0 +1,193 @@
+'use client';
+import { useRouter, usePathname } from 'next/navigation';
+import { Provider } from 'react-redux';
+import { store } from '@wavemaker-ai/react-runtime/store';
+import { ReactNode, useEffect, useMemo, useState, useTransition } from 'react';
+import { useAppDispatch } from '@wavemaker-ai/react-runtime/store';
+import WmAppSpinner from '@wavemaker-ai/react-runtime/components/common/app-spinner';
+import { updateConfig } from '@wavemaker-ai/react-runtime/store/slices/appConfigSlice';
+import { setRouter } from '@wavemaker-ai/react-runtime/store/middleware/navigationMiddleware';
+import { useAuth } from '@wavemaker-ai/react-runtime/hooks/useAuth';
+import {
+  loadWmProperties,
+  handle401,
+  setupAxiosInterceptors,
+} from '@wavemaker-ai/react-runtime/core/app.service';
+import { ToastProvider } from '@wavemaker-ai/react-runtime/actions/toast-provider';
+import { WmThemeProvider } from '@wavemaker-ai/react-runtime/mui-config/theme-provider';
+import { loadLocaleBundle } from '@wavemaker-ai/react-runtime/store/slices/i18nSlice';
+import LocalizationProvider from '@wavemaker-ai/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_PRODUCTION } from '@wavemaker-ai/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();
+  const [isNavigating, startTransition] = useTransition();
+  useEffect(() => {
+    setupAxiosInterceptors();
+    const routerAdapter: RouterLike = {
+      push: (path: string) => {
+        startTransition(() => {
+          router.push(path);
+        });
+      },
+      replace: (path: string) => router.replace(path),
+      back: () => router.back(),
+      forward: () => router.forward(),
+    };
+    setRouter(routerAdapter);
+  }, []);
+  return (
+    <Provider store={_store}>
+      <WmAppSpinner name="navigation-loader" show={isNavigating} />
+      {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_PRODUCTION}`
+    ) {
+      router.replace(`/${ROUTING_BASEPATH_PRODUCTION}/${homePage}`);
+    }
+  }, []);
+  useEffect(() => {
+    const initSecurity = async () => {
+      try {
+        await getLoggedInUserDetails(baseURL);
+      } catch (error) {
+        console.error('Failed to initialize security:', error);
+      }
+    };
+    initSecurity();
+  }, [baseURL, dispatch]);
+  return (
+    <>
+      <WmAppSpinner name="security-page-loader" show={isPageLoading} />
+      {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 <WmAppSpinner name="page" />;
+  }
+  return <>{children}</>;
+};
+export const ClientLayout = ({ children, configs }: ClientLayoutProps) => {
+  return (
+    <div className="wm-app-root" id="app-root">
+      <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>
+    </div>
+  );
+};

package/templates/project/app/components.css ADDED Viewed

@@ -0,0 +1,182 @@
+/* chips widget css */
+.app-chip:hover {
+  background-color: var(--wm-chips-background) !important;
+}
+.app-chip .MuiChip-deleteIcon {
+  padding: 0 !important;
+  font-size: var(--wm-btn-icon-size) !important;
+  min-width: var(--wm-btn-icon-size) !important;
+  width: var(--wm-btn-icon-size) !important;
+  height: var(--wm-btn-icon-size) !important;
+  margin: 0 !important;
+  color: inherit !important;
+}
+/* wizard widget css */
+.app-wizard .wizard-step-icon {
+  display: inline-flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  min-width: var(--wm-wizard-step-indicator-size) !important;
+  width: var(--wm-wizard-step-indicator-size) !important;
+  height: var(--wm-wizard-step-indicator-size) !important;
+  background: var(--wm-wizard-step-indicator-background);
+  border: var(--wm-wizard-step-indicator-border-width)
+    var(--wm-wizard-step-indicator-border-style)
+    var(--wm-wizard-step-indicator-border-color) !important;
+  border-radius: var(--wm-wizard-step-indicator-radius) !important;
+}
+.app-wizard .wizard-step-icon .count {
+  color: var(--wm-wizard-step-count-color) !important;
+  font-size: var(--wm-wizard-step-count-font-size) !important;
+  font-weight: var(--wm-wizard-step-count-font-weight) !important;
+  font-family: var(--wm-wizard-step-count-font-family) !important;
+  line-height: var(--wm-wizard-step-count-line-height) !important;
+  letter-spacing: var(--wm-wizard-step-count-letter-spacing) !important;
+}
+.app-wizard .title-wrapper .step-title {
+  color: var(--wm-wizard-step-title-color) !important;
+  font-family: var(--wm-wizard-step-title-font-family) !important;
+  font-weight: var(--wm-wizard-step-title-font-weight) !important;
+  font-size: var(--wm-wizard-step-title-font-size) !important;
+  line-height: var(--wm-wizard-step-title-line-height) !important;
+  letter-spacing: var(--wm-wizard-step-title-letter-spacing) !important;
+}
+.app-wizard .MuiStepConnector-root {
+  display: none;
+}
+.app-wizard .app-wizard-step .MuiStepLabel-label {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: var(--wm-wizard-step-gap);
+  min-width: fit-content;
+  color: var(--wm-wizard-step-title-color);
+}
+.app-wizard .MuiStepLabel-label {
+  display: table-cell !important;
+  width: 50% !important;
+}
+.app-wizard .MuiStepLabel-root.MuiStepLabel-horizontal {
+  display: table-cell !important;
+  width: 50% !important;
+}
+.wm-app
+  .app-wizard
+  .app-wizard-heading
+  .app-wizard-steps
+  > .app-wizard-step
+  .MuiStepLabel-horizontal {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  justify-content: flex-start !important;
+  min-width: fit-content !important;
+  color: var(--wm-wizard-step-title-color) !important;
+}
+.wm-app .app-wizard .app-wizard-step {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.wm-app .MuiStepLabel-horizontal .MuiStepLabel-horizontal {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  color: var(--wm-anchor-color) !important;
+  font-size: var(--wm-anchor-font-size) !important;
+  font-family: var(--wm-anchor-font-family) !important;
+  font-weight: var(--wm-anchor-font-weight) !important;
+  line-height: var(--wm-anchor-line-height) !important;
+  letter-spacing: var(--wm-anchor-letter-spacing) !important;
+  text-transform: var(--wm-anchor-text-transform) !important;
+  text-decoration: var(--wm-anchor-text-decoration) !important;
+  gap: var(--wm-anchor-gap) !important;
+  cursor: pointer !important;
+}
+/* baseprefab spinner postion  */
+.wm-app .app-spinner.baseprefab-spinner {
+  background: transparent !important;
+  position: relative !important;
+}
+.wm-app
+  .app-date
+  .input-group-btn
+  .btn-defaul
+  .custom-disabled-btn
+  .Mui-disabled {
+  pointer-events: auto !important; /* allow cursor to show */
+  cursor: not-allowed !important;
+}
+/* text area  readonly issue fix when readonly and disabled are false adding  .wm-textarea-editable class*/
+.wm-app .app-input-wrapper textarea.app-textarea.wm-textarea-editable {
+  pointer-events: auto !important;
+}
+/* date widget css Overriding */
+.wm-app .app-date button {
+  border-width: 0;
+  color: initial;
+}
+.wm-app .app-date:not(.Mui-selected) button.MuiPickersDay-root:hover::before,
+.wm-app .app-date button.MuiYearCalendar-button:hover::before,
+.wm-app .app-date button.MuiMonthCalendar-button:hover::before {
+  --wm-btn-state-layer-opacity: 0.5;
+}
+.wm-app .app-date button.Mui-selected:hover::before,
+.wm-app .app-date button.Mui-selected:focus::before {
+  background: none;
+}
+.wm-app .app-date button.Mui-selected {
+  --wm-datepicker-date-color: var(--wm-color-surface) !important;
+  --wm-datepicker-date-background: var(--wm-color-primary) !important;
+  --wm-datepicker-date-border-color: var(--wm-color-primary) !important;
+  background: var(--wm-datepicker-date-background) !important ;
+  color: var(--wm-datepicker-date-color) !important;
+}
+.wm-app .app-date button.Mui-disabled {
+  opacity: 0.38;
+  cursor: var(--wm-btn-cursor-disabled);
+}
+.wm-app .app-date .MuiPickersArrowSwitcher-root {
+  display: flex;
+  gap: 12px;
+}
+.wm-app .app-date .MuiDayCalendar-weekContainer button {
+  width: 48px;
+  height: 40px;
+}
+.MuiPickersDay-dayOutsideMonth {
+  color: var(--wm-datepicker-date-other-month-color);
+}
+.wm-app .app-date button.today-btn:hover::before,
+.wm-app .app-date button.clear-btn:hover::before {
+  --wm-btn-state-layer-opacity: 0.5;
+  background-color: unset;
+}
+/* input component override css for start and end icons in input field */
+.wm-app .app-input-wrapper .MuiInputAdornment-root {
+  position: unset;
+  margin-right: unset;
+  margin-left: unset;
+}
+/* select widget inside the table ui issue. */
+.wm-app .table td.app-datagrid-cell {
+  line-height: unset;
+}
+.wm-app .app-select-wrapper .wm-native-select-root {
+  display: unset !important;
+}