create-catalyst-app-internal 0.0.1-beta.3 → 0.0.1-beta.30

package/Readme.md

@@ -0,0 +1,56 @@
+# Creating a Catalyst App
+
+Scaffold your Catalyst app swiftly with `create-catalyst-app`. This tool expedites the process by initializing your project with predefined configurations. To kickstart your project, execute the following command:
+
+```bash
+npx create-catalyst-app@latest
+```
+
+Upon execution, you'll be prompted to name your project. Once named, a template will be cloned into the specified directory.
+
+```bash
+✔ What is your project named? my-app
+```
+
+Next, select your preferred state management tool from the provided options.
+
+```bash
+? Choose state management: › - Use arrow-keys. Return to submit .
+❯   Redux
+    Redux Toolkit (RTK)
+    None
+```
+
+Following your selection, a default template will be cloned into the directory, and all necessary packages will be installed.
+
+## Getting Started
+
+Commence development by initiating the application in development mode with the following commands:
+
+Navigate into the directory
+
+```bash
+cd my-app
+```
+
+For running the application in development mode, run:
+
+```bash
+npm run start
+```
+
+For a production build, change NODE_ENV to "production" in config/config.json, and then run :
+
+```bash
+npm run build
+```
+
+To serve the production build, execute:
+
+```bash
+npm run serve
+```
+
+## Documentation
+
+Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/codemod/createNewRoute.js

@@ -0,0 +1,110 @@
+const fs = require("fs");
+const path = require('path');
+const prompts = require('prompts');
+const pc = require("picocolors")
+
+const { program } = require('commander');
+const { execSync } = require('child_process');
+
+
+// Configure commander to accept CLI options
+program
+    .option('-p, --path <path>', 'Path for the new route')
+    .option('-c, --component <component>', 'Component name for the new route')
+    .parse(process.argv);
+
+
+async function main() {
+    const { path: routePath, component } = program;
+
+    // If both options are not provided, prompt the user for input
+    if (!routePath || !component) {
+        const response = await prompts([
+            {
+                type: routePath ? null : 'text',
+                name: 'path',
+                message: 'Enter the route path',
+                validate: value => (value ? true : 'Route path is required')
+            },
+            {
+                type: component ? null : 'text',
+                name: 'component',
+                message: 'Enter the component name for new route',
+                validate: value => {
+                    const componentNameRegex = /^[A-Z][a-zA-Z0-9]*$/;
+
+                    return componentNameRegex.test(value) || "Component name should start with an uppercase letter and may contain alphanumeric characters";
+                }
+            },
+        ]);
+
+
+        routePathName = routePath || response.path;
+        componentName = component || response.component;
+    }
+
+    if (componentName) {
+        // Add new component
+        const isCreated = addNewComponent(componentName)
+
+        // Add the new route
+        if (isCreated) addNewRoute(componentName, routePathName);
+    }
+}
+
+// Function to create component using given inputs
+function addNewComponent(componentName) {
+
+    const componentDir = "src/js/containers"
+    const componentPath = path.join(componentDir, `${componentName}/${componentName}.js`);
+
+    // Create the new component file
+    const componentTemplate = `import React from 'react';
+  
+  const ${componentName} = () => {
+    return (
+      <div>
+        <h1>${componentName}</h1>
+        <p>This is the ${componentName} component.</p>
+      </div>
+    );
+  };
+  
+  export default ${componentName};
+  `;
+
+    try {
+        // directory check
+        if (fs.existsSync(`${componentDir}/${componentName}`)) {
+            throw new Error("directory with similar name already exist");
+        }
+
+        // component check
+        if (fs.existsSync(componentPath)) {
+            throw new Error("component with similar name already exist");
+        }
+
+        fs.mkdirSync(`${componentDir}/${componentName}`)
+        fs.writeFileSync(componentPath, componentTemplate, 'utf8');
+        console.log(`\nComponent ${componentName} created at ${componentPath}`);
+
+        return true
+
+    } catch (e) {
+        console.log(pc.red(`\nError: ${e}`))
+    }
+}
+
+// Function to run the codemod with the provided inputs
+function addNewRoute(componentName, routePath) {
+    const codemodPath = path.join(__dirname, 'createRoute.js');
+    const command = `jscodeshift --silent -t ${codemodPath} --routePath ${routePath} --componentName ${componentName} src/js/routes/index.js`;
+
+    try {
+        execSync(command, { stdio: 'inherit' });
+    } catch (error) {
+        console.log(pc.red(`\nError running codemod: ${e}`))
+    }
+}
+
+main();

