create-catalyst-app-internal 0.0.1-beta.14 → 0.0.1-beta.15

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app-internal",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.1-beta.14",
+    "version": "0.0.1-beta.15",
     "description": "cli package to scaffold Catalyst application",
     "main": "index.js",
     "scripts": {
@@ -13,9 +13,11 @@
         "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"
 }

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,38 @@
+{
+    "parser": "@babel/eslint-parser",
+    "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",
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "babelOptions": {
+            "configFile": "./.babelrc"
+        },
+        "ecmaVersion": 6
+    },
+    "plugins": [
+        "babel",
+        "react",
+        "react-hooks"
+    ],
+    "settings": {
+        "react": {
+            "createClass": "createReactClass",
+            "pragma": "React",
+            "version": "detect"
+        }
+    }
+}

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/none-js/client/index.js

@@ -7,7 +7,7 @@ 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 })
 

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,14 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.7"
+        "@tata1mg/router": "^0.0.2-alpha.0",
+        "catalyst-core-internal": "^0.0.1-beta.8"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-babel": "^5.3.1",
+        "eslint-plugin-react": "^7.34.1",
+        "@babel/eslint-parser": "^7.19.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -1,28 +1,41 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+import React from "react";
+import { RouterDataProvider, MetaTag } from "@tata1mg/router";
+import App from "@containers/App";
+import routes from "./index.js";
 
 export const preparedRoutes = ({ routerInitialState }) => {
-    return [
-        {
-            element: (
-                <RouterDataProvider config={{}} initialState={routerInitialState}>
-                    <MetaTag />
-                    <App />
-                </RouterDataProvider>
-            ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
-        },
-    ]
-}
+  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
-}
+  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,16 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.7",
+        "@tata1mg/router": "^0.0.2-alpha.0",
+        "catalyst-core-internal": "^0.0.1-beta.8",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-babel": "^5.3.1",
+        "eslint-plugin-react": "^7.34.1",
+        "@babel/eslint-parser": "^7.19.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -1,28 +1,42 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+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
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
-        },
-    ]
-}
+  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
-}
+  return 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,16 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.7",
+        "@tata1mg/router": "^0.0.2-alpha.0",
+        "catalyst-core-internal": "^0.0.1-beta.8",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-babel": "^5.3.1",
+        "eslint-plugin-react": "^7.34.1",
+        "@babel/eslint-parser": "^7.19.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -1,28 +1,42 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+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
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
-        },
-    ]
-}
+  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
-}
+  return routes;
+};