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

package/templates/project/app/components.css

@@ -0,0 +1,186 @@
+/* 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 .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;
+}

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-ai/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,157 @@
+@import '@wavemaker-ai/app-runtime-wm-build/wmapp/styles/css/wm-style.css';
+@import './components.css';
+@import './autoLayout.css';
+@import './widgetInlineStylesOverride.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  */
+
+/* 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/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-ai/react-runtime/components/common/app-spinner';
+
+export default function Loading() {
+  return <WmAppSpinner show={true} />;
+}

package/templates/project/app/page.tsx

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