package/codemod/createRoute.js

@@ -0,0 +1,39 @@
+const pc = require("picocolors")
+
+module.exports = function (fileInfo, api, options) {
+    const jscodeshift = api.jscodeshift;
+    const root = jscodeshift(fileInfo.source);
+
+    const { routePath, componentName } = options;
+
+    // Create a new route object using a template expression
+    const newObject = jscodeshift.template.expression`
+    {
+        path: ${JSON.stringify(routePath)},
+        end: true,
+        component: ${componentName}
+    }
+    `;
+    
+
+    const result = root.find(jscodeshift.ImportDeclaration, { source: { value: `@containers/${componentName}/${componentName}` } })
+
+    if (result.__paths.length > 0) {
+        console.log(pc.red("\nError: Route with similar name already exist!"))
+        return
+    } else {
+
+        // Insert the node at the top of the file
+        root.find(jscodeshift.Program).get('body', 0).insertBefore(`import ${componentName} from '@containers/${componentName}/${componentName}'`);
+
+        root.find(jscodeshift.VariableDeclarator, { id: { name: 'routes' } })
+            .find(jscodeshift.ArrayExpression)
+            .forEach(p => p.get('elements').push(newObject))
+            
+
+        console.log(pc.green('\nNew route added successfully.'));
+        return root.toSource();
+    }
+
+};
+

package/license

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 1mg Healthcare Solutions Private Limited.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/package.json

@@ -1,21 +1,20 @@
 {
     "name": "create-catalyst-app-internal",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.1-beta.3",
+    "version": "0.0.1-beta.30",
     "description": "cli package to scaffold Catalyst application",
-    "main": "index.js",
-    "scripts": {
-        "start": "node index.js"
-    },
     "dependencies": {
         "commander": "^8.2.0",
         "fs": "^0.0.1-security",
         "https": "^1.0.0",
         "picocolors": "^0.1.0",
         "prompts": "^2.4.0",
-        "tar": "6.1.15"
+        "tar": "^6.2.1",
+        "validate-npm-package-name": "^5.0.0",
+        "jscodeshift": "^0.16.0"
     },
     "devDependencies": {
         "prettier": "^3.2.5"
-    }
+    },
+    "license": "MIT"
 }

package/scripts/cli.cjs

@@ -3,14 +3,13 @@ const { execSync } = require("child_process")
 const Commander = require("commander")
 const { Option } = require("commander")
 const prompts = require("prompts")
-const { red, green, cyan } = require("picocolors")
-
-const packageJson = require("../package.json")
+const { red, green, cyan, bold } = require("picocolors")
 const tar = require("tar")
 const path = require("path")
 const fs = require("fs")
+var validate = require("validate-npm-package-name")
+const packageJson = require("../package.json")
 
-// Hardcoded branch
 let projectName = null
 const program = new Commander.Command()
     .version(packageJson.version)
