create-catalyst-app-internal 0.0.1-beta.7 → 0.0.1-beta.71

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)
@@ -18,6 +17,7 @@ const program = new Commander.Command()
     .arguments("[folderName]")
     .usage(`${green("[folderName]")} [options]`)
     .action((name) => (projectName = name))
+    .addOption(new Option("-y, --yes [yes]", "Use default configuration"))
     .addOption(
         new Option(
             "-s, --state-management [stateManagement]",
@@ -28,13 +28,55 @@ const program = new Commander.Command()
     )
     .action(async (folderName = null, cmd) => {
         try {
+            let config = {
+                folderName,
+                language: null,
+                tailWindSupport: null,
+                description: null,
+                stateManagement: cmd.stateManagement,
+                mcpSupport: null,
+            }
+
+            if (process.argv.includes("new-route")) {
+                const createRoutePath = path.join(__dirname, "../codemod/new-route/index.js")
+                execSync(`node ${createRoutePath}`, { stdio: "inherit" })
+                return
+            }
+
+            console.log(cyan(`Using create-catalyst-app version ${bold(packageJson.version)}`))
+
             // Use options provided through commander or prompt the user
             validateOptions(cmd)
-            const projectName = folderName || (await promptProjectName())
-            const language = "js"
-            const projectDescription = await promptDescription()
-            const stateManagement = cmd.stateManagement || (await promptStateManagement())
 
+            if (cmd.yes) {
+                console.log("Using default configuration.")
+                config = {
+                    folderName: "my-app",
+                    language: "js",
+                    tailWindSupport: false,
+                    description: "Default catalyst app",
+                    stateManagement: "none",
+                    mcpSupport: true,
+                }
+            }
+
+            const projectName = config.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 projectDescription = config.description || (await promptDescription())
+            const language = config.language || (await promptTypescript())
+            const tailWindSupport = config.tailWindSupport !== null || (await promptTailwind())
+            const stateManagement = config.stateManagement || (await promptStateManagement())
+            const mcpSupport = config.mcpSupport !== null || (await promptMcp())
 
             // Define mapping of options to repository suffixes
             const repositorySuffixes = {
@@ -50,32 +92,67 @@ const program = new Commander.Command()
 
             const commonCodeDirectory = "package/templates/common"
             const selectedTemplateCode = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`
+            const tailwindCodeDirectory = "package/templates/tailwind"
+            const mcpCodeDirectory = "package/templates/mcp-root"
+
             const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
+            if (tailWindSupport) subDirectoriesToExtract.push(tailwindCodeDirectory)
+            if (mcpSupport) subDirectoriesToExtract.push(mcpCodeDirectory)
+
             const extractionDestination = `/${projectName}/`
             let tempDir
-                ; (() => {
-                    try {
-                        tempDir = createTempDir()
+            ;(() => {
+                try {
+                    tempDir = createTempDir()
 
-                        const packageFilePath = packNpmPackage(packageName, packageVersion, tempDir)
+                    const packageFilePath = packNpmPackage(packageName, packageVersion, tempDir)
 
-                        extractSubdirectory(packageFilePath)
-                        createGitignore(projectName)
+                    extractSubdirectory(packageFilePath)
+                    createGitignore(projectName)
 
-                        execSync(
-                            `cd ${projectName} && npm i && npm pkg set name=${projectName} ${projectDescription ? `description=${projectDescription}` : ""} && git init --quiet`,
-                            { stdio: "inherit" }
-                        )
+                    execSync(
+                        `cd ${projectName} && npm i && npm pkg set name=${projectName} ${projectDescription ? `description="${projectDescription}"` : ""} && git init --quiet`,
+                        { stdio: "inherit" }
+                    )
 
+                    if (tailWindSupport) {
+                        execSync(`cd ${projectName} && npm i tailwindcss@4.1.4 @tailwindcss/postcss@4.1.4`, {
+                            stdio: "inherit",
+                        })
+                    }
 
-                        deleteDirectory(tempDir)
-                    } catch (error) {
-                        deleteDirectory(tempDir)
-                        console.error(`Error: ${error.message}`)
-                        process.exit(1)
+                    if (mcpSupport) {
+                        execSync(`cd ${projectName} && npm i @modelcontextprotocol/sdk`, { stdio: "inherit" })
                     }
-                })()
 
+                    execSync(
+                        `cd ${projectName} && 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)
@@ -87,8 +164,8 @@ const program = new Commander.Command()
 
                     // to test locally, comment the upper execSync and uncomment this one.
                     // execSync(`npm pack --pack-destination=${tempDir} --silent`, {
-                    //   cwd: process.cwd(),
-                    // });
+                    //     cwd: process.cwd(),
+                    // })
 
                     return tarballFilePath
                 } catch (error) {
@@ -123,13 +200,19 @@ const program = new Commander.Command()
                             if (entry.path.startsWith(selectedTemplateCode)) {
                                 entry.path = entry.path.replace(selectedTemplateCode, extractionDestination)
                             }
+                            if (entry.path.startsWith(tailwindCodeDirectory)) {
+                                entry.path = entry.path.replace(tailwindCodeDirectory, extractionDestination)
+                            }
+                            if (entry.path.startsWith(mcpCodeDirectory)) {
+                                entry.path = entry.path.replace(mcpCodeDirectory, extractionDestination)
+                            }
                         },
                     })
                 } catch (e) {
                     console.log("An error occurred", e)
                 }
 
