create-catalyst-app-internal 0.0.3-canary.9 → 0.1.0

package/Readme.md

@@ -1,9 +1,9 @@
 # Creating a Catalyst App
 
-Scaffold your Catalyst app swiftly with `create-catalyst-app-internal`. 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-internal@latest
+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.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app-internal",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.3-canary.9",
+    "version": "0.1.0",
     "description": "cli package to scaffold Catalyst application",
     "dependencies": {
         "commander": "^8.2.0",

package/scripts/cli.cjs

@@ -17,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]",
@@ -27,15 +28,39 @@ 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())
+
+            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)))
@@ -47,9 +72,11 @@ const program = new Commander.Command()
                 console.log(red(`${projectName} already exists, try again.`))
                 process.exit(1)
             }
-            const language = "js"
-            const projectDescription = await promptDescription()
-            const stateManagement = cmd.stateManagement || (await promptStateManagement())
+            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 = {
@@ -65,7 +92,13 @@ 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
             ;(() => {
@@ -78,10 +111,27 @@ const program = new Commander.Command()
                     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"`,
+                        `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",
+                        })
+                    }
+
+                    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.")
 
@@ -114,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) {
@@ -150,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)
@@ -218,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())) {
@@ -228,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) {

package/templates/common/config/config.json

@@ -10,12 +10,14 @@
     "ANALYZE_BUNDLE": false,
     "CLIENT_ENV_VARIABLES": ["API_URL"],
     "WEBVIEW_CONFIG": {
+        "LOCAL_IP": "localhost",
         "port": "3005",
+        "appInfo": "",
         "android": {
-          "buildType": "debug"
+            "buildType": "debug"
         },
         "ios": {
-          "buildType": "debug"
+            "buildType": "debug"
         }
-      }
+    }
 }

package/templates/common/public/offline.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Offline</title>
+        <style>
+            body {
+                margin: 0;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+                background: #282c34;
+                color: #ffffff;
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: calc(10px + 2vmin);
+            }
+            .card {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 12px;
+                padding: 0 24px;
+                max-width: 440px;
+            }
+            h1 {
+                margin: 0;
+                font-size: 2rem;
+                font-weight: 700;
+            }
+            p {
+                margin: 0;
+                color: #d8e0f7;
+                line-height: 1.4;
+            }
+            a.retry {
+                color: #61dafb;
+                font-weight: 600;
+                text-decoration: none;
+                transition: color 0.2s ease;
+            }
+            a.retry:hover {
+                color: #9ae3fb;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="card">
+            <h1>You're Offline</h1>
+            <p>Please check your connection and try again.</p>
+            <a class="retry" href="catalyst://retry">Try Again</a>
+        </div>
+    </body>
+</html>

package/templates/common/webpackConfig.js

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

package/templates/mcp-root/mcp/mcp.js

@@ -0,0 +1,55 @@
+const { McpServer } = require("@modelcontextprotocol/sdk/server/mcp.js")
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js")
+
+const fetchContextFromGitHub = async () => {
+    const url = "https://raw.githubusercontent.com/tata1mg/catalyst-core-internal/main/context.md"
+    const response = await fetch(url)
+
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: Failed to fetch context from GitHub`)
+    }
+
+    return await response.text()
+}
+
+const server = new McpServer({
+    name: "catalyst",
+    version: "1.0.0",
+    capabilities: {
+        tools: {},
+    },
+})
+
+server.tool("get_context", "Complete context of catalyst framework", {}, async () => {
+    try {
+        const context = await fetchContextFromGitHub()
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: context,
+                },
+            ],
+        }
+    } catch (error) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Error fetching context: ${error.message}`,
+                },
+            ],
+        }
+    }
+})
+
+const init = async () => {
+    try {
+        const transport = new StdioServerTransport()
+        await server.connect(transport)
+    } catch (error) {
+        console.error("Error starting MCP server:", error)
+    }
+}
+
+init()

package/templates/none-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-internal-starter",
+    "name": "create-catalyst-app-starter",
     "version": "1.0.0",
     "scripts": {
         "start": "catalyst start",
@@ -11,7 +11,7 @@
         "buildApp": "catalyst buildApp",
         "buildApp:ios": "catalyst buildApp:ios",
         "buildApp:android": "catalyst buildApp:android",
-        "setupEmulator" : "catalyst setupEmulator",
+        "setupEmulator": "catalyst setupEmulator",
         "setupEmulator:ios": "catalyst setupEmulator:ios",
         "setupEmulator:android": "catalyst setupEmulator:android"
     },
@@ -25,8 +25,8 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.6",
-        "catalyst-core-internal": "^0.0.3-canary.9"
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0"
     },
     "devDependencies": {
         "eslint": "^8.26.0",

package/templates/none-ts/client/index.js

@@ -0,0 +1,23 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData } = window
+
+        const router = clientRouter({ routerInitialState: routerInitialData })
+
+        const Application = (
+            <React.StrictMode>
+                <RouterProvider router={router} />
+            </React.StrictMode>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/none-ts/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "npm run typecheck && catalyst build",
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe",
+        "buildApp": "catalyst buildApp",
+        "buildApp:ios": "catalyst buildApp:ios",
+        "buildApp:android": "catalyst buildApp:android",
+        "setupEmulator": "catalyst setupEmulator",
+        "setupEmulator:ios": "catalyst setupEmulator:ios",
+        "setupEmulator:android": "catalyst setupEmulator:android",
+        "typecheck": "tsc --noEmit"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "typescript": "^5.8.3",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
+    }
+}

package/templates/none-ts/src/js/containers/App/index.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { Outlet } from "@tata1mg/router"
+
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
+
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

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

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * 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 const preparedRoutes = ({ routerInitialState }) => {
+    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
+}

package/templates/none-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "CommonJS",
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "jsx": "react",
+        "noEmit": true
+    },
+    "include": ["src", "types.d.ts"],
+    "exclude": ["node_modules"]
+}

package/templates/none-ts/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+    const classes: { [key: string]: string }
+    export default classes
+}

package/templates/redux-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-internal-starter",
+    "name": "create-catalyst-app-starter",
     "version": "1.0.0",
     "scripts": {
         "start": "catalyst start",
@@ -11,7 +11,7 @@
         "buildApp": "catalyst buildApp",
         "buildApp:ios": "catalyst buildApp:ios",
         "buildApp:android": "catalyst buildApp:android",
-        "setupEmulator" : "catalyst setupEmulator",
+        "setupEmulator": "catalyst setupEmulator",
         "setupEmulator:ios": "catalyst setupEmulator:ios",
         "setupEmulator:android": "catalyst setupEmulator:android"
     },
@@ -26,8 +26,8 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.6",
-        "catalyst-core-internal": "^0.0.3-canary.9",
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

package/templates/redux-ts/client/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { Provider } from "react-redux"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const store = configureStore(__INITIAL_STATE__ || {})
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
+
+        const Application = (
+            <Provider store={store} serverState={__INITIAL_STATE__}>
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+            </Provider>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/redux-ts/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "npm run typecheck && catalyst build",
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe",
+        "buildApp": "catalyst buildApp",
+        "buildApp:ios": "catalyst buildApp:ios",
+        "buildApp:android": "catalyst buildApp:android",
+        "setupEmulator": "catalyst setupEmulator",
+        "setupEmulator:ios": "catalyst setupEmulator:ios",
+        "setupEmulator:android": "catalyst setupEmulator:android",
+        "typecheck": "tsc --noEmit"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "typescript": "^5.8.3",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
+    }
+}

package/templates/redux-ts/src/js/containers/App/actions.js

@@ -0,0 +1,17 @@
+const createActionTypes = (prefix, actionTypeList = []) => {
+    const actionTypesObject = {}
+    actionTypeList.forEach((item) => {
+        actionTypesObject[item] = `${prefix}/${item}`
+    })
+
+    return actionTypesObject
+}
+
+export default createActionTypes
+
+export const ShellActions = createActionTypes("shellActions", ["REDUX_TEST"])
+export const reduxTest = () => {
+    return {
+        type: ShellActions.REDUX_TEST,
+    }
+}

package/templates/redux-ts/src/js/containers/App/index.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { Outlet } from "@tata1mg/router"
+
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
+
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

package/templates/redux-ts/src/js/containers/App/reducer.js

@@ -0,0 +1,19 @@
+import { ShellActions } from "./actions"
+
+export const defaultState = {
+    testActionDispatched: false,
+}
+
+export const shellReducer = (state = defaultState, action) => {
+    switch (action.type) {
+        case ShellActions.REDUX_TEST: {
+            return {
+                ...state,
+                testActionDispatched: true,
+            }
+        }
+
+        default:
+            return state
+    }
+}

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

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * 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 const preparedRoutes = ({ store, routerInitialState }) => {
+    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
+}

package/templates/redux-ts/src/js/store/index.js

@@ -0,0 +1,28 @@
+import { configureStore as createStore } from "@reduxjs/toolkit"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
+
+/**
+ * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
+ * @param    {object} initialState    Default state
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
+ * @return   {object} The store itself
+ */
+
+const configureStore = (initialState) => {
+    const api = fetchInstance
+    const store = createStore({
+        reducer: combineReducers({ shellReducer }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
+    })
+    return store
+}
+
+export default configureStore

package/templates/redux-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "CommonJS",
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "jsx": "react",
+        "noEmit": true
+    },
+    "include": ["src", "types.d.ts"],
+    "exclude": ["node_modules"]
+}

package/templates/redux-ts/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+    const classes: { [key: string]: string }
+    export default classes
+}

package/templates/rtk-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-internal-starter",
+    "name": "create-catalyst-app-starter",
     "version": "1.0.0",
     "scripts": {
         "start": "catalyst start",
@@ -11,7 +11,7 @@
         "buildApp": "catalyst buildApp",
         "buildApp:ios": "catalyst buildApp:ios",
         "buildApp:android": "catalyst buildApp:android",
-        "setupEmulator" : "catalyst setupEmulator",
+        "setupEmulator": "catalyst setupEmulator",
         "setupEmulator:ios": "catalyst setupEmulator:ios",
         "setupEmulator:android": "catalyst setupEmulator:android"
     },
@@ -26,8 +26,8 @@
     },
     "dependencies": {
         "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.6",
-        "catalyst-core-internal": "^0.0.3-canary.9",
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

package/templates/rtk-ts/client/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { Provider } from "react-redux"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const store = configureStore(__INITIAL_STATE__ || {})
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
+
+        const Application = (
+            <Provider store={store} serverState={__INITIAL_STATE__}>
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+            </Provider>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/rtk-ts/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "npm run typecheck && catalyst build",
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe",
+        "buildApp": "catalyst buildApp",
+        "buildApp:ios": "catalyst buildApp:ios",
+        "buildApp:android": "catalyst buildApp:android",
+        "setupEmulator": "catalyst setupEmulator",
+        "setupEmulator:ios": "catalyst setupEmulator:ios",
+        "setupEmulator:android": "catalyst setupEmulator:android",
+        "typecheck": "tsc --noEmit"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "0.0.1-beta.7",
+        "catalyst-core-internal": "0.1.0",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "typescript": "^5.8.3",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
+    }
+}

package/templates/rtk-ts/src/js/containers/App/index.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { Outlet } from "@tata1mg/router"
+
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
+
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

package/templates/rtk-ts/src/js/containers/App/reducer.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    testActionDispatched: false,
+}
+
+export const appSlice = createSlice({
+    name: "shellReducer",
+    initialState: initialState,
+    reducers: {
+        reduxTest: (state) => {
+            state.testActionDispatched = true
+        },
+    },
+})
+
+export const { reduxTest } = appSlice.actions
+export const shellReducer = appSlice.reducer

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

@@ -0,0 +1,42 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+/**
+ * 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 const preparedRoutes = ({ store, routerInitialState }) => {
+    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
+}

package/templates/rtk-ts/src/js/store/index.js

@@ -0,0 +1,28 @@
+import { configureStore as createStore } from "@reduxjs/toolkit"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
+
+/**
+ * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
+ * @param    {object} initialState    Default state
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
+ * @return   {object} The store itself
+ */
+
+const configureStore = (initialState) => {
+    const api = fetchInstance
+    const store = createStore({
+        reducer: combineReducers({ shellReducer }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
+    })
+    return store
+}
+
+export default configureStore

package/templates/rtk-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "CommonJS",
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "jsx": "react",
+        "noEmit": true
+    },
+    "include": ["src", "types.d.ts"],
+    "exclude": ["node_modules"]
+}

package/templates/rtk-ts/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+    const classes: { [key: string]: string }
+    export default classes
+}

package/templates/tailwind/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+}

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

@@ -0,0 +1,2 @@
+@import "styles";
+@import "tailwindcss";