create-catalyst-app 0.0.1-beta.2 → 0.0.1-beta.4

package/{readme.md → Readme.md}

@@ -1,10 +1,9 @@
-
 # 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
+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.
@@ -25,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
@@ -32,12 +32,14 @@ Navigate into the directory
 ```bash
 cd my-app
 ```
+
 For running the application in development mode, run:
+
 ```bash
 npm run start
 ```
 
-For a production build, utilize:
+For a production build, change NODE_ENV to "production" in config/config.json, and then run :
 
 ```bash
 npm run build
@@ -50,4 +52,5 @@ npm run serve
 ```
 
 ## Documentation
+
 Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

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,20 +1,19 @@
 {
-  "name": "create-catalyst-app",
-  "bin": "scripts/cli.mjs",
-  "version": "0.0.1-beta.2",
-  "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",
-    "node-fetch": "^3.3.2",
-    "ora": "^8.0.1",
-    "picocolors": "^0.1.0",
-    "prompts": "^2.4.0",
-    "tar": "6.1.15"
-  }
+    "name": "create-catalyst-app",
+    "bin": "scripts/cli.cjs",
+    "version": "0.0.1-beta.4",
+    "description": "cli package to scaffold Catalyst application",
+    "dependencies": {
+        "commander": "^8.2.0",
+        "fs": "^0.0.1-security",
+        "https": "^1.0.0",
+        "picocolors": "^0.1.0",
+        "prompts": "^2.4.0",
+        "tar": "^6.2.1",
+        "validate-npm-package-name": "^5.0.0"
+    },
+    "devDependencies": {
+        "prettier": "^3.2.5"
+    },
+    "license": "MIT"
 }

package/scripts/cli.cjs