@@ -28,17 +27,29 @@ const program = new Commander.Command()
     )
     .action(async (folderName = null, cmd) => {
         try {
+            if (process.argv.includes("new-route")) {
+                execSync(`node codemod/createNewRoute.js`, { stdio: "inherit" })
+                return
+            }
+
             // Use options provided through commander or prompt the user
             validateOptions(cmd)
             const projectName = folderName || (await promptProjectName())
+            let isNameValid = validate(projectName)
+            if (!isNameValid.validForNewPackages) {
+                isNameValid?.warnings?.forEach?.((item) => console.log(red(item)))
+                isNameValid?.errors?.forEach?.((item) => console.log(red(item)))
+                process.exit(1)
+            }
+            let projectPath = path.join(process.cwd(), projectName)
+            if (fs.existsSync(projectPath)) {
+                console.log(red(`${projectName} already exists, try again.`))
+                process.exit(1)
+            }
             const language = "js"
             const projectDescription = await promptDescription()
             const stateManagement = cmd.stateManagement || (await promptStateManagement())
 
-            const resolvedProjectPath = path.resolve(projectName.trim())
-            const projectPath = path.basename(resolvedProjectPath)
-            const root = path.resolve(projectPath)
-
             // Define mapping of options to repository suffixes
             const repositorySuffixes = {
                 js: "js",
@@ -63,24 +74,34 @@ const program = new Commander.Command()
                     const packageFilePath = packNpmPackage(packageName, packageVersion, tempDir)
 
                     extractSubdirectory(packageFilePath)
+                    createGitignore(projectName)
 
                     execSync(
-                        `cd ${projectName} && npm i  && npm pkg set name=${projectName} ${
-                            projectDescription ? `description=${projectDescription}` : ""
-                        } && git init --quiet`,
+                        `cd ${projectName} && npm i && npm pkg set name=${projectName} ${projectDescription ? `description="${projectDescription}"` : ""} && git init --quiet && git add . && git commit -m "initial commit from Create Catalyst App"`,
                         { stdio: "inherit" }
                     )
 
-                    console.log(cyan(`Installing Packages`))
+                    console.log(`\n${green(bold("Success!"))} created ${projectName} at ${projectPath}`)
+                    console.log("Inside this directory, you can run the following commands.")
 
-                    deleteDirectory(tempDir)
+                    console.log(cyan(bold(" \n npm run start")))
+                    console.log("  Starts the development server ")
+
+                    console.log(cyan(bold("\n npm run build")))
+                    console.log("  Bundles the app for production ")
+
+                    console.log(cyan(bold("\n npm run serve")))
+                    console.log("  Serves the production build ")
+
+                    console.log("\nWe suggest you to begin, by running")
+                    console.log(` ${cyan("cd")} ${projectName} && ${cyan("npm start")} \n\n`)
                 } catch (error) {
-                    deleteDirectory(tempDir)
                     console.error(`Error: ${error.message}`)
                     process.exit(1)
+                } finally {
+                    deleteDirectory(tempDir)
                 }
             })()
-
             function packNpmPackage(packageName, packageVersion, tempDir) {
                 const tarballFileName = `${packageName}-${packageVersion}.tgz`
                 const tarballFilePath = path.join(tempDir, tarballFileName)
@@ -221,3 +242,17 @@ function deleteDirectory(dirPath) {
         fs.rmdirSync(dirPath)
     }
 }
+
+// Function to create a .gitignore file with the hardcoded patterns
+function createGitignore(projectName) {
+    const gitiIgnorePatterns = ["node_modules", "build", "logs"]
+
+    const gitignorePath = path.join(process.cwd(), projectName, ".gitignore")
+
+    if (fs.existsSync(gitignorePath)) {
+        console.log(".gitignore already exists. Please rename or remove it before running the script.")
+        return
+    }
+
+    fs.writeFileSync(gitignorePath, gitiIgnorePatterns.join("\n"))
+}

package/templates/common/.eslintignore

@@ -0,0 +1 @@
+**/build/*

package/templates/common/.eslintrc

@@ -1,53 +1,28 @@
 {
-    "parser": "@babel/eslint-parser",
     "rules": {
-        "prettier/prettier": "error",
-        "no-console": "warn",
-        "react/prop-types": 1,
-        "react/display-name": [0, { "ignoreTranspilerName": true }],
-        "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-        "no-prototype-builtins": "off",
-        "jam3/no-sanitizer-with-danger": 2,
-        "react/jsx-no-target-blank": [0, {
-            "enforceDynamicLinks": "never"
-        }]
+        "react-hooks/exhaustive-deps": "error" // Checks effect dependencies
     },
     "env": {
         "browser": true,
         "es6": true,
-        "jest": true,
         "node": true
     },
-    "globals": {
-        "expect": true,
-        "__non_webpack_require__": true,
-        "logger": "readonly",
-        "AppCallbacks": "readonly"
-    },
-    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+    ],
     "parserOptions": {
         "sourceType": "module",
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true
-        },
-        "babelOptions": {
-            "configFile": "./babel.config.js"
-        },
-        "ecmaVersion": 6
+        "ecmaVersion": "latest"
     },
-    "plugins": ["babel", "react", "react-hooks", "prettier", "jam3"],
-    "settings": {
+    "plugins": [
+        "react",
+        "react-hooks"
+    ],
+     "settings": {
         "react": {
-            "createClass": "createReactClass",
             "pragma": "React",
             "version": "detect"
-        },
-        "propWrapperFunctions": [
-            "forbidExtraProps",
-            { "property": "freeze", "object": "Object" },
-            { "property": "myFavoriteWrapper" }
-        ],
-        "linkComponents": ["Hyperlink", { "name": "Link", "linkAttribute": "to" }]
+        }
     }
-}
+}

package/templates/common/README.md

@@ -1,6 +1,6 @@
 ## Getting Started
 
-Commence development by initiating the application in development mode with the following commands:
+Commence development by initiating the the following commands:
 
 For running the application in development mode, run:
 
@@ -8,7 +8,7 @@ For running the application in development mode, run:
 npm run start
 ```
 
-For a production build, utilize:
+For a production build, change NODE_ENV to "production" in config/config.json, then run :
 
 ```bash
 npm run build

package/templates/common/api.js

@@ -1,27 +1,16 @@
-const apiInstance = () => {
-    const fetchFunction = async (url, options) => {
-        let baseURL = process.env.API_URL
-        let finalUrl = baseURL + url
+const fetchFunction = (url, options) => {
+    let baseURL = process.env.API_URL
+    let finalUrl = baseURL + url
 
-        // Request Interceptor - you can modify request here
+    // Request Interceptor -  modify request here
 
-        // Add query params if exist
-        if (Object.keys(options?.params).length > 0) {
-            finalUrl = url + "?" + new URLSearchParams(options.params)
-        }
-
-        return fetch(finalUrl, options).then(async (response) => {
-            const parsedResponse = await response.json()
-            // Response Interceptor - you can modify response here
-            return parsedResponse
+    return fetch(finalUrl, options)
+        .then(response => {
+            return response.json().then(parsedResponse => {
+                // Response Interceptor -  modify response here
+                return parsedResponse
+            })
         })
-    }
-    return {
-        get: fetchFunction,
-        post: fetchFunction,
-        delete: fetchFunction,
-        patch: fetchFunction,
-        put: fetchFunction,
-    }
 }
-export default { apiInstance }
+
+export default fetchFunction

package/templates/common/client/styles.js

@@ -1,14 +1,3 @@
-/* Style Loader
- *
- * Anything imported in here will either be added to the vendor CSS chunk, or
- * the main app CSS chunk. Where they will go depends on its location or its
- * extension.
- *
- * Files will be added to the vendor.css chunk if:
- * - they are located inside `node_modules`, or
- * - they are plain .css files.
- * Otherwise, files will be added to the main app.css chunk.
- */
+// Include initial base styles. Global styles will come here.
 
-// Include initial base styles.
 import "@css/base/index.scss"

package/templates/common/config/config.json

@@ -5,30 +5,8 @@
     "WEBPACK_DEV_SERVER_PORT": 3006,
     "BUILD_OUTPUT_PATH": "build",
     "PUBLIC_STATIC_ASSET_PATH": "/assets/",
-    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3006",
-    "NODE_ENV": "development",
-    "BUILD_ENV": "localBuild",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
     "API_URL": "",
-    "ANALYZE_BUNDLE":false,
-    "CLIENT_ENV_VARIABLES": [
-    "NODE_SERVER_HOSTNAME",
-    "NODE_SERVER_PORT",
-    "WEBPACK_DEV_SERVER_HOSTNAME",
-    "WEBPACK_DEV_SERVER_PORT",
-    "BUILD_OUTPUT_PATH" ,
-    "PUBLIC_STATIC_ASSET_PATH",
-    "PUBLIC_STATIC_ASSET_URL",
-    "NODE_ENV",
-    "BUILD_ENV",
-    "API_URL",
-    "CLIENT_ENV_VARIABLES",
-    "ANALYZE_BUNDLE",
-    "ENABLE_DEBUG_LOGS",
-    "ENABLE_FILE_LOGGING",
-    "ENABLE_CONSOLE_LOGGING",
-    "ANALYZE_BUNDLE",
-    "ENABLE_DEBUG_LOGS",
-    "ENABLE_FILE_LOGGING",
-    "ENABLE_CONSOLE_LOGGING"
-]
+    "ANALYZE_BUNDLE": false,
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
 }

