create-catalyst-app-internal 0.0.3-canary.2 → 0.0.3-canary.20

package/Readme.md

@@ -1,9 +1,9 @@
 # Creating a Catalyst App
 
-Scaffold your Catalyst app swiftly with `create-catalyst-app`. This tool expedites the process by initializing your project with predefined configurations. To kickstart your project, execute the following command:
+Scaffold your Catalyst app swiftly with `create-catalyst-app-internal`. 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@latest
+npx create-catalyst-app-internal@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.2",
+    "version": "0.0.3-canary.20",
     "description": "cli package to scaffold Catalyst application",
     "dependencies": {
         "commander": "^8.2.0",

package/scripts/cli.cjs

@@ -33,6 +33,8 @@ const program = new Commander.Command()
                 return
             }
 
+            console.log(cyan(`Using create-catalyst-app-internal version ${bold(packageJson.version)}`))
+
             // Use options provided through commander or prompt the user
             validateOptions(cmd)
             const projectName = folderName || (await promptProjectName())
@@ -47,8 +49,9 @@ const program = new Commander.Command()
                 console.log(red(`${projectName} already exists, try again.`))
                 process.exit(1)
             }
-            const language = "js"
             const projectDescription = await promptDescription()
+            const language = await promptTypescript()
+            const tailWindSupport = await promptTailwind()
             const stateManagement = cmd.stateManagement || (await promptStateManagement())
 
             // Define mapping of options to repository suffixes
@@ -65,7 +68,11 @@ const program = new Commander.Command()
 
             const commonCodeDirectory = "package/templates/common"
             const selectedTemplateCode = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`
+            const tailwindCodeDirectory = "package/templates/tailwind"
+
             const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
+            if (tailWindSupport) subDirectoriesToExtract.push(tailwindCodeDirectory)
+
             const extractionDestination = `/${projectName}/`
             let tempDir
             ;(() => {
@@ -77,6 +84,8 @@ const program = new Commander.Command()
                     extractSubdirectory(packageFilePath)
                     createGitignore(projectName)
 
+                    if (tailWindSupport) setupTailwind(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" }
@@ -150,6 +159,9 @@ 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)
+                            }
                         },
                     })
                 } catch (e) {
@@ -218,6 +230,49 @@ 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 setupTailwind(projectName) {
+    try {
+        const packageJsonPath = path.join(process.cwd(), projectName, "package.json")
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"))
+        packageJson.dependencies = {
+            ...(packageJson.dependencies || {}),
+            tailwindcss: "^4.1.4",
+            "@tailwindcss/postcss": "^4.1.4",
+        }
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+    } catch (error) {
+        console.log("Error while setting up tailwind:", error)
+        process.exit(1)
+    }
+}
+
 function validateOptions(cmd) {
     // Validate language option
     if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {

package/templates/common/server/document.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Head, Body } from "catalyst-core-internal"
+import { Head, Body } from "catalyst-core"
 
 function Document(props) {
     return (

package/templates/common/webpackConfig.js

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

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

@@ -3,7 +3,7 @@ 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"
+import clientRouter from "catalyst-core/router/ClientRouter"
 
 window.addEventListener("load", () => {
     loadableReady(() => {

package/templates/none-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-starter",
+    "name": "create-catalyst-app-internal-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": "^0.0.1-beta.9"
+        "@tata1mg/router": "^0.0.1-beta.7",
+        "catalyst-core": "0.0.3-canary.20"
     },
     "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/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-internal-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": "0.0.3-canary.20"
+    },
+    "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/client/index.js

@@ -4,7 +4,7 @@ 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 clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/redux-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-starter",
+    "name": "create-catalyst-app-internal-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.1-beta.46",
+        "@tata1mg/router": "^0.0.1-beta.7",
+        "catalyst-core": "0.0.3-canary.20",
         "@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/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-internal-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": "0.0.3-canary.20",
+        "@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/client/index.js

@@ -4,7 +4,7 @@ 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 clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/rtk-js/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "create-catalyst-app-starter",
+    "name": "create-catalyst-app-internal-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.1-beta.46",
+        "@tata1mg/router": "^0.0.1-beta.7",
+        "catalyst-core": "0.0.3-canary.20",
         "@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/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-internal-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": "0.0.3-canary.20",
+        "@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";