create-catalyst-app 0.0.1-beta.3 → 0.0.1-beta.5

package/Readme.md

@@ -1,6 +1,6 @@
 # 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:
+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
@@ -24,6 +24,7 @@ Next, select your preferred state management tool from the provided options.
 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
@@ -31,7 +32,9 @@ Navigate into the directory
 ```bash
 cd my-app
 ```
+
 For running the application in development mode, run:
+
 ```bash
 npm run start
 ```
@@ -49,4 +52,5 @@ npm run serve
 ```
 
 ## Documentation
+
 Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/package.json

@@ -1,22 +1,19 @@
 {
     "name": "create-catalyst-app",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.1-beta.3",
+    "version": "0.0.1-beta.5",
     "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"
     },
     "devDependencies": {
         "prettier": "^3.2.5"
     },
-    "license":"MIT"
+    "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)
@@ -31,11 +30,21 @@ const program = new Commander.Command()
             // 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())
 
-
             // Define mapping of options to repository suffixes
             const repositorySuffixes = {
                 js: "js",
@@ -53,33 +62,41 @@ const program = new Commander.Command()
             const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
             const extractionDestination = `/${projectName}/`
             let tempDir
-                ; (() => {
-                    try {
-                        let projectPath = path.join(process.cwd(), projectName);
-
-                        if(fs.existsSync(projectPath)){
-                            console.log(`${projectName} already exists, try again.`)
-                            process.exit(1)
-                        }
-                        tempDir = createTempDir()
-
-                        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`,
-                            { stdio: "inherit" }
-                        )
-                    deleteDirectory(tempDir)
-                    } catch (error) {
-                        deleteDirectory(tempDir)
-                        console.error(`Error: ${error.message}`)
-                        process.exit(1)
-                    }
-                })()
+            ;(() => {
+                try {
+                    tempDir = createTempDir()
+
+                    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 && git add . && git commit -m "initial commit from Create Catalyst App"`,
+                        { stdio: "inherit" }
+                    )
+
+                    console.log(`\n${green(bold("Success!"))} created ${projectName} at ${projectPath}`)
+                    console.log("Inside this directory, you can run the following commands.")
+
+                    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 serves")))
+                    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) {
+                    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)
@@ -174,10 +191,10 @@ async function promptProjectName() {
     if (!res.path || projectName === "") {
         console.log(
             "\nPlease specify the project directory:\n" +
-            `  ${cyan(program.name())} ${green("<project-directory>")}\n` +
-            "For example:\n" +
-            `  ${cyan(program.name())} ${green("my-next-app")}\n\n` +
-            `Run ${cyan(`${program.name()} --help`)} to see all options.`
+                `  ${cyan(program.name())} ${green("<project-directory>")}\n` +
+                "For example:\n" +
+                `  ${cyan(program.name())} ${green("my-next-app")}\n\n` +
+                `Run ${cyan(`${program.name()} --help`)} to see all options.`
         )
         process.exit(1)
     }
@@ -223,20 +240,14 @@ function deleteDirectory(dirPath) {
 
 // Function to create a .gitignore file with the hardcoded patterns
 function createGitignore(projectName) {
+    const gitiIgnorePatterns = ["node_modules", "build", "logs"]
 
-    const gitiIgnorePatterns = [
-        'node_modules',
-        'build',
-        'logs'
-    ];
-
-    const gitignorePath = path.join(process.cwd(), projectName, '.gitignore');
+    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;
+        console.log(".gitignore already exists. Please rename or remove it before running the script.")
+        return
     }
 
-    fs.writeFileSync(gitignorePath, gitiIgnorePatterns.join('\n'));
+    fs.writeFileSync(gitignorePath, gitiIgnorePatterns.join("\n"))
 }
-

package/templates/common/.eslintignore

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

package/templates/common/.eslintrc

@@ -0,0 +1,28 @@
+{
+    "rules": {
+        "react-hooks/exhaustive-deps": "error" // Checks effect dependencies
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+    ],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": "latest"
+    },
+    "plugins": [
+        "react",
+        "react-hooks"
+    ],
+     "settings": {
+        "react": {
+            "pragma": "React",
+            "version": "detect"
+        }
+    }
+}

package/templates/common/README.md

@@ -1,6 +1,6 @@
 ## Getting Started
 
-Commence development by initiating the  the following commands:
+Commence development by initiating the the following commands:
 
 For running the application in development mode, run:
 

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 -  modify request here
+    // Request Interceptor -  modify request here
 
-        // Add query params
-        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 -  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/config/config.json

@@ -6,10 +6,7 @@
     "BUILD_OUTPUT_PATH": "build",
     "PUBLIC_STATIC_ASSET_PATH": "/assets/",
     "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
-    "NODE_ENV": "development",
     "API_URL": "",
     "ANALYZE_BUNDLE": false,
-    "CLIENT_ENV_VARIABLES": [
-        "API_URL"
-    ]
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
 }

package/templates/common/server/document.js

@@ -4,8 +4,7 @@ import { Head, Body } from "catalyst-core"
 function Document(props) {
     return (
         <html lang="en">
-            <Head {...props}>
-            </Head>
+            <Head {...props}></Head>
             <Body {...props} />
         </html>
     )

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,7 +7,7 @@ import clientRouter from "catalyst-core/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 })
 

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",
@@ -16,7 +19,12 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core": "^0.0.1-beta.3"
+        "@tata1mg/router": "^0.0.1-beta.1",
+        "catalyst-core": "^0.0.1-beta.4"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -3,7 +3,27 @@ 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: (
@@ -12,13 +32,7 @@ export const preparedRoutes = ({ routerInitialState }) => {
                     <App />
                 </RouterDataProvider>
             ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
+            children: getPreparedRoutes(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-beta.0",
-        "catalyst-core": "^0.0.1-beta.3",
+        "@tata1mg/router": "^0.0.1-beta.1",
+        "catalyst-core": "^0.0.1-beta.4",
         "@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/reducer.js

@@ -17,4 +17,3 @@ export const shellReducer = (state = defaultState, action) => {
             return state
     }
 }
-

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

@@ -3,7 +3,27 @@ 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: (
@@ -12,13 +32,7 @@ export const preparedRoutes = ({ store, routerInitialState }) => {
                     <App />
                 </RouterDataProvider>
             ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
+            children: getPreparedRoutes(routes),
         },
     ]
 }

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-beta.0",
-        "catalyst-core": "^0.0.1-beta.3",
+        "@tata1mg/router": "^0.0.1-beta.1",
+        "catalyst-core": "^0.0.1-beta.4",
         "@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/routes/utils.js

@@ -3,7 +3,27 @@ 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: (
@@ -12,13 +32,7 @@ export const preparedRoutes = ({ store, routerInitialState }) => {
                     <App />
                 </RouterDataProvider>
             ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
+            children: getPreparedRoutes(routes),
         },
     ]
 }

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__"]
-}