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

package/templates/project/app/widgetInlineStylesOverride.css

@@ -111,6 +111,11 @@
   .wm-sortable-item.wm-cursor-grab {
   cursor: grab;
 }
+.wm-app .app-livelist .app-livelist-container.clearfix {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
 
 /* --------------------------------------------------------------------------
    Wm-anchor component — inline styles for legacy support
@@ -674,3 +679,349 @@
 .wm-number-helper-text.wm-number-helper-text-error {
   color: #ee5f5b;
 }
+
+/* WmRating only: single-class hooks (not the default pattern for other widgets — see wm-csp-widget-styles Rule 6) */
+.wm-rating-star {
+  transition: all 0.2s ease-in-out;
+  font-size: var(--wm-rating-star-font-size, inherit);
+  color: var(--wm-rating-star-color, #ccc);
+  border: 1px solid var(--wm-rating-star-border-color, transparent);
+}
+
+.wm-rating-star-icon {
+  color: inherit;
+}
+
+.wm-rating-star.wm-rating-star-readonly {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* WmSelect inline styles */
+.wm-app .app-select optgroup {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* WmSlider inline styles */
+.wm-app .app-slider.slider .slider-container .slider-control.wm-slider-control {
+  --end: var(--wm-slider-end);
+}
+
+.wm-app
+  .app-slider.slider
+  .marker-container
+  .marker-wrapper.wm-slider-marker-wrapper {
+  left: var(--wm-slider-marker-left);
+}
+
+/* WmText: former TextField static sx (kept low-specificity like sx output) */
+.wm-text-input:disabled {
+  -webkit-text-fill-color: inherit;
+}
+
+.wm-text-helper-text {
+  margin-left: 0;
+}
+
+.wm-text-helper-text.wm-text-helper-text-error {
+  color: #ee5f5b;
+}
+
+/* WmTextarea: former TextField static sx */
+.wm-textarea-root {
+  width: 100%;
+}
+
+.wm-textarea-input {
+  height: var(--wm-textarea-height, auto) !important;
+}
+
+/* WmUpload inline styles */
+.wm-upload-existing-image {
+  height: 2em;
+}
+
+/* WmTime: former TimePicker popper sx */
+.wm-timepicker-popper .MuiPaper-root {
+  background: var(--wm-timepicker-background);
+  padding: var(--wm-timepicker-padding);
+  border-radius: var(--wm-timepicker-border-radius);
+  width: auto;
+  box-shadow: none;
+}
+
+.wm-timepicker-popper .Mui-selected,
+.wm-timepicker-popper .Mui-selected:hover {
+  background-color: var(--wm-btn-secondary-background) !important;
+  color: var(--wm-btn-secondary-color) !important;
+}
+
+/* WmDate DatePickerPopover — chained hooks for popover/calendar (dynamic width via --wm-datepicker-calendar-width on root) */
+.wm-datepicker-popover .MuiPopover-paper {
+  box-shadow:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+
+.wm-app .app-date.wm-datepicker-popover .MuiDateCalendar-root {
+  width: var(--wm-datepicker-calendar-width);
+}
+
+.wm-app .app-date.wm-datepicker-popover .wm-datepicker-popover-paper {
+  width: auto;
+  padding-bottom: 2px;
+  background: var(--wm-datepicker-background);
+}
+
+.wm-app .app-date.wm-datepicker-popover .wm-datepicker-button-bar {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 2px;
+  padding-right: 2px;
+  margin-top: 1px;
+}
+
+.wm-app .app-date.wm-datepicker-popover .wm-datepicker-bar-btn {
+  --wm-btn-color: var(--wm-color-primary);
+  --wm-btn-state-layer-color: var(--wm-color-primary);
+  background: none;
+  border: none;
+}
+
+/* WmDateTime — former styled.ts (single-class roots; calendar width stays sx on popper) */
+.wm-datetime-html-input {
+  box-sizing: inherit !important;
+}
+
+.wm-datetime-picker-textfield-hidden {
+  display: none !important;
+}
+
+.wm-datetime-input-label {
+  background-color: white;
+}
+
+.wm-datetime-input-label.MuiInputLabel-shrink {
+  transform: translate(14px, -9px) scale(0.75);
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.wm-datetime-input-label:not(.MuiInputLabel-shrink) {
+  transform: translate(14px, 16px) scale(1);
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.wm-datetime-date-picker-popper .MuiPaper-root {
+  background: var(--wm-datepicker-background);
+  padding: var(--wm-datepicker-padding);
+  border-radius: var(--wm-datepicker-border-radius);
+}
+
+.wm-datetime-date-picker-popper .MuiDateCalendar-root {
+  width: var(--wm-datetime-calendar-width, 370px);
+}
+
+.wm-datetime-date-picker-popper .MuiDayCalendar-header {
+  justify-content: space-evenly;
+}
+
+.wm-datetime-date-picker-popper .MuiDayCalendar-weekNumber {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.wm-datetime-date-picker-popper .MuiDayCalendar-slideTransition {
+  min-height: 260px;
+}
+
+.wm-datetime-date-picker-popper .MuiDayCalendar-weekNumberLabel {
+  width: 32px !important;
+  padding: 0 !important;
+}
+
+.wm-datetime-date-picker-popper .MuiTypography-caption {
+  padding: 0 24px;
+}
+
+.wm-datetime-date-picker-popper .MuiYearCalendar-root {
+  width: auto;
+}
+
+.wm-datetime-date-picker-popper .MuiPickersDay-root.Mui-selected {
+  background-color: var(--wm-btn-secondary-background) !important;
+  color: var(--wm-btn-secondary-color);
+  font-weight: bold;
+}
+
+.wm-datetime-date-picker-popper .MuiMonthCalendar-button.Mui-selected {
+  background-color: var(--wm-btn-secondary-background) !important;
+  color: var(--wm-btn-secondary-color);
+  font-weight: bold;
+}
+
+.wm-datetime-date-picker-popper .MuiPickersDay-root.Mui-selected:hover {
+  background-color: var(--wm-btn-secondary-background);
+  color: var(--wm-btn-secondary-color);
+}
+
+.wm-datetime-date-picker-popper .MuiYearCalendar-button.Mui-selected {
+  background-color: var(--wm-btn-secondary-background) !important;
+  color: var(--wm-btn-secondary-color);
+  font-weight: bold;
+}
+
+.wm-datetime-date-picker-popper .MuiPickersDay-today {
+  background-color: transparent !important;
+}
+
+.wm-datetime-time-picker-popper .MuiPickersLayout-root {
+  display: inline-block;
+}
+
+.wm-datetime-time-picker-popper .MuiPaper-root {
+  background: var(--wm-timepicker-background);
+  padding: var(--wm-timepicker-padding);
+  border-radius: var(--wm-timepicker-border-radius);
+}
+
+.wm-datetime-time-picker-popper .Mui-selected,
+.wm-datetime-time-picker-popper .Mui-selected:hover {
+  background-color: var(--wm-btn-secondary-background) !important;
+  color: var(--wm-btn-secondary-color) !important;
+}
+
+.wm-datetime-datepicker-action-bar .MuiButton-root {
+  --wm-btn-color: var(--wm-color-primary);
+  --wm-btn-state-layer-color: var(--wm-color-primary);
+  background: none;
+  border: none;
+}
+
+/* WmAccordionPane — former inline flex on title row (styles/static extraction → scoped chain; not sx) */
+.wm-app .app-accordion-panel.panel .wm-accordion-pane-title-main {
+  flex: 1;
+}
+
+/* --------------------------------------------------------------------------
+   Layout grid — root min-width (static; designer styles still merge via inline)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-grid-layout.clearfix.wm-layout-grid-root {
+  min-width: 100%;
+}
+
+/* --------------------------------------------------------------------------
+   Panel — header image icon (defaults; optional --wm-panel-icon-* from runtime)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-panel.panel .wm-panel-header-icon-img {
+  width: var(--wm-panel-icon-width);
+  height: var(--wm-panel-icon-height);
+  margin: var(--wm-panel-icon-margin);
+}
+
+/* --------------------------------------------------------------------------
+   Tabs + TabPane — extracted from inline styles (static + state classes)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-tabs.clearfix .wm-tabs-heading {
+  cursor: pointer;
+  gap: var(--wm-anchor-gap);
+}
+
+.wm-app .app-tabs.clearfix .wm-tabs-heading.wm-tabs-heading-disabled {
+  cursor: not-allowed;
+}
+
+.wm-app
+  .app-tabs.clearfix
+  .tab-content.wm-tabs-content.wm-tabs-content-vertical {
+  flex: 1;
+  min-width: 0;
+}
+
+.wm-app .app-tabs.clearfix .tab-pane.wm-tab-pane-root {
+  width: 100%;
+}
+
+.wm-app .app-tabs.clearfix .tab-pane.wm-tab-pane-root.wm-tab-pane-active {
+  display: block;
+}
+
+.wm-app .app-tabs.clearfix .tab-pane.wm-tab-pane-root.wm-tab-pane-inactive {
+  display: none;
+}
+
+/* --------------------------------------------------------------------------
+   App-Spinner — root for list (defaults; optional --wm-spinner-* from runtime)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-spinner.wm-spinner-root {
+  z-index: 100;
+}
+
+/* --------------------------------------------------------------------------
+   WmCard — static presentation (dynamic: Card width/height; CardMedia maxHeight)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-card.card .app-card-avatar .wm-card-avatar-img {
+  border-radius: 50%;
+}
+
+.wm-app .app-card.card .app-card-image.wm-card-media-root {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.wm-app
+  .app-card.card
+  .app-card-image.wm-card-media-root
+  .card-image.wm-card-media-img {
+  width: 100%;
+  height: 100%;
+}
+
+.wm-app .app-card-content.wm-card-content-root {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.wm-app .app-card-content.wm-card-content-root:last-child {
+  padding-bottom: 0;
+}
+
+/* * --------------------------------------------------------------------------
+   WmCard — static presentation (dynamic: Card width/height; CardMedia maxHeight)
+   -------------------------------------------------------------------------- */
+
+.wm-app .app-card.card .app-card-avatar .wm-card-avatar-img {
+  border-radius: 50%;
+}
+
+.wm-app .app-card.card .app-card-image.wm-card-media-root {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.wm-app
+  .app-card.card
+  .app-card-image.wm-card-media-root
+  .card-image.wm-card-media-img {
+  width: 100%;
+  height: 100%;
+}
+
+.wm-app .app-card-content.wm-card-content-root {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.wm-app .app-card-content.wm-card-content-root:last-child {
+  padding-bottom: 0;
+}

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/package.json

@@ -6,6 +6,9 @@
     "wmx-components/*"
   ],
   "packageManager": "npm@10.9.2",
+  "engines": {
+    "node": "22.18.0"
+  },
   "scripts": {
     "dev": "next dev --turbo",
     "local-build": "node scripts/getlibs.js && next dev",
@@ -19,9 +22,10 @@
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "@wavemaker-ai/app-runtime-wm-build": "1.0.0-rc.647469",
-    "@wavemaker-ai/react-runtime": "1.0.0-rc.647469",
-    "@wavemaker-ai/variables": "1.0.0-rc.647469",
+    "@wavemaker-ai/app-runtime-wm-build": "1.0.0-rc.647502",
+    "@wavemaker-ai/react-codegen": "1.0.0-rc.647502",
+    "@wavemaker-ai/react-runtime": "1.0.0-rc.647502",
+    "@wavemaker-ai/variables": "1.0.0-rc.647502",
     "dotenv": "16.5.0",
     "core-js": "3.46.0"
   },
@@ -35,4 +39,3 @@
     "vite": "7.3.1"
   }
 }
-