@@ -0,0 +1,253 @@
+#!/usr/bin/env node
+const { execSync } = require("child_process")
+const Commander = require("commander")
+const { Option } = require("commander")
+const prompts = require("prompts")
+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")
+
+let projectName = null
+const program = new Commander.Command()
+    .version(packageJson.version)
+    .description("Scaffolding")
+    .arguments("[folderName]")
+    .usage(`${green("[folderName]")} [options]`)
+    .action((name) => (projectName = name))
+    .addOption(
+        new Option(
+            "-s, --state-management [stateManagement]",
+            "Specify state management (rtk, redux, or none)",
+            /^(rtk|redux|none)$/i,
+            "none"
+        )
+    )
+    .action(async (folderName = null, cmd) => {
+        try {
+            // 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",
+                ts: "ts",
+                redux: "redux",
+                rtk: "rtk",
+                none: "none",
+            }
+
+            const packageName = packageJson.name
+            const packageVersion = packageJson.version
+
+            const commonCodeDirectory = "package/templates/common"
+            const selectedTemplateCode = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`
+            const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
+            const extractionDestination = `/${projectName}/`
+            let tempDir
+            ;(() => {
+                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)
+
+                try {
+                    execSync(`npm pack ${packageName}@${packageVersion} --silent`, {
+                        cwd: tempDir,
+                    })
+
+                    // to test locally, comment the upper execSync and uncomment this one.
+                    // execSync(`npm pack --pack-destination=${tempDir} --silent`, {
+                    //   cwd: process.cwd(),
+                    // });
+
+                    return tarballFilePath
+                } catch (error) {
+                    console.error(`Error packing npm package: ${error.message}`)
+                    throw error
+                }
+            }
+
+            // Function to create a temporary directory
+            function createTempDir() {
+                const tempDir = fs.mkdtempSync(path.join(process.cwd(), "temp-"))
+
+                return tempDir
+            }
+
+            // Function to extract subdirectory from npm package and delete tar file
+            function extractSubdirectory(packageFilePath) {
+                try {
+                    tar.extract({
+                        file: packageFilePath,
+                        sync: true,
+                        filter: (path, entry) => {
+                            return subDirectoriesToExtract.reduce((acc, item) => {
+                                return acc || path.startsWith(item)
+                            }, false)
+                        },
+                        cwd: path.join(process.cwd()),
+                        onentry: (entry) => {
+                            if (entry.path.startsWith(commonCodeDirectory)) {
+                                entry.path = entry.path.replace(commonCodeDirectory, extractionDestination)
+                            }
+                            if (entry.path.startsWith(selectedTemplateCode)) {
+                                entry.path = entry.path.replace(selectedTemplateCode, extractionDestination)
+                            }
+                        },
+                    })
+                } catch (e) {
+                    console.log("An error occurred", e)
+                }
+
+                cyan(`Run cd ${projectName} && npm start to get started.`)
+            }
+        } catch (error) {
+            console.error(red("An error occurred:"), error.message)
+            process.exit(1)
+        }
+    })
+    .allowUnknownOption()
+
+program.parse(process.argv)
+
+async function promptStateManagement() {
+    const response = await prompts({
+        type: "select",
+        name: "stateManagement",
+        message: "Choose state management:",
+        choices: [
+            { title: "Redux", value: "redux" },
+            { title: "Redux Toolkit (RTK)", value: "rtk" },
+            { title: "None", value: "none" },
+        ],
+    })
+
+    return response.stateManagement
+}
+async function promptProjectName() {
+    const res = await prompts({
+        type: "text",
+        name: "path",
+        message: "What is your project named?",
+        initial: "my-app",
+    })
+
+    if (typeof res.path === "string") {
+        let projectName = res.path.trim()
+        return projectName
+    }
+
+    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.`
+        )
+        process.exit(1)
+    }
+}
+
+async function promptDescription() {
+    const res = await prompts({
+        type: "text",
+        name: "path",
+        message: "What is your project description?",
+    })
+
+    if (typeof res.path === "string") {
+        return res.path.trim()
+    } else return null
+}
+
+function validateOptions(cmd) {
+    // Validate language option
+    if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {
+        throw new Error('Invalid language option. Use "js" or "ts".')
+    }
+
+    // Validate state management option
+    if (cmd.stateManagement && !["rtk", "redux", "none"].includes(cmd.stateManagement.toLowerCase())) {
+        throw new Error('Invalid state management option. Use "rtk", "redux", or "none".')
+    }
+}
+
+function deleteDirectory(dirPath) {
+    if (dirPath && fs.existsSync(dirPath)) {
+        fs.readdirSync(dirPath).forEach((file) => {
+            const currentPath = path.join(dirPath, file)
+            if (fs.lstatSync(currentPath).isDirectory()) {
+                deleteDirectory(currentPath)
+            } else {
+                fs.unlinkSync(currentPath)
+            }
+        })
+        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

@@ -1,6 +1 @@
-**/node_modules/*
-**/dist/*
-**/build/*
-**/coverage/*
-**/eventScripts/*
-**/docs/*
+**/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", "plugin:prettier/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,29 +1,25 @@
-# README #
+## Getting Started
 
-This README would normally document whatever steps are necessary to get your application up and running.
+Commence development by initiating the the following commands:
 
-### What is this repository for? ###
+For running the application in development mode, run:
 
-* Quick summary
-* Version
-* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+```bash
+npm run start
+```
 
-### How do I get set up? ###
+For a production build, change NODE_ENV to "production" in config/config.json, then run :
 
-* Summary of set up
-* Configuration
-* Dependencies
-* Database configuration
-* How to run tests
-* Deployment instructions
+```bash
+npm run build
+```
 
-### Contribution guidelines ###
+To serve the production build, execute:
 
-* Writing tests
-* Code review
-* Other guidelines
+```bash
+npm run serve
+```
 
-### Who do I talk to? ###
+## Documentation
 
-* Repo owner or admin
-* Other community or team contact
+Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/templates/common/api.js

@@ -1,29 +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 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,15 +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 "normalize.css"
 import "@css/base/index.scss"

package/templates/common/config/config.json

@@ -1,18 +1,12 @@
 {
-    "S3_BUCKET": "stagassets.1mg.com",
-    "S3_FOLDER": "pwa-app",
-    "CDN_ASSET_PATH": "https://stagstatic.1mg.com",
-    "APPLICATION_PORT": "3005",
-    "APPLICATION_BASE_URL": "http://localhost:3005",
-    "SERVER_PATH": "http://localhost:3005",
-    "OUTPUT_PATH": "build",
-    "PUBLIC_OUTPUT_PATH": "build/public",
-    "PUBLIC_ASSET_PATH": "http://localhost:3006/assets/",
-    "LOCAL_ASSET_PATH": "/assets/",
-    "EXTERNAL_BASE_URL": "http://localhost:3005",
-    "DEV_SERVER_PORT": 3006,
-    "DEV_SERVER_HOSTNAME": "localhost",
-    "DEV_SERVER_HOST_URL": "http://localhost:3006",
-    "ENV_NAME": "local",
-    "BUILD_ENV": ""
+    "NODE_SERVER_HOSTNAME": "localhost",
+    "NODE_SERVER_PORT": 3005,
+    "WEBPACK_DEV_SERVER_HOSTNAME": "localhost",
+    "WEBPACK_DEV_SERVER_PORT": 3006,
+    "BUILD_OUTPUT_PATH": "build",
+    "PUBLIC_STATIC_ASSET_PATH": "/assets/",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
+    "API_URL": "",
+    "ANALYZE_BUNDLE": false,
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
 }

package/templates/common/server/document.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { Head, Body } from "catalyst-core-internal"
+
+function Document(props) {
+    return (
+        <html lang="en">
+            <Head {...props}></Head>
+            <Body {...props} />
+        </html>
+    )
+}
+export default Document

package/templates/common/server/index.js

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

package/templates/common/server/server.js

@@ -0,0 +1,8 @@
+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,40 +1,23 @@
-import React,{useEffect} from "react";
-import { useCurrentRouteData,Link } from "@tata1mg/router";
-const Home = () => {
-const {data,isFetched,loading} = useCurrentRouteData() || {}
-
-
-useEffect(()=>{
-  console.log("data is =>",data)
-})
-
-
-  return (
-    
-    <div>
-      <>Welcome to catalyst</>
-      <Link to={"/pdp"}>pdp</Link>
-    </div>
-  );
-};
-
-Home.serverFetcher = async ({ req }, { store }) => {
-  console.log("server fetcher called!!")
-  const res = await fetch("https://jsonblob.com/api/1206830251241234432");
-  const json = await res.json();
-  return json;
-};
-
-Home.clientFetcher = async ({  }, { store },{}) => {
-
-  console.log("client fetcher called",pageNo)
-    const res = await fetch("https://jsonblob.com/api/1206830251241234432");
-    const json = await res.json();
-    return json;
-  };
-
-Home.MetaTagFunction = () => {
-  return [<title key="PDP">Home</title>]
-};
-
-export default Home;
+import React from "react"
+import css from "./Home.scss"
+
+function Home() {
+    return (
+        <div className={css.app}>
+            <header className={css.appHeader}>
+                <h1 className={css.heading}>Catalyst</h1>
+                <p>Edit files inside src directory and save to reload.</p>
+                <a
+                    className={css.appLink}
+                    href="https://catalyst.1mg.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn Catalyst
+                </a>
+            </header>
+        </div>
+    )
+}
+
+export default Home