@wavemaker/react-codegen 11.14.1-rc.236

package/templates/project/app/components.css

@@ -0,0 +1,121 @@
+/* chips widget css */
+.app-chip:hover {
+  background-color: var(--wm-chip-item-background-selected) !important;
+}
+
+.app-chip:not(.active):hover {
+  background-color: transparent !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 .app-wizard-step .active,
+.app-wizard .app-wizard-step .completed {
+  --wm-wizard-step-indicator-background: var(
+    --wm-wizard-step-indicator-background-active
+  ) !important;
+  --wm-wizard-step-indicator-border-color: var(
+    --wm-wizard-step-indicator-background-active
+  ) !important;
+  --wm-wizard-step-count-color: var(
+    --wm-wizard-step-count-color-active
+  ) !important;
+  --wm-wizard-step-icon-color: var(
+    --wm-wizard-step-icon-color-active
+  ) !important;
+}
+.app-wizard .MuiStepConnector-root {
+  display: none;
+}
+
+.app-wizard .has-dotted-stepper {
+  background: none !important;
+  --wm-wizard-step-indicator-background: 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);
+  white-space: nowrap;
+}
+.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;
+  gap: var(--wm-wizard-step-gap) !important;
+  min-width: fit-content !important;
+  color: var(--wm-wizard-step-title-color) !important;
+}
+
+.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;
+}

package/templates/project/app/error.tsx

@@ -0,0 +1,27 @@
+'use client'; // Error boundaries must be Client Components
+
+import getAppConfig from '@/libs/appConfig';
+import ErrorFallback from '@wavemaker/react-runtime/components/page/error-boundary';
+
+const basePath = getAppConfig()?.appConfig?.basePath;
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorFallback
+      error={{
+        message: 'Something went wrong!',
+        stack: 'Something went wrong!',
+      }}
+      imageSource={`${basePath}error-fallback.svg`}
+      reset={reset}
+      title="Something went wrong!"
+      subtitle="Don't worry, you can try again or go back to the home page."
+    />
+  );
+}

package/templates/project/app/globals.css

@@ -0,0 +1,105 @@
+@import '@wavemaker/app-runtime-wm-build/wmapp/styles/css/wm-style.css';
+@import './components.css';
+
+.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  */

package/templates/project/app/layout.tsx

@@ -0,0 +1,40 @@
+import { Metadata } from 'next';
+import './globals.css';
+import { ClientLayout } from './client.layout';
+import themes from 'public/themes/themes-config.json';
+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>
+        <link
+          rel="stylesheet"
+          href={`${configs.appConfig.basePath}themes/${themes.activeTheme}/style.css`}
+          precedence="default"
+        />
+      </head>
+      <body
+        className={`wm-app wm-theme-${themes.activeTheme}`}
+        suppressHydrationWarning
+      >
+        <ClientLayout configs={configs}>{children}</ClientLayout>
+      </body>
+    </html>
+  );
+}

package/templates/project/app/loading.tsx

@@ -0,0 +1,6 @@
+'use client';
+import WmAppSpinner from '@wavemaker/react-runtime/components/common/app-spinner';
+
+export default function Loading() {
+  return <WmAppSpinner />;
+}

package/templates/project/app/page.tsx

@@ -0,0 +1,3 @@
+export default async function Home() {
+  return <main className=""></main>;
+}

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;