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

package/src/templates/plugin-provider.template

@@ -0,0 +1,135 @@
+import React from "react";
+{{#if expoCameraPlugin}}
+import { CameraPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/camera-service";
+import { cameraPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if scanPlugin}}
+import { ScanPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/scan-service";
+import { scanPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if locationPlugin}}
+import { LocationPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/location-service";
+import { locationPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if contactsPlugin}}
+import { ContactsPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/contacts-service";
+import { contactsPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if calendarPlugin}}
+import { CalendarPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/calendar-service";
+import { calendarPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if fileUploadPlugin}}
+import { FileUploadPluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/fileupload-service";
+import { fileUploadPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if audioPlugin}}
+import { AudioProvider } from "@wavemaker-ai/app-rn-runtime/core/device/av-service";
+import { audioPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if videoPlugin}}
+import { VideoProvider } from "@wavemaker-ai/app-rn-runtime/core/device/av-service";
+import { videoPluginService } from "./device-plugin-service";
+{{/if}}
+{{#if openFilePlugin}}
+import { OpenFilePluginProvider } from "@wavemaker-ai/app-rn-runtime/core/device/openfile-service";
+import { openFilePluginService } from "./device-plugin-service";
+{{/if}}
+
+
+class PluginProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        {{#if expoCameraPlugin}}
+        this.cameraPluginService = cameraPluginService;
+        {{/if}}
+        {{#if scanPlugin}}
+        this.scanPluginService = scanPluginService;
+        {{/if}}
+        {{#if locationPlugin}}
+        this.locationPluginService = locationPluginService;
+        {{/if}}
+        {{#if contactsPlugin}}
+        this.contactsPluginService = contactsPluginService;
+        {{/if}}
+        {{#if calendarPlugin}}
+        this.calendarPluginService = calendarPluginService;
+        {{/if}}
+        {{#if fileUploadPlugin}}
+        this.fileUploadPluginService = fileUploadPluginService;
+        {{/if}}
+        {{#if audioPlugin}}
+        this.audioPluginService = audioPluginService;
+        {{/if}}
+        {{#if videoPlugin}}
+        this.videoPluginService = videoPluginService;
+        {{/if}}
+        {{#if openFilePlugin}}
+        this.openFilePluginService = openFilePluginService;
+        {{/if}}
+    }
+
+    render() {
+        return (
+            <>
+                {{#if expoCameraPlugin}}
+                <CameraPluginProvider value={this.cameraPluginService}>
+                {{/if}}
+                {{#if scanPlugin}}
+                <ScanPluginProvider value={this.scanPluginService}>
+                {{/if}}
+                {{#if locationPlugin}}
+                <LocationPluginProvider value={this.locationPluginService}>
+                {{/if}}
+                {{#if contactsPlugin}}
+                <ContactsPluginProvider value={this.contactsPluginService}>
+                {{/if}}
+                {{#if calendarPlugin}}
+                <CalendarPluginProvider value={this.calendarPluginService}>
+                {{/if}}
+                {{#if fileUploadPlugin}}
+                <FileUploadPluginProvider value={this.fileUploadPluginService}>
+                {{/if}}
+                {{#if audioPlugin}}
+                <AudioProvider value={this.audioPluginService}>
+                {{/if}}
+                {{#if videoPlugin}}
+                <VideoProvider value={this.videoPluginService}>
+                {{/if}}
+                {{#if openFilePlugin}}
+                <OpenFilePluginProvider value={this.openFilePluginService}>
+                {{/if}}
+                {this.props.children}
+                {{#if openFilePlugin}}
+                </OpenFilePluginProvider>
+                {{/if}}
+                {{#if videoPlugin}}
+                </VideoProvider>
+                {{/if}}
+                {{#if audioPlugin}}
+                </AudioProvider>
+                {{/if}}
+                {{#if fileUploadPlugin}}
+                </FileUploadPluginProvider>
+                {{/if}}
+                {{#if calendarPlugin}}
+                </CalendarPluginProvider>
+                {{/if}}
+                {{#if contactsPlugin}}
+                </ContactsPluginProvider>
+                {{/if}}
+                {{#if locationPlugin}}
+                </LocationPluginProvider>
+                {{/if}}
+                {{#if scanPlugin}}
+                </ScanPluginProvider>
+                {{/if}}
+                {{#if expoCameraPlugin}}
+                </CameraPluginProvider>
+                {{/if}}
+            </>
+        )
+    }
+}
+
+export default PluginProvider;

package/src/templates/project/.prettierrc

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

package/src/templates/project/app.json

@@ -0,0 +1,67 @@
+{
+  "expo": {
+    "androidStatusBar": {
+      "backgroundColor": "#000000",
+      "translucent": false,
+      "barStyle": "dark-content"
+    },
+    "name": "wm-react-native-app",
+    "slug": "wm-react-native-app",
+    "scheme": "wm-react-native-app",
+    "version": "1.0.0",
+    "jsEngine": "hermes",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "cover"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "backgroundColor": "#007bff",
+      "supportsTablet": true
+    },
+    "android": {
+      "softwareKeyboardLayoutMode": "pan",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "supportsRTL": true
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "enableProguardInReleaseBuilds": true,
+            "enableShrinkResourcesInReleaseBuilds": true,
+            "useLegacyPackaging": true,
+            "extraProguardRules": "-keep class com.facebook.react.views.view.WindowUtilKt { *; }"
+          }
+        }
+      ],
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/icon.png",
+          "dark": {
+            "image": "./assets/icon.png"
+          },
+          "imageWidth": 200
+        }
+      ]
+    ],
+    "newArchEnabled": true
+  }
+}

package/src/templates/project/applyAutoLayout.styles.js

@@ -0,0 +1,101 @@
+import BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';
+
+const AUTO_LAYOUT_OVERRIDES = {
+    'app-label': {
+        root: {
+            alignSelf: 'auto'
+        }
+    },
+    'app-composite': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-wizard': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-panel': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-carousel': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-search': {
+        rootWrapper: {
+            width: '100%',
+            flexShrink: 1,
+            minWidth: 0,
+        }
+    },
+    'app-list': {
+        root: {
+            width: '100%',
+            flexShrink: 1,
+            minWidth: 0,
+        }
+    },
+    'app-list-template': {
+        root: {
+            width: '100%',
+            flexShrink: 1,
+            minWidth: 0,
+        }
+    },
+    'app-form': {
+        root: {
+            width: '100%',
+        }
+    },
+    'app-area-chart': {
+        root: {
+            width: '100%',
+        }
+    },
+    'app-bar-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-column-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-donut-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-pie-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-stack-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-progress-bar': {
+        root: {
+            width: '100%'
+        }
+    },
+
+
+};
+export const applyAutoLayoutPatch = (theme) => {
+    const overrideTheme = BASE_THEME.$new('auto-layout-patch', AUTO_LAYOUT_OVERRIDES);
+    let target = theme;
+    while (target.parent.name !== 'default' && target.parent.name !== 'auto-layout-patch') {
+        target = target.parent;
+    }
+
+    target.parent = overrideTheme;
+};

package/src/templates/project/component/dynamic/component-generator.js

@@ -0,0 +1,84 @@
+import WmText from "@wavemaker-ai/app-rn-runtime/components/input/text/text.component";
+import WmTextarea from '@wavemaker-ai/app-rn-runtime/components/input/textarea/textarea.component';
+import WmNumber from "@wavemaker-ai/app-rn-runtime/components/input/number/number.component";
+import WmCurrency from '@wavemaker-ai/app-rn-runtime/components/input/currency/currency.component';
+import WmSelect from '@wavemaker-ai/app-rn-runtime/components/input/select/select.component';
+import WmSearch from '@wavemaker-ai/app-rn-runtime/components/basic/search/search.component';
+import WmChips from '@wavemaker-ai/app-rn-runtime/components/input/chips/chips.component';
+import WmCheckbox from '@wavemaker-ai/app-rn-runtime/components/input/checkbox/checkbox.component';
+import WmCheckboxset from '@wavemaker-ai/app-rn-runtime/components/input/checkboxset/checkboxset.component';
+import WmToggle from '@wavemaker-ai/app-rn-runtime/components/input/toggle/toggle.component';
+import WmSwitch from '@wavemaker-ai/app-rn-runtime/components/input/switch/switch.component';
+import WmRadioset from '@wavemaker-ai/app-rn-runtime/components/input/radioset/radioset.component';
+import WmDate from '@wavemaker-ai/app-rn-runtime/components/input/epoch/date/date.component';
+import WmDatetime from '@wavemaker-ai/app-rn-runtime/components/input/epoch/datetime/datetime.component';
+import WmTime from '@wavemaker-ai/app-rn-runtime/components/input/epoch/time/time.component';
+import WmSlider from '@wavemaker-ai/app-rn-runtime/components/input/slider/slider.component';
+import WmRating from '@wavemaker-ai/app-rn-runtime/components/input/rating/rating.component';
+import WmLayoutgrid from '@wavemaker-ai/app-rn-runtime/components/container/layoutgrid/layoutgrid.component';
+import WmGridrow from '@wavemaker-ai/app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component';
+import WmGridcolumn from '@wavemaker-ai/app-rn-runtime/components/container/layoutgrid/gridcolumn/gridcolumn.component';
+import WmContainer from '@wavemaker-ai/app-rn-runtime/components/container/container.component';
+import registerTransformers from '@wavemaker-ai/rn-codegen/src/transpile/components/transform-register';
+import WmFormField from '@wavemaker-ai/app-rn-runtime/components/data/form/form-field/form-field.component';
+import WmLabel from '@wavemaker-ai/app-rn-runtime/components/basic/label/label.component';
+
+import {transpileMarkup}  from '@wavemaker-ai/rn-codegen/src/transpile/transpile';
+import {transform} from '@babel/standalone';
+import React from "react";
+
+// this is to avoid tree shaking
+export const components = {WmText};
+
+registerTransformers();
+
+export const generate = (wavemakerMarkup, fragment) => {
+    // transpile wavemaker markup into react markup
+    const transpileArgs = {
+                markup : wavemakerMarkup,
+                isPartOfPrefab : false,
+                splitCode : false
+            }
+    const transpiledComponents = transpileMarkup(transpileArgs);
+    try {
+        // use babel library convert it into React.creatElement
+        const transformedCode = transform(transpiledComponents.markup, {
+            presets: ['react']
+        }).code;
+
+        const importedComponents = {
+            'WmText': WmText,
+            'WmTextarea': WmTextarea,
+            'WmNumber': WmNumber,
+            'WmCurrency': WmCurrency,
+            'WmSelect': WmSelect,
+            'WmSearch': WmSearch,
+            'WmChips': WmChips,
+            'WmCheckbox': WmCheckbox,
+            'WmCheckboxset': WmCheckboxset,
+            'WmToggle': WmToggle,
+            'WmSwitch': WmSwitch,
+            'WmRadioset': WmRadioset,
+            'WmDate': WmDate,
+            'WmDatetime': WmDatetime,
+            'WmTime': WmTime,
+            'WmSlider': WmSlider,
+            'WmRating': WmRating,
+            'WmLayoutgrid': WmLayoutgrid,
+            'WmGridrow': WmGridrow,
+            'WmGridcolumn': WmGridcolumn,
+            'WmContainer': WmContainer,
+            'WmFormField': WmFormField,
+            'WmLabel': WmLabel
+        }
+
+        // Evaluate the transformed code synchronously
+        const dynamicComponentFunction = new Function(['React, fragment', ...Object.keys(importedComponents)].join(', '), `return ${transformedCode}`);
+        const dynamicComponent = dynamicComponentFunction(React, fragment, ...Object.values(importedComponents));
+        return dynamicComponent;
+    } catch (error) {
+        console.error('Error generating component:', error);
+        return null;
+    }
+
+}

package/src/templates/project/component/dynamic/form.generator.js

@@ -0,0 +1,81 @@
+import {generate} from './component-generator';
+import {forEach, isArray} from "lodash";
+
+// Check if itemsperrow has any value > 1 (e.g., { xs: 1, sm: 2, md: 2, lg: 2 } → true)
+const isMultiColumnLayout = (itemsperrow) => {
+    if (!itemsperrow || typeof itemsperrow !== 'object') return false;
+    return Object.values(itemsperrow).some(value => value > 1);
+};
+
+// Generate the form field with given field definition. Add a grid column wrapper around the form field.
+const setMarkupForFormField = (field, columnWidth, isHorizontal) =>  {
+    let propsTmpl = '';
+    forEach(field, (value, key) => {
+        propsTmpl = `${propsTmpl} ${key}="${value}"`;
+    });
+
+    if(isHorizontal) {
+        propsTmpl = `${propsTmpl} layoutposition="horizontal"`
+    }
+
+    return `<wm-gridcolumn columnwidth="${columnWidth}"><wm-form-field ${propsTmpl.trim()}></wm-form-field></wm-gridcolumn>`;
+};
+
+const setMarkupForFormFieldContainer = (field, isHorizontal) =>  {
+    let propsTmpl = '';
+    forEach(field, (value, key) => {
+        propsTmpl = `${propsTmpl} ${key}="${value}"`;
+    });
+
+    if(isHorizontal) {
+        propsTmpl = `${propsTmpl} layoutposition="horizontal"`
+    }
+
+    return `<wm-form-field ${propsTmpl.trim()}></wm-form-field>`;
+};
+
+// Function to generate and compile the form fields from the metadata
+const generateFormFields = (metadata, formName, isHorizontal, enableDesignTokens, itemsperrow) => {
+    let fieldTemplate = '';
+    let colCount = 0;
+    let fields = metadata;
+
+    if (!isArray(fields)) {
+        return;
+    }
+
+    if (enableDesignTokens) {
+        while (fields[colCount]) {
+            if (fields[colCount]) {
+                fieldTemplate += setMarkupForFormFieldContainer(fields[colCount], isHorizontal);
+            }
+            colCount++;
+        }
+        // Conditionally apply row layout attributes based on itemsperrow
+        const containerAttrs = isMultiColumnLayout(itemsperrow) ? 'width="100%" direction="row" wrap="true"' : '';
+        fieldTemplate = `<wm-container type="dynamic" dynamicForm="${formName}" ${containerAttrs}>${fieldTemplate}</wm-container>`;
+    } else {
+        let noOfColumns = 1;
+        const columnWidth = 12 / noOfColumns;
+
+        while (fields[colCount]) {
+            let colTmpl = '';
+            if (fields[colCount]) {
+                colTmpl += setMarkupForFormField(fields[colCount], columnWidth, isHorizontal);
+            }
+            colCount++;
+            fieldTemplate += `<wm-gridrow>${colTmpl}</wm-gridrow>`;
+        }
+        fieldTemplate = `<wm-layoutgrid type="dynamic" dynamicForm = "${formName}">${fieldTemplate}</wm-layoutgrid>`;
+    }
+
+    return fieldTemplate;
+}
+
+export const dynamicForm = (metadata, formName, fragment, isHorizontal, enableDesignTokens, itemsperrow) => {
+    // convert metadata into wavemaker markup
+    const wmMarkup = generateFormFields(metadata, formName, isHorizontal, enableDesignTokens, itemsperrow);
+
+   // using component generator transform wavemaker markup into react elements
+    return generate(wmMarkup, fragment);
+}

package/src/templates/project/esbuild/esbuild-plugin-babel.js

@@ -0,0 +1,44 @@
+const babel = require('@babel/core');
+const fs = require('fs');
+const path = require('path');
+
+const pluginBabel = (options = {}) => ({
+	name: 'babel',
+	setup(build, { transform } = {}) {
+		const { filter = /.*/, namespace = '', config = {} } = options;
+
+		const transformContents = ({ args, contents }) => {
+			const babelOptions = babel.loadOptions({
+				...config,
+				filename: args.path,
+				caller: {
+					name: 'esbuild-plugin-babel',
+					supportsStaticESM: true
+				}
+			});
+			if (!babelOptions) return { contents };
+
+			if (babelOptions.sourceMaps) {
+				const filename = path.relative(process.cwd(), args.path);
+
+				babelOptions.sourceFileName = filename;
+			}
+
+			return new Promise((resolve, reject) => {
+				babel.transform(contents, babelOptions, (error, result) => {
+					error ? reject(error) : resolve({ contents: result.code });
+				});
+			});
+		};
+
+		if (transform) return transformContents(transform);
+
+		build.onLoad({ filter, namespace }, async args => {
+			const contents = await fs.promises.readFile(args.path, 'utf8');
+
+			return transformContents({ args, contents });
+		});
+	}
+});
+
+module.exports = pluginBabel;