-                cyan(`Run cd ${projectName} && npm start to get started.`)
+                console.log(cyan(`Run cd ${projectName} && npm start to get started.`))
             }
         } catch (error) {
             console.error(red("An error occurred:"), error.message)
@@ -170,10 +253,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)
     }
@@ -191,6 +274,46 @@ async function promptDescription() {
     } else return null
 }
 
+async function promptTypescript() {
+    const response = await prompts({
+        type: "select",
+        name: "typescript",
+        message: "Would you like to use TypeScript?",
+        choices: [
+            { title: "Yes", value: "ts" },
+            { title: "No", value: "js" },
+        ],
+    })
+
+    return response.typescript
+}
+
+async function promptTailwind() {
+    const response = await prompts({
+        type: "select",
+        name: "tailwind",
+        message: "Would you like to use Tailwind CSS?",
+        choices: [
+            { title: "Yes", value: true },
+            { title: "No", value: false },
+        ],
+    })
+    return response.tailwind
+}
+
+async function promptMcp() {
+    const response = await prompts({
+        type: "select",
+        name: "mcp",
+        message: "Would you like to setup an MCP server?",
+        choices: [
+            { title: "Yes", value: true },
+            { title: "No", value: false },
+        ],
+    })
+    return response.mcp
+}
+
 function validateOptions(cmd) {
     // Validate language option
     if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {
@@ -201,6 +324,10 @@ function validateOptions(cmd) {
     if (cmd.stateManagement && !["rtk", "redux", "none"].includes(cmd.stateManagement.toLowerCase())) {
         throw new Error('Invalid state management option. Use "rtk", "redux", or "none".')
     }
+
+    if (cmd.yes && typeof cmd.yes !== "boolean") {
+        throw new Error('Invalid option for "yes". Use "-y" or "--yes" to accept defaults.')
+    }
 }
 
 function deleteDirectory(dirPath) {
@@ -219,20 +346,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 application in development mode with the following commands:
+Commence development by initiating the the following commands:
 
 For running the application in development mode, run:
 
@@ -8,7 +8,7 @@ For running the application in development mode, run:
 npm run start
 ```
 
-For a production build, utilize:
+For a production build, change NODE_ENV to "production" in config/config.json, then run :
 
 ```bash
 npm run build

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

@@ -1,14 +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 "@css/base/index.scss"

package/templates/common/config/config.json

@@ -5,29 +5,8 @@
     "WEBPACK_DEV_SERVER_PORT": 3006,
     "BUILD_OUTPUT_PATH": "build",
     "PUBLIC_STATIC_ASSET_PATH": "/assets/",
-    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3006",
-    "NODE_ENV": "development",
-    "BUILD_ENV": "localBuild",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
     "API_URL": "",
     "ANALYZE_BUNDLE": false,
-    "CLIENT_ENV_VARIABLES": [
-        "NODE_SERVER_HOSTNAME",
-        "NODE_SERVER_PORT",
-        "WEBPACK_DEV_SERVER_HOSTNAME",
-        "WEBPACK_DEV_SERVER_PORT",
-        "BUILD_OUTPUT_PATH",
-        "PUBLIC_STATIC_ASSET_PATH",
-        "PUBLIC_STATIC_ASSET_URL",
-        "NODE_ENV",
-        "BUILD_ENV",
-        "API_URL",
-        "ANALYZE_BUNDLE",
-        "ENABLE_DEBUG_LOGS",
-        "ENABLE_FILE_LOGGING",
-        "ENABLE_CONSOLE_LOGGING",
-        "ANALYZE_BUNDLE",
-        "ENABLE_DEBUG_LOGS",
-        "ENABLE_FILE_LOGGING",
-        "ENABLE_CONSOLE_LOGGING"
-    ]
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
 }

package/templates/common/server/document.js

@@ -1,12 +1,10 @@
 import React from "react"
-import { Head, Body } from "catalyst-core-internal"
+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

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

package/templates/common/server/server.js

@@ -1 +1,8 @@
-export function addMiddlewares(app) {}
+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/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/common/webpackConfig.js

@@ -2,4 +2,5 @@ module.exports = {
     developmentPlugins: [],
     ssrPlugins: [],
     clientPlugins: [],
+    transpileModules: [],
 }