package/templates/common/server/document.js

@@ -3,10 +3,8 @@ import { Head, Body } from "catalyst-core-internal"
 
 function Document(props) {
     return (
-        <html lang={props.lang}>
-            <Head {...props}>
-                <meta charset="final-order" />
-            </Head>
+        <html lang="en">
+            <Head {...props}></Head>
             <Body {...props} />
         </html>
     )

package/templates/common/server/index.js

@@ -1 +1,2 @@
+// This function is executed before server starts.
 export const preServerInit = () => {}

package/templates/common/server/server.js

@@ -1 +1,8 @@
-export function addMiddlewares(app) {}
+const express = require("express")
+const path = require("path")
+
+// Server middlewares are added here.
+
+export function addMiddlewares(app) {
+    app.use("/favicon.ico", express.static(path.join(__dirname, "../public/favicon.ico")))
+}

package/templates/common/src/js/containers/Home/Home.js

@@ -1,7 +1,7 @@
 import React from "react"
 import css from "./Home.scss"
 
-function Landing() {
+function Home() {
     return (
         <div className={css.app}>
             <header className={css.appHeader}>
@@ -20,4 +20,4 @@ function Landing() {
     )
 }
 
-export default Landing
+export default Home

package/templates/common/src/js/routes/index.js

@@ -8,10 +8,4 @@ const routes = [
     },
 ]
 
-/**
- * Making the routes array compatible with the format accepted by createBrowserRouter
- * API on the client side
- * https://reactrouter.com/en/main/routers/create-browser-router
- */
-
 export default routes

package/templates/none-js/client/index.js

@@ -7,16 +7,14 @@ import clientRouter from "catalyst-core-internal/router/ClientRouter"
 
 window.addEventListener("load", () => {
     loadableReady(() => {
-        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const { __ROUTER_INITIAL_DATA__: routerInitialData } = window
 
         const router = clientRouter({ routerInitialState: routerInitialData })
 
         const Application = (
-            <Provider serverState={__INITIAL_STATE__}>
-                <React.StrictMode>
-                    <RouterProvider router={router} />
-                </React.StrictMode>
-            </Provider>
+            <React.StrictMode>
+                <RouterProvider router={router} />
+            </React.StrictMode>
         )
 
         const container = document.getElementById("app")

package/templates/none-js/package.json

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -12,12 +15,16 @@
         "@server": "server",
         "@config": "config",
         "@css": "src/static/css",
-        "@routes": "src/js/routes/",
-        "@store": "src/js/store/index.js"
+        "@routes": "src/js/routes/"
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-alpha.13",
-        "catalyst-core-internal": "0.0.1-beta.0"
+        "@tata1mg/router": "^0.0.2-test.2",
+        "catalyst-core-internal": "^0.0.1-beta.23"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

package/templates/none-js/src/js/containers/App/index.js

@@ -1,13 +1,15 @@
-import React, { useState } from "react"
-import { useOutlet } from "@tata1mg/router"
-const App = () => {
-    const o = useOutlet()
-    const [outlet] = useState(o)
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-    return <>{outlet}</>
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
 }
 
-App.serverSideFunction = ({}) => {
+App.serverSideFunction = () => {
     return new Promise((resolve) => resolve())
 }
 

package/templates/none-js/src/js/routes/utils.js

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+
+export const preparedRoutes = ({ routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            const Component = route.component
+            const routeToRender = {
+                ...route,
+                element: <Component key={index} />,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

package/templates/redux-js/package.json

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -17,9 +20,14 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-alpha.13",
-        "catalyst-core-internal": "0.0.1-beta.0",
+        "@tata1mg/router": "^0.0.2-test.2",
+        "catalyst-core-internal": "^0.0.1-beta.23",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

package/templates/redux-js/src/js/containers/App/index.js

@@ -1,10 +1,12 @@
-import React, { useState } from "react"
-import { useOutlet } from "@tata1mg/router"
-const App = () => {
-    const o = useOutlet()
-    const [outlet] = useState(o)
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-    return <>{outlet}</>
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
 }
 
 App.serverSideFunction = () => {

package/templates/redux-js/src/js/containers/App/reducer.js

@@ -4,7 +4,7 @@ export const defaultState = {
     testActionDispatched: false,
 }
 
-const shellReducer = (state = defaultState, action) => {
+export const shellReducer = (state = defaultState, action) => {
     switch (action.type) {
         case ShellActions.REDUX_TEST: {
             return {
@@ -17,5 +17,3 @@ const shellReducer = (state = defaultState, action) => {
             return state
     }
 }
-
-export default shellReducer

package/templates/redux-js/src/js/routes/utils.js

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+
+export const preparedRoutes = ({ store, routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            const Component = route.component
+            const routeToRender = {
+                ...route,
+                element: <Component key={index} />,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

package/templates/redux-js/src/js/store/index.js

@@ -6,11 +6,11 @@ import fetchInstance from "@api"
 /**
  * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
  * @param    {object} initialState    Default state
- * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
  * @return   {object} The store itself
  */
 
-const configureStore = (initialState, request) => {
+const configureStore = (initialState) => {
     const api = fetchInstance
     const store = createStore({
         reducer: combineReducers({ shellReducer }),

package/templates/rtk-js/package.json

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -17,9 +20,14 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-alpha.13",
-        "catalyst-core-internal": "0.0.1-beta.0",
+        "@tata1mg/router": "^0.0.2-test.2",
+        "catalyst-core-internal": "^0.0.1-beta.23",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

package/templates/rtk-js/src/js/containers/App/index.js

@@ -1,10 +1,12 @@
-import React, { useState } from "react"
-import { useOutlet } from "@tata1mg/router"
-const App = () => {
-    const o = useOutlet()
-    const [outlet] = useState(o)
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-    return <>{outlet}</>
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
 }
 
 App.serverSideFunction = () => {

package/templates/rtk-js/src/js/containers/App/reducer.js

@@ -8,7 +8,7 @@ export const appSlice = createSlice({
     name: "shellReducer",
     initialState: initialState,
     reducers: {
-        reduxTest: (state, action) => {
+        reduxTest: (state) => {
             state.testActionDispatched = true
         },
     },

package/templates/rtk-js/src/js/routes/utils.js

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+
+export const preparedRoutes = ({ store, routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            const Component = route.component
+            const routeToRender = {
+                ...route,
+                element: <Component key={index} />,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

package/templates/rtk-js/src/js/store/index.js

@@ -6,11 +6,11 @@ import fetchInstance from "@api"
 /**
  * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
  * @param    {object} initialState    Default state
- * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
  * @return   {object} The store itself
  */
 
-const configureStore = (initialState, request) => {
+const configureStore = (initialState) => {
     const api = fetchInstance
     const store = createStore({
         reducer: combineReducers({ shellReducer }),

package/templates/common/.babelrc

@@ -1,26 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "targets": {
-                    "node": "current"
-                }
-            }
-        ],
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-object-rest-spread",
-        "transform-es2015-modules-commonjs",
-        "transform-class-properties",
-        "dynamic-import-node",
-        "@loadable/babel-plugin"
-    ],
-    "env": {
-        "test": {
-            "presets": ["@babel/preset-react"]
-        }
-    },
-    "ignore": ["__TEST__"]
-}

package/templates/common/.prettierrc.json

@@ -1,7 +0,0 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": false,
-    "arrowParens": "always",
-    "printWidth": 110
-}

package/templates/common/src/js/routes/utils.js

@@ -1,29 +0,0 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
-
-export const preparedRoutes = ({ store, routerInitialState }) => {
-    return [
-        {
-            element: (
-                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
-                    <MetaTag />
-                    <App />
-                </RouterDataProvider>
-            ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                // const pageType = route.staticPageType ? route.staticPageType : null
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
-        },
-    ]
-}
-
-export const getRoutes = () => {
-    return routes
-}