create-catalyst-app 0.0.1-beta.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "create-catalyst-app",
+  "bin": "scripts/cli.mjs",
+  "version": "0.0.1-beta.0",
+  "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"
+  }
+}

package/readme.md

@@ -0,0 +1,53 @@
+
+# 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
+```
+
+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, utilize:
+
+```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/scripts/cli.mjs

@@ -0,0 +1,267 @@
+#!/usr/bin/env node
+import { exec, execSync } from "child_process";
+import Commander, { Option } from "commander";
+import prompts from "prompts";
+import { red, green, cyan, yellow } from "picocolors";
+import ora from "ora";
+import packageJson from "../package.json" assert { type: "json" };
+import tar from "tar";
+import path from "path";
+import fs from "fs";
+
+
+
+// Hardcoded branch
+let projectName = null;
+const program = new Commander.Command(packageJson.name)
+  .version(packageJson.version)
+  .description("Copy code from a specific branch of a GitHub repository.")
+  .arguments("[folderName]")
+  .usage(`${green("[folderName]")} [options]`)
+  .action((name) => (projectName = name))
+  // .addOption(
+  //   new Option(
+  //     "-l, --lang <lang>",
+  //     "Specify the language (js or ts)",
+  //     /^(js|ts)$/i
+  //   )
+  // )
+  .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());
+      const language = "js"
+      const stateManagement =
+        cmd.stateManagement || (await promptStateManagement());
+
+      const resolvedProjectPath = path.resolve(projectName.trim());
+      const projectPath = path.basename(resolvedProjectPath);
+      const root = path.resolve(projectPath);
+      console.log("project path is ====>", root);
+
+      // 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 subdirectoryToExtract = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`; 
+
+      const extractionDestination = `/${projectName}/`;
+      const spinner = ora(
+        `Cloning.....`
+      ).start();
+      (() => {
+        try {
+          
+
+          const tempDir = createTempDir();
+
+          console.log(`\nPacking npm package: ${packageName}@${packageVersion}`);
+          const packageFilePath = packNpmPackage(
+            packageName,
+            packageVersion,
+            tempDir
+          );
+
+          console.log(cyan(`Extracting`));
+          extractSubdirectory(packageFilePath);
+          console.log(green(`Extraction Complete`));
+          console.log(cyan("generating npmrc"))
+          generateNPMRC(projectName)
+          console.log(cyan(`Installing Packages`));
+          execSync(
+            `cd ${projectName} && npm i`
+          ,{stdio:"inherit"})
+          spinner.stop()
+
+          // Optionally, you can delete the temporary directory
+          // fs.rmdirSync(tempDir, { recursive: true });
+          deleteDirectory(tempDir)
+        } catch (error) {
+          spinner.stop()
+          console.error(`Error: ${error.message}`);
+          process.exit(1);
+        }
+      })();
+
+
+       function  packNpmPackage  (packageName, packageVersion, tempDir) {
+        const tarballFileName = `${packageName
+          .substring(1)
+          .replace("/", "-")}-${packageVersion}.tgz`;
+        const tarballFilePath = path.join(tempDir, tarballFileName);
+
+        try {
+          execSync(`npm pack ${packageName}@${packageVersion} --silent`, {
+            cwd: tempDir,
+          })
+          
+          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) {
+        tar.extract({
+          file: packageFilePath,
+          sync: true,
+          filter: (path, entry) => {
+            return path.startsWith(`${subdirectoryToExtract}/`);
+          },
+          cwd: path.join(process.cwd()),
+          onentry: (entry) => {
+          // Modify entry path to remove the initial 'package/' prefix
+            entry.path = entry.path.replace(
+              `${subdirectoryToExtract}/`,
+              extractionDestination
+            );
+          },
+        });
+
+    
+
+        if (stateManagement !== "none") {
+          console.log(
+            cyan(
+              `You chose ${language}, ${stateManagement}. You can now start working on your project!`
+            )
+          );
+        } else {
+          console.log(
+            cyan(
+              `You chose ${language} without state management. You can now start working on your project!`
+            )
+          ); 
+        }
+
+        
+      
+      }
+    } catch (error) {
+    
+      console.error(red("An error occurred:"), error.message);
+      process.exit(1);
+    }
+  })
+  .allowUnknownOption();
+
+program.parse(process.argv);
+
+async function promptLanguage() {
+  const response = await prompts({
+    type: "select",
+    name: "lang",
+    message: "Choose the language:",
+    choices: [
+      { title: "js", value: "js" },
+      { title: "ts", value: "ts" },
+    ],
+  });
+
+  return response.lang;
+}
+
+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") {
+    projectName = res.path.trim();
+    return res.path;
+  }
+
+  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);
+  }
+}
+
+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 (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 generateNPMRC (projectName) {
+  
+
+const npmrcContent = "//registry.npmjs.org/:_authToken=${NPM_TOKEN}"
+
+fs.writeFileSync(process.cwd()+`/${projectName}/.npmrc`,npmrcContent);
+
+}

package/templates/common/.babelrc

@@ -0,0 +1,26 @@
+{
+     "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/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/templates/common/.eslintignore

@@ -0,0 +1,6 @@
+**/node_modules/*
+**/dist/*
+**/build/*
+**/coverage/*
+**/eventScripts/*
+**/docs/*

package/templates/common/.eslintrc

@@ -0,0 +1,53 @@
+{
+    "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"
+        }]
+    },
+    "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"],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "babelOptions": {
+            "configFile": "./babel.config.js"
+        },
+        "ecmaVersion": 6
+    },
+    "plugins": ["babel", "react", "react-hooks", "prettier", "jam3"],
+    "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/.prettierrc.json

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

package/templates/common/.stylelintrc

@@ -0,0 +1,35 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-prettier-scss",
+        "stylelint-config-css-modules"
+    ],
+    "plugins": ["stylelint-prettier"],
+    "rules": {
+        "property-no-vendor-prefix":null,
+        "scss/function-no-unknown": null,
+        "selector-class-pattern": null,
+        "prettier/prettier": true,
+        "color-no-invalid-hex": true,
+        "comment-empty-line-before": ["always", { "ignore": ["stylelint-commands", "after-comment"] }],
+        "indentation": 4,
+        "number-leading-zero": null,
+        "max-empty-lines": 2,
+        "declaration-no-important": true,
+        "block-no-empty": true,
+        "no-empty-source": null,
+        "selector-pseudo-class-no-unknown": null,
+        "selector-type-no-unknown": null,
+        "rule-empty-line-before": ["always", { "except": ["first-nested"], "ignore": ["after-comment"] }],
+        "declaration-property-unit-allowed-list": {
+            "/.*/": ["em", "rem", "%", "s", "vh", "vw", "px", "deg", "ms", "dpi", "dvh", "fr"]
+        },
+        "at-rule-no-unknown": null,
+        "scss/double-slash-comment-whitespace-inside": null,
+        "scss/at-mixin-pattern": null,
+        "scss/dollar-variable-pattern": null,
+        "selector-id-pattern": null,
+        "keyframes-name-pattern": null,
+        "selector-pseudo-element-no-unknown": null
+    }
+}

