blend-kit 1.0.1

package/dist/helper/RNHelper.js

@@ -0,0 +1,560 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fileHelper_1 = require("./fileHelper");
+const path_1 = __importDefault(require("path"));
+const BlendRNGrammarHelper_1 = __importDefault(require("./grammarHelper/BlendRNGrammarHelper"));
+const { execSync } = require('child_process');
+const runCommand = (command, cwd = process.cwd()) => {
+    try {
+        execSync(command, { stdio: 'inherit', cwd });
+    }
+    catch (error) {
+        console.error(`Failed to execute command: ${command}`);
+        process.exit(1);
+    }
+};
+class RNHelper {
+    constructor() {
+        this.folderPath = path_1.default.join(process.cwd());
+        this.folderName = path_1.default.basename(this.folderPath);
+        this.basicFilePath = path_1.default.join(this.folderPath, `${this.folderName}.basic`);
+        this.configPath = path_1.default.join(this.folderPath, '.basicConfig');
+        this.basicProjectContent = JSON.parse(fileHelper_1.FileHelper.readFile(`${this.configPath}/basicConfig.json`) || "{}");
+    }
+    doRNOperations() {
+        this.createRNSpec();
+        this.parseSpec();
+    }
+    doRNGenerations() {
+        this.buildComponents();
+        this.buildScreens();
+    }
+    createRNSpec() {
+        this.basicProjectContent.sectionList.forEach(section => {
+            const sectionName = section.name.trim();
+            const sectionFolderPath = path_1.default.join(this.folderPath, 'spec', sectionName);
+            const rnFolderPath = path_1.default.join(sectionFolderPath, 'frontend');
+            section.rnModuleList.forEach(dataModule => {
+                const dataFilePath = path_1.default.join(rnFolderPath, `${dataModule.name}.rn`);
+                if (!fileHelper_1.FileHelper.exists(dataFilePath)) {
+                    fileHelper_1.FileHelper.writeFile(dataFilePath, `module ${dataModule.name}`);
+                }
+            });
+        });
+    }
+    parseScreenList(input) {
+        const screenRegex = /screen (.+?) under "(.+?)"/g;
+        const screens = [];
+        let match;
+        while ((match = screenRegex.exec(input)) !== null) {
+            const screenNames = match[1].split(",").map(name => name.trim());
+            const path = match[2];
+            screens.push(...screenNames.map(name => ({ name, path })));
+        }
+        if (screens.length === 0) {
+            throw new Error("Invalid screen syntax or no screens found.");
+        }
+        return screens;
+    }
+    parseLayouts(input) {
+        const layoutRegex = /layout (\w+)\("(.+?)"\) type\("(.+?)"\) {([\s\S]*?)}(?!\s*\})/g;
+        const pageRegex = /page (\w+)\("(.+?)"\) view\((\w+)\)/g;
+        const layouts = [];
+        const processedPages = new Set(); // Track pages to avoid duplicates
+        let match;
+        while ((match = layoutRegex.exec(input)) !== null) {
+            const [_, name, route, type, content] = match;
+            const children = [];
+            // Parse nested layouts first and collect pages from them
+            const nestedLayouts = this.parseLayouts(content);
+            const nestedPages = new Set();
+            // console.log(nestedLayouts,"Nested layouts")
+            for (const nested of nestedLayouts) {
+                children.push(nested); // Add the nested layout
+                // nested.children.forEach((child) => {
+                //     if (child.element) {
+                //         nestedPages.add(child.element);
+                //     }
+                // });    
+            }
+            // Parse pages in the current layout and check for duplicates
+            console.log(this.removeLayoutSection(content), `pages for section ${name}`);
+            const pagecontent = this.removeLayoutSection(content);
+            let pageMatch;
+            while ((pageMatch = pageRegex.exec(pagecontent)) !== null) {
+                const [__, pageName, pageRoute, viewName] = pageMatch;
+                // Only add the page if it hasn't been added already (either in nested layouts or previous iterations)
+                if (!nestedPages.has(pageName) && !processedPages.has(pageName)) {
+                    children.push({
+                        element: viewName,
+                        name: pageName,
+                        route: pageRoute,
+                        parentLayout: name
+                    });
+                    processedPages.add(pageName); // Mark as processed
+                }
+                nestedPages.delete(pageName);
+            }
+            nestedPages.clear();
+            // Add the layout to the final list
+            layouts.push({
+                name,
+                route,
+                type,
+                children,
+            });
+        }
+        return layouts;
+    }
+    removeLayoutSection(spec) {
+        // Regular expression to match the layout section
+        const layoutRegex = /layout\s+\w+\(".*?"\)\s+type\(".*?"\)\s*{[^}]*}/;
+        return spec.replace(layoutRegex, "").trim();
+    }
+    parseSpec() {
+        const sectionRnList = [];
+        this.basicProjectContent.sectionList.forEach(section => {
+            const sectionName = section.name.trim();
+            let screenList = [];
+            let layout = [];
+            let projectName = "";
+            const sectionObj = {
+                name: sectionName,
+                rnModuleList: [],
+            };
+            section.rnModuleList.forEach(rnModule => {
+                const rnFilePath = path_1.default.join(this.folderPath, `spec/${sectionName}/frontend/${rnModule.name}.rn`);
+                const specCode = fileHelper_1.FileHelper.readFile(rnFilePath);
+                const rnHelper = new BlendRNGrammarHelper_1.default();
+                const json = rnHelper.parseBlendRN(specCode);
+                if (!json.valid) {
+                    throw new Error("Error while parsing the react native screens");
+                }
+                else {
+                    sectionObj.rnModuleList.push(json.json);
+                }
+                // Parse screenList and layout from the spec file
+                // screenList = this.parseScreenList(specCode);
+                // layout = this.parseLayouts(specCode);
+                // projectName = rnModule.name;
+            });
+            sectionRnList.push(sectionObj);
+        });
+        // Write the generated configuration to a file
+        fileHelper_1.FileHelper.writeFile(`${this.configPath}/rnConfig.json`, JSON.stringify(sectionRnList, null, 4));
+    }
+    //Generate
+    buildScreens() {
+        const rnSectionList = JSON.parse(fileHelper_1.FileHelper.readFile(`${this.configPath}/rnConfig.json`));
+        console.log(rnSectionList, "rnSectionList");
+        rnSectionList.forEach(rnSection => {
+            const rnFolderPath = path_1.default.join(this.folderPath, `module/${rnSection.name}/react-native`);
+            rnSection.rnModuleList.forEach(rnModule => {
+                // this.checkForFolderAndCreateReactNativeApp(rnFolderPath, rnModule.name).then(res => {
+                this.buildLayouts(rnSection, rnModule);
+                const rnProjectPath = path_1.default.join(rnFolderPath, rnModule.name);
+                rnModule.screenList.forEach(screen => {
+                    const screenPath = `${rnProjectPath}/src/view/${screen.path}/`;
+                    const screenCode = this.generateScreenCode(screen);
+                    fileHelper_1.FileHelper.createFile(`${screenPath}${screen.name}.tsx`, screenCode);
+                });
+                // })
+            });
+        });
+    }
+    buildComponents() {
+        const reactSectionList = JSON.parse(fileHelper_1.FileHelper.readFile(`${this.configPath}/rnConfig.json`));
+        reactSectionList.forEach(reactSection => {
+            const reactFolderPath = path_1.default.join(this.folderPath, `module/${reactSection.name}/react-native`);
+            reactSection.rnModuleList.forEach(reactModule => {
+                this.buildLayouts(reactSection, reactModule);
+                const rnProjectPath = path_1.default.join(reactFolderPath, reactModule.name);
+                const mdpHookComponentPath = `${rnProjectPath}/src-gen/component/mdpHook.ts`;
+                const mdpPath = `${rnProjectPath}/src-gen/component/MDP.ts`;
+                const mdpHookCode = this.generateMDPHookCode(reactModule.componentList);
+                fileHelper_1.FileHelper.writeFile(`${mdpHookComponentPath}`, mdpHookCode);
+                fileHelper_1.FileHelper.writeFile(`${mdpPath}`, `export interface MDP {getMetaData:() => any;}\nexport interface IBasicComponent {value?: any;onInput?:(val: any) => any;}`);
+                reactModule.componentList.forEach(component => {
+                    const componentPath = `${rnProjectPath}/src/component/${component.path}/`;
+                    const componentCode = this.generateComponentCode(component);
+                    const mdpCode = this.generateComponentMDPCode(component);
+                    fileHelper_1.FileHelper.createFile(`${componentPath}/${component.name}/${component.name}.tsx`, componentCode);
+                    fileHelper_1.FileHelper.createFile(`${componentPath}/${component.name}/${component.name}MDP.ts`, mdpCode);
+                    fileHelper_1.FileHelper.createFile(`${componentPath}/${component.name}/index.ts`, `export {default} from './${component.name}';\nexport * from "./${component.name}MDP";`);
+                });
+            });
+        });
+    }
+    generateMDPHookCode(componentList) {
+        const importsCode = `
+            ${componentList.reduce((acc, component) => {
+            acc = acc + `import ${component.name} from '../../src/component/${component.path}/${component.name}';\n`;
+            return acc;
+        }, "")}`;
+        return `
+            import React, { useEffect, useState } from "react"
+            import { MDP } from "./MDP";
+            ${importsCode}
+            
+    
+    export const useMetaData: (props: { mdpClass: MDP, defaultInput?: any; onInput?: (val: any) => void; extraProps?: any }) => [element: React.ReactElement, input: any, setInput: any] = (props) => {
+        console.log(props.defaultInput, props.mdpClass, "defaultInput")
+        const [input, setInput] = useState(props.defaultInput);
+    
+    
+    
+    
+        return [generateElementFromMetaData({
+            componentClassMetaData: props.mdpClass.getMetaData(),
+            onInput: (val: any) => {
+                setInput(val);
+                props.onInput && props.onInput(val)
+            },
+            value: input,
+            extraProps: props.extraProps
+        }), input, setInput]
+    }
+    
+    
+    export const generateElementFromMetaData = ({ componentClassMetaData, value, onInput, extraProps }: {
+        componentClassMetaData: any;
+        value?: any;
+        onInput?: any;
+        extraProps?: object;
+    }) => {
+        return React.createElement((ComponentNameMap[componentClassMetaData.componentName] as any), {
+            ...componentClassMetaData.props,
+            value: value,
+            onInput: onInput,
+            ...extraProps
+        })
+    }
+    
+    
+    const ComponentNameMap: any = {
+        ${componentList.reduce((acc, component) => {
+            acc = acc + `"${component.name}": ${component.name},\n`;
+            return acc;
+        }, "")}
+    }
+    
+    export interface IMetaDataHook {
+        element: React.ReactElement,
+        input?: any;
+    }
+            
+            `;
+    }
+    checkForFolderAndCreateReactNativeApp() {
+        return new Promise((checkRes) => __awaiter(this, void 0, void 0, function* () {
+            const rnSectionList = JSON.parse(fileHelper_1.FileHelper.readFile(`${this.configPath}/rnConfig.json`));
+            const promises = [];
+            rnSectionList.forEach(rnSection => {
+                const rnFolderPath = path_1.default.join(this.folderPath, `module/${rnSection.name}/react-native`);
+                fileHelper_1.FileHelper.ensureDir(rnFolderPath);
+                rnSection.rnModuleList.forEach(rnModule => {
+                    const modulePath = path_1.default.join(rnFolderPath, rnModule.name);
+                    if (!fileHelper_1.FileHelper.exists(modulePath)) {
+                        promises.push(new Promise(res => {
+                            runCommand(`npx @react-native-community/cli@latest init ${rnModule.name} --version 0.78.0`, rnFolderPath);
+                            runCommand(`npm install -D @tsconfig/react-native@3.0.5 @types/jest@29.5.14 @types/react@19.0.10 @types/react-test-renderer@19.0.0 typescript@5.0.4`, modulePath);
+                            const dependencies = [
+                                '@react-navigation/bottom-tabs@7.2.1',
+                                '@react-navigation/drawer@7.1.2',
+                                '@react-navigation/material-top-tabs@7.1.1',
+                                '@react-navigation/native@7.0.15',
+                                '@react-navigation/native-stack@7.2.1',
+                                '@reduxjs/toolkit@2.6.0',
+                                'react-native-gesture-handler@2.24.0',
+                                'react-native-pager-view@6.7.0',
+                                'react-native-reanimated@3.17.1',
+                                'react-native-safe-area-context@5.3.0',
+                                'react-native-screens@4.9.1',
+                                'react-redux@9.2.0',
+                                'redux-saga@1.3.0',
+                                "axios@1.8.1",
+                                "react-native-dotenv@3.4.11"
+                            ];
+                            runCommand(`npm install ${dependencies.join(' ')}`, modulePath);
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/tsconfig.json`, `{
+                                "extends": "@tsconfig/react-native/tsconfig.json"
+                                }`);
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/App.tsx`, mainAppcode);
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/babel.config.js`, `module.exports = {
+                                    presets: ['module:@react-native/babel-preset'],
+                                    plugins: [
+                                      ['module:react-native-dotenv']
+                                    ]
+                                  };`);
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/.env.dev`, "");
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/.env.prod`, "");
+                            fileHelper_1.FileHelper.writeFile(`${modulePath}/env.d.ts`, `
+                                    declare module '@env' {
+                                    export const API_URL: string;
+                                    export const APP_ENV: string;
+                                  }`);
+                        }));
+                    }
+                });
+            });
+            yield Promise.all(promises);
+            checkRes(true);
+        }));
+        // return new Promise(res => {
+        //     const modulePath = path.join(rnProjectPath, projectName);
+        //     if(!FileHelper.exists(modulePath)) {
+        //         runCommand(`npx @react-native-community/cli@latest init ${projectName}`,rnProjectPath);
+        //         res(true);
+        //     } else {
+        //         res(true)
+        //     }
+        // });
+    }
+    buildLayouts(rnSection, rnModule) {
+        const rnFolderPath = path_1.default.join(this.folderPath, `module/${rnSection.name}/react-native`);
+        // const path = `${projectPath}/frontend/${frontEnd.name}/src/layout`;
+        const rnLayoutPath = path_1.default.join(rnFolderPath, rnModule.name);
+        // rnModule.layout.forEach(lo => {
+        const lo = {
+            name: "BlendGenerated",
+            route: "/",
+            children: rnModule.layout,
+            type: "Stack",
+        };
+        this.traverseChildrenAndCreateLayout(rnLayoutPath, lo, rnModule);
+        fileHelper_1.FileHelper.createFile(`${rnLayoutPath}/src/layout/${lo.name}Layout.tsx`, `
+${this.generateLayoutCode(lo, rnModule)}
+`);
+        fileHelper_1.FileHelper.writeFile(`${rnLayoutPath}/src-gen/router/config/${lo.name}LayoutConfig.tsx`, `
+    ${this.generateLayoutCodeInterface(lo)}
+    `);
+        // })
+    }
+    traverseChildrenAndCreateLayout(rnLayoutPath, lo, frontEnd) {
+        lo.children.forEach(loChild => {
+            if (loChild.children) {
+                fileHelper_1.FileHelper.createFile(`${rnLayoutPath}/src/layout/${loChild.name}Layout.tsx`, `
+${this.generateLayoutCode(loChild, frontEnd)}
+`);
+                fileHelper_1.FileHelper.writeFile(`${rnLayoutPath}/src-gen/router/config/${loChild.name}LayoutConfig.tsx`, `
+    ${this.generateLayoutCodeInterface(loChild)}
+    `);
+                this.traverseChildrenAndCreateLayout(rnLayoutPath, loChild, frontEnd);
+            }
+        });
+    }
+    generateRouterConstant(children) {
+        let path = '';
+        const routeObj = generateRouterConstantObj(children);
+        function generateRouterConstantObj(children) {
+            return children.reduce((acc, child, index) => {
+                if (child.children) {
+                    // path = path+"/"+child.route;
+                    console.log(path, "Path With layout");
+                    path = child.route && child.route != "" && child.route != "/" ? path + "/" + child.route : path;
+                    acc[child.name] = generateRouterConstantObj(child.children);
+                    console.log(child.name, index, children.length, "Path With layout After");
+                    if (index == children.length - 1) {
+                        path = path.split("/").slice(0, -1).join('/').toString();
+                        // const pathNumToBeRemoved = child.route.split("/").length;
+                        // path = path.split("/").slice(0,-pathNumToBeRemoved).join('/').toString();
+                    }
+                }
+                else {
+                    path = child.route && child.route != "" && child.route != "/" ? path + "/" + child.route : path;
+                    acc[child.name] = path;
+                    console.log(path, "Path Without layout");
+                    const pathNumToBeRemoved = child.route.split("/").length;
+                    console.log(pathNumToBeRemoved, index, children.length, "pathNumToBeRemoved..............");
+                    path = path.split("/").slice(0, -pathNumToBeRemoved).join('/').toString();
+                    if (index == children.length - 1) {
+                        path = path.split("/").slice(0, -1).join('/').toString();
+                        // const pathNumToBeRemoved = child.route.split("/").length;
+                        // path = path.split("/").slice(0,-pathNumToBeRemoved).join('/').toString();
+                    }
+                }
+                return acc;
+            }, {});
+        }
+        return JSON.stringify(routeObj);
+    }
+    generateLayoutCode(lo, frontEnd) {
+        const layoutChildName = lo.type == "Stack" ? `${lo.name}LayoutStack` : lo.type == "Drawer" ? `${lo.name}LayoutDrawer` : lo.type == "BottomTab" ? `${lo.name}LayoutBottomTab` : `${lo.name}LayoutTopTab`;
+        return (`
+import { ${lo.name}LayoutNavigator,${layoutChildName} } from '../../src-gen/router/config/${lo.name}LayoutConfig';
+${lo.children.reduce((acc, item) => {
+            const importCode = `   ${item.children ? `
+            import ${item.name}Layout from './${item.name}Layout';\n
+            ` : `
+            import ${item.element} from '../view/${this.findScreenPath(frontEnd.screenList, ((item === null || item === void 0 ? void 0 : item.element) || ""))}/${item.element}';\n
+            `}`;
+            acc = acc + importCode;
+            return acc;
+        }, "")}
+    
+const ${lo.name}Layout = () => {
+        return (
+        <${lo.name}LayoutNavigator>
+            ${lo.children.reduce((acc, item) => {
+            acc = acc + `
+                    <${layoutChildName}.Screen component={${item.element ? item.element : `${item.name}Layout`}} name={'${item.element ? item.name : `${item.name}Layout`}'}></${layoutChildName}.Screen>\n
+                    `;
+            return acc;
+        }, "")}
+        </${lo.name}LayoutNavigator>
+        )
+}
+
+export default ${lo.name}Layout;
+`);
+    }
+    generateLayoutCodeInterface(lo) {
+        const mainImportCode = lo.type == "TopTab" ? `import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";`
+            : lo.type == "Drawer" ?
+                `import { createDrawerNavigator } from '@react-navigation/drawer';`
+                : lo.type == "BottomTab" ?
+                    `import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";`
+                    : `import { createNativeStackNavigator } from "@react-navigation/native-stack";`;
+        const layoutChildName = lo.type == "TopTab" ? `${lo.name}LayoutTopTab` : lo.type == "Drawer" ? `${lo.name}LayoutDrawer` : lo.type == "BottomTab" ? `${lo.name}LayoutBottomTab` : `${lo.name}LayoutStack`;
+        const layoutNavigatorFunction = lo.type == "TopTab" ? `createMaterialTopTabNavigator`
+            : lo.type == "Drawer" ? `createDrawerNavigator`
+                : lo.type == "BottomTab" ? `createBottomTabNavigator`
+                    : `createNativeStackNavigator`;
+        return (`
+            ${mainImportCode}
+            export type ${lo.name}LayoutScreenList = {\n
+            ${lo.children.reduce((acc, frontEndLayout) => {
+            var _a;
+            acc = acc + `${frontEndLayout.name}${(frontEndLayout.children && ((_a = frontEndLayout.children) === null || _a === void 0 ? void 0 : _a.length) > 0) ? 'Layout' : ''}: any,\n`;
+            return acc;
+        }, "")}
+            }
+
+            export type ${lo.name}LayoutChildren = ${lo.children && lo.children.length > 1 ? `[${new Array(lo.children.length).fill("React.ReactNode")}]` : "React.ReactNode"}
+
+            export const ${layoutChildName} = ${layoutNavigatorFunction}<${lo.name}LayoutScreenList>();
+            export const ${lo.name}LayoutNavigator: React.FC<{ children: ${lo.name}LayoutChildren }> = ({
+            children,
+        }) => {
+        return <${layoutChildName}.Navigator>{children}</${layoutChildName}.Navigator>;
+        };
+
+/*const ${lo.name}Layout = () => {
+        return (
+        <${lo.name}LayoutNavigator>
+            ${lo.children.reduce((acc, item) => {
+            acc = acc + `
+                    <${layoutChildName}.Screen component={${item.element ? item.element : `${item.name}Layout`}} name={'${item.name}'}></${layoutChildName}.Screen>\n
+                    `;
+            return acc;
+        }, "")}
+        </${lo.name}LayoutNavigator>
+        )
+}
+*/
+
+`);
+    }
+    generateScreenCode(screen) {
+        return `
+        import React from "react";
+        import {Text} from "react-native";
+        const ${screen.name} = () => {
+        return(
+            <Text>
+            ${screen.name}
+            </Text>
+        )
+        }
+        
+        export default ${screen.name};
+        `;
+    }
+    findScreenPath(screenList, screenName) {
+        const index = screenList.findIndex(screen => screen.name === screenName);
+        if (screenList[index]) {
+            return screenList[index].path;
+        }
+        else {
+            alert(`${screenName} not found`);
+        }
+    }
+    generateComponentCode(component) {
+        return `
+            import React from "react";
+            import {Text} from "react-native";
+            import {I${component.name}Props} from './${component.name}MDP';
+            const ${component.name} = (props: I${component.name}Props) => {
+            return(
+                <Text>
+                ${component.name}
+                </Text>
+            )
+            }
+            
+            export default ${component.name};
+            `;
+    }
+    generateComponentMDPCode(component) {
+        const pathCode = '../../../' + component.path.split("/").reduce((acc, curVal) => {
+            acc = acc + '../';
+            return acc;
+        }, "");
+        return `
+            import { MDP,IBasicComponent } from "${pathCode}src-gen/component/MDP";
+            
+    export class ${component.name}MDP implements I${component.name}MDP {
+        componentName: string = "${component.name}";
+        
+        getMetaData() {
+            return {
+                componentName: this.componentName,
+                props: {
+                }
+    
+            }
+        }
+    }
+    
+    export interface I${component.name}Props extends IBasicComponent {
+    }
+    export interface I${component.name}MDP extends MDP {
+    getMetaData: () => {componentName: string, props: I${component.name}Props}
+    }
+            `;
+    }
+}
+exports.default = RNHelper;
+const mainAppcode = `
+
+import React from 'react';
+
+
+import { NavigationContainer } from '@react-navigation/native';
+import BlendGeneratedLayout from './src/layout/BlendGeneratedLayout';
+function App(): React.JSX.Element {
+  
+
+  return (
+    <NavigationContainer>
+      <BlendGeneratedLayout />
+    </NavigationContainer>
+  );
+}
+
+
+export default App;
+
+`;