create-catalyst-app-internal 0.0.1-beta.70 → 0.0.1-beta.72

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app-internal",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.1-beta.70",
+    "version": "0.0.1-beta.72",
     "description": "cli package to scaffold Catalyst application",
     "dependencies": {
         "commander": "^8.2.0",

package/templates/common/server/document.js

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

package/templates/mcp-root/mcp/context.md

@@ -17,6 +17,17 @@ CODE:
 npx create-catalyst-app@latest -y
 ```
 
+Catalyst has native support for typescript, tailwind, redux, and a local MCP server
+To configure these options, a new catalyst app can be created without using the default "-y" flag
+Creating an app using this will ask for prompts from the user to configure specific options
+
+LANGUAGE: bash
+CODE:
+
+```
+npx create-catalyst-app@latest
+```
+
 ---
 
 ---
@@ -39,6 +50,32 @@ npm run start
 
 ---
 
+TITLE: Building and serving the production version
+
+DESCRIPTION:
+
+-   To create an optimized production build of your Catalyst application, use the following command. This will generate the production-ready assets in the build directory.
+
+LANGUAGE: bash
+CODE:
+
+```
+npm run build
+```
+
+-   To serve the production build locally (for testing or preview), use the following command. This will start a server that serves your built application, typically on `http://localhost:3005`.
+
+LANGUAGE: bash
+CODE:
+
+```
+npm run serve
+```
+
+---
+
+---
+
 TITLE: Adding routes in catalyst
 
 DESCRIPTION:
@@ -154,7 +191,7 @@ CODE:
 
 ```
 Page.clientFetcher = async ({ route, location, params, searchParams, navigate }, { store }) => {
-  const res = await await fetch('<https://api.example.com/data>');
+  const res = await fetch('<https://api.example.com/data>');
   const json = await res.json();
   return json;
 };
@@ -166,7 +203,7 @@ LANGUAGE: js
 CODE:
 
 ```
-Page.serverFunction = async ({ route, location, params, searchParams, navigate },{ store }) => {
+Page.serverFetcher = async ({ route, location, params, searchParams, navigate },{ store }) => {
   const res = await fetch('<https://api.example.com/data>');
   const json = await res.json();
   return json;
@@ -507,3 +544,131 @@ module.exports = {
 ```
 
 ---
+
+---
+
+TITLE: State management
+
+DESCRIPTION:
+
+-   To address use cases where a global store is needed and must be accessible on both the client and server, Catalyst provides built-in support for Redux and Redux Toolkit
+-   The Redux store should be defined in src/js/store/index.js
+
+Redux integration demo
+
+LANGUAGE: js
+FILE: src/js/store/index.js
+CODE:
+
+```
+import { compose, createStore, applyMiddleware } from "redux"
+import homeReducer from "@reducers/homeReducer.js"
+
+export default function configureStore(initialState,request) {
+  // request object is available when the store is initialized on the server
+  // creating store with homeReducer and initialData recieved from server
+    const store = createStore(
+        homeReducer
+        initialState,
+    )
+    return store
+}
+```
+
+RTK integration demo
+
+LANGUAGE: js
+FILE: src/js/store/index.js
+CODE:
+
+```
+import { configureStore as createStore } from "@reduxjs/toolkit"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
+
+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
+
+```
+
+-   This store is available in both clientFetcher and serverFetcher
+
+LANGUAGE: js
+CODE:
+
+```
+HomePage.serverFetcher = async ({ req }, { store }) => {
+  dispatch(isLoading())
+  // returning async action
+  return dispatch(getHomePageData())
+}
+HomePage.clientFetcher = async ({ req }, { store }) => {
+  dispatch(isLoading())
+  // returning async action
+  return dispatch(getHomePageData())
+}
+```
+
+---
+
+---
+
+TITLE: Universal App
+
+DESCRIPTION:
+
+-   Catalyst also provides support to build native iOS/android applications
+-   This feature is currently only available in the canary version, setup the application using `npx create-catalyst-app@0.0.3-canary.6`
+
+To install the android simulator
+
+1. Download and install Android Studio
+2. Launch Android Studio
+3. From the welcome screen, click More Actions and select SDK Manager
+4. Navigate to Settings > Languages & Frameworks > Android SDK
+5. In the SDK Platforms tab:
+    - Select the latest Android version (API level)
+    - Make sure the box next to the selected version is checked
+6. Switch to the SDK Tools tab and ensure these components are installed:
+    - At least one version of Android SDK Build-Tools
+    - Android Emulator
+    - Android SDK Platform-Tools
+7. Important: Note down the Android SDK Location path displayed at the top
+    - You'll need this path for environment variables or other development tools
+8. Click Apply and then OK to begin the installation
+    - Wait for all selected components to download and install
+    - This may take several minutes depending on your internet connection
+
+To install the ios simulator
+
+1. Install Xcode
+2. Install Xcode Command Line Tools
+
+```
+# Check if already installed
+xcode-select -p
+
+# If not installed, run:
+xcode-select --install
+```
+
+-   To configure the android / iOS simulators, run `npm run setupEmulator:android` or `npm run setupEmulator:ios`
+-   To run the application, first start the development server `npm run start`
+-   Then in a new terminal, build the app using `npm run buildApp:android` or `npm run buildApp:ios`
+
+---

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

package/templates/none-js/package.json

@@ -20,7 +20,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14"
+        "catalyst-core-internal": "0.0.1-beta.66"
     },
     "devDependencies": {
         "eslint": "^8.26.0",

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

package/templates/none-ts/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14"
+        "catalyst-core-internal": "0.0.1-beta.66"
     },
     "devDependencies": {
         "eslint": "^8.26.0",

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

package/templates/redux-js/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14",
+        "catalyst-core-internal": "0.0.1-beta.66",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

package/templates/redux-ts/package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14",
+        "catalyst-core-internal": "0.0.1-beta.66",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

package/templates/rtk-js/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14",
+        "catalyst-core-internal": "0.0.1-beta.66",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

package/templates/rtk-ts/package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core": "0.0.1-beta.14",
+        "catalyst-core-internal": "0.0.1-beta.66",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

package/my-app/.eslintignore

@@ -1 +0,0 @@
-**/build/*

package/my-app/.eslintrc

@@ -1,28 +0,0 @@
-{
-    "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/my-app/README.md

@@ -1,25 +0,0 @@
-## Getting Started
-
-Commence development by initiating the the following commands:
-
-For running the application in development mode, run:
-
-```bash
-npm run start
-```
-
-For a production build, change NODE_ENV to "production" in config/config.json, then run :
-
-```bash
-npm run build
-```
-
-To serve the production build, execute:
-
-```bash
-npm run serve
-```
-
-## Documentation
-
-Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/my-app/api.js

@@ -1,16 +0,0 @@
-const fetchFunction = (url, options) => {
-    let baseURL = process.env.API_URL
-    let finalUrl = baseURL + url
-
-    // Request Interceptor -  modify request here
-
-    return fetch(finalUrl, options)
-        .then(response => {
-            return response.json().then(parsedResponse => {
-                // Response Interceptor -  modify response here
-                return parsedResponse
-            })
-        })
-}
-
-export default fetchFunction

package/my-app/client/index.js

@@ -1,23 +0,0 @@
-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/my-app/client/styles.js

@@ -1,3 +0,0 @@
-// Include initial base styles. Global styles will come here.
-
-import "@css/base/index.scss"

package/my-app/config/config.json

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