create-catalyst-app 0.0.1-beta.1 → 0.0.1-beta.11

package/scripts/cli.cjs

@@ -0,0 +1,259 @@
+#!/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 {
+            if (process.argv.includes("new-route")) {
+                const createRoutePath = path.join(__dirname, "../codemod/new-route/index.js")
+                execSync(`node ${createRoutePath}`, { 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())
+
+            // 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 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) {
+                    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/{redux-js → common}/server/document.js

@@ -3,10 +3,8 @@ import { Head, Body } from "catalyst-core"
 
 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

@@ -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

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

@@ -0,0 +1,34 @@
+body {
+    margin: 0;
+}
+
+.app {
+    text-align: center;
+    margin: 0;
+}
+
+.appLogo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .appLogo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.appHeader {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.appLink {
+    color: #61dafb;
+}

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

@@ -1,50 +1,11 @@
-import React from "react";
-import { RouterDataProvider } from "@tata1mg/router";
-import Home from "@containers/Home/Home";
-import PDP from "@containers/PDP/PDP";
-import App from "@containers/App";
+import Home from "@containers/Home/Home"
 
 const routes = [
-  {
-    path: "/",
-    end: true,
-    component: Home,
-  },
-  {
-    path: "/pdp",
-    end: true,
-    component: PDP,
-  },
-];
-const getRoutes = () => {
-  return routes;
-};
-
-/**
- * Making the routes array compatible with the format accepted by createBrowserRouter
- * API on the client side
- */
-export const preparedRoutes = ({store,routerInitialState}) => {
-  
-  return ([
-  {
-    element: (
-      <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{store}} >
-
-      <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 default getRoutes;
+    {
+        path: "/",
+        end: true,
+        component: Home,
+    },
+]
+
+export default routes

package/templates/common/src/static/css/base/index.scss

@@ -1,8 +1 @@
-@import "typography";
-@import "layout";
 @import "styles";
-@import "overrides";
-
-
-@import "../resources/variables";
-@import "../resources/mixins";