package/templates/common/README.md

@@ -0,0 +1,29 @@
+# README #
+
+This README would normally document whatever steps are necessary to get your application up and running.
+
+### What is this repository for? ###
+
+* Quick summary
+* Version
+* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+
+### How do I get set up? ###
+
+* Summary of set up
+* Configuration
+* Dependencies
+* Database configuration
+* How to run tests
+* Deployment instructions
+
+### Contribution guidelines ###
+
+* Writing tests
+* Code review
+* Other guidelines
+
+### Who do I talk to? ###
+
+* Repo owner or admin
+* Other community or team contact

package/templates/common/api.js

@@ -0,0 +1,29 @@
+const apiInstance = () => {
+    const fetchFunction = async (url, options) => {
+        let baseURL = process.env.API_URL
+        let finalUrl = baseURL + url
+
+        // Request Interceptor - you can 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 {
+        get: fetchFunction,
+        post: fetchFunction,
+        delete: fetchFunction,
+        patch: fetchFunction,
+        put: fetchFunction
+    }
+}
+export default { apiInstance }

package/templates/common/checkVersion.js

@@ -0,0 +1,3 @@
+if(process.versions.node.split(".")[0]<20){
+    console.error('\x1b[31m%s\x1b[0m', 'use node version >=20');
+}

package/templates/common/client/index.js

@@ -0,0 +1,39 @@
+import React from "react"
+// import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import {createBrowserRouter,RouterProvider } from "@tata1mg/router"
+import {ClientProvider} from "../src/js/stateManager/stateProvider.js"
+import { preparedRoutes } from "../src/js/routes/index.js"
+import configureStore from "../src/js/store/index.js"
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        
+    
+        // Hydrate the redux store from server state.
+        // visitor id is sent with ga track events but we observed multiple cases where visitor id was not being passed. It could be due to the case that maybe cookie is not accessible in some cases. Hence, setting it here as a fallback in case gtmUtility.js is not able to get it any other way.
+        // window.visitorId = store.getState()?.shellReducer?.visitorId
+        // const platform = store.getState()?.shellReducer?.webviewPlatform
+        // const store = {}
+        
+        
+        const {__ROUTER_INITIAL_DATA__:routerInitialData,__INITIAL_STATE__ } = window
+        // console.log("router initila data is ====>",routerInitialData)
+        const store = configureStore(__INITIAL_STATE__||{})
+        const router = createBrowserRouter(
+            preparedRoutes({ store, routerInitialState:(routerInitialData) })
+        )
+
+        const Application = (
+            <ClientProvider>
+                <React.StrictMode>
+                    <RouterProvider router={router}/>
+                </React.StrictMode>
+            </ClientProvider>
+        )
+        // localStorage.setItem("isWebview", window.__INITIAL_STATE__?.shellReducer?.isWebview)
+        
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/common/client/styles.js

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

package/templates/common/config/config.json

@@ -0,0 +1,18 @@
+{
+    "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": ""
+}

package/templates/common/config/config_template.json

@@ -0,0 +1,18 @@
+{
+    "S3_BUCKET": "",
+    "S3_FOLDER": "",
+    "CDN_ASSET_PATH": "",
+    "APPLICATION_PORT": "",
+    "APPLICATION_BASE_URL": "",
+    "SERVER_PATH": "",
+    "OUTPUT_PATH": "",
+    "PUBLIC_OUTPUT_PATH": "",
+    "PUBLIC_ASSET_PATH": "",
+    "LOCAL_ASSET_PATH": "",
+    "EXTERNAL_BASE_URL": "",
+    "DEV_SERVER_PORT": 0,
+    "DEV_SERVER_HOSTNAME": "",
+    "DEV_SERVER_HOST_URL": "",
+    "ENV_NAME": "",
+    "BUILD_ENV": ""
+}