create-catalyst-app 0.0.1-beta.0

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

@@ -0,0 +1,27 @@
+import React from "react"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { Provider } from "react-redux"
+import { createBrowserRouter, RouterProvider } from "@tata1mg/router"
+import { preparedRoutes } from "../src/js/routes/index.js"
+import configureStore from "../src/js/store/index.js"
+import "./styles"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const store = configureStore(__INITIAL_STATE__ || {})
+        const router = createBrowserRouter(preparedRoutes({ 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-js/client/styles.js

@@ -0,0 +1,15 @@
+/* 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.
+import "normalize.css"
+import "@css/base/index.scss"

package/templates/redux-js/config/config.json

@@ -0,0 +1,15 @@
+{
+    "APPLICATION_PORT": "3005",
+    "APPLICATION_BASE_URL": "http://localhost:3005",
+    "SERVER_PATH": "http://localhost:3005",
+    "OUTPUT_PATH": "build",
+    "PUBLIC_OUTPUT_PATH": "build/public",
+    "PUBLIC_ASSET_PATH": "http://localhost:3006/assets/",
+    "LOCAL_ASSET_PATH": "/assets/",
+    "EXTERNAL_BASE_URL": "http://localhost:3005",
+    "DEV_SERVER_PORT": 3006,
+    "DEV_SERVER_HOSTNAME": "localhost",
+    "DEV_SERVER_HOST_URL": "http://localhost:3006",
+    "ENV_NAME": "local",
+    "BUILD_ENV": ""
+}

package/templates/redux-js/config/config_template.json

@@ -0,0 +1,18 @@
+{
+    "S3_BUCKET": "",
+    "S3_FOLDER": "",
+    "CDN_ASSET_PATH": "",
+    "APPLICATION_PORT": "",
+    "APPLICATION_BASE_URL": "",
+    "SERVER_PATH": "",
+    "OUTPUT_PATH": "",
+    "PUBLIC_OUTPUT_PATH": "",
+    "PUBLIC_ASSET_PATH": "",
+    "LOCAL_ASSET_PATH": "",
+    "EXTERNAL_BASE_URL": "",
+    "DEV_SERVER_PORT": 0,
+    "DEV_SERVER_HOSTNAME": "",
+    "DEV_SERVER_HOST_URL": "",
+    "ENV_NAME": "",
+    "BUILD_ENV": ""
+}

package/templates/redux-js/config/index.js

@@ -0,0 +1,44 @@
+module.exports = {
+    // Enable or disable server-side rendering
+    enableSSR: true,
+
+    // Enable or disable dynamic imports (code splitting)
+    enableDynamicImports: true,
+
+    // Enable or disable speed measure plugin to measure your webpack build speed
+    enableSpeedMeasure: false,
+
+    // The env vars to expose on the client side. If you add them here, they will
+    // be available on the client as process.env[VAR_NAME], same as they would be
+    // in node.js.
+    //
+    // **WARNING**: Be careful not to expose any secrets here!
+    clientEnv: [
+        "NODE_ENV",
+        "APPLICATION_BASE_URL",
+        "LOCAL_ASSET_PATH",
+        "INTERNAL_NODE_API_URL",
+        "BUILD_ENV",
+        "EXTERNAL_BASE_URL",
+        "SERVER_PATH",
+        "ENV_NAME",
+        "src_path"
+    ],
+
+    /* The identifier to use for css-modules.
+     */
+    cssModulesIdentifierProd: "[name]__[local]__[hash:base64:5]",
+    cssModulesIdentifierDev: "[name]__[local]",
+
+    // Isomorphic configuration
+    isomorphicConfig: {
+        debug: true,
+
+        assets: {
+            images: {
+                extensions: ["png", "jpg", "jpeg", "gif", "ico", "svg", "json"],
+            },
+        },
+    },
+    
+}

package/templates/redux-js/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "description": "This README would normally document whatever steps are necessary to get your application up and running.",
+    "main": "index.js",
+    "bin": "scripts/cli.mjs",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "catalyst build",
+        "serve": "catalyst serve"
+    },
+    "_moduleAliases": {
+        "@containers": "src/js/containers",
+        "@lib": "src/js/lib",
+        "$server": "server",
+        "@constants": "src/js/constants",
+        "@config": "config",
+        "@components": "src/js/components",
+        "@css": "src/static/css"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/tata1mg/catalyst"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "^0.0.1-alpha.13",
+        "catalyst-core":"0.0.1-beta.1",
+        "event-source-polyfill": "^1.0.31",
+        "express-static-gzip": "^2.1.7",
+        "framer-motion": "^10.18.0",
+        "isomorphic-dompurify": "^2.2.0",
+        "normalize.css": "^8.0.1",
+        "prop-types": "^15.8.1",
+        "pwa": "git+git@bitbucket.org:tata1mg/catalyst.git#framework-scaffolding",
+        "react-dfp": "^0.21.0",
+        "react-helmet-async":"^1.3.0",
+        "react-intersection-observer": "^9.5.3",
+        "react-loadable-visibility": "^3.0.2",
+        "react-redux": "^8.1.3",
+        "@reduxjs/toolkit": "1.9.3"
+    },
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/tata1mg/catalyst/issues"
+    },
+    "homepage": "https://github.com/tata1mg/catalyst#readme",
+    "devDependencies": {
+        "@babel/core": "^7.23.7",
+        "@babel/node": "^7.22.19"
+    }
+}

package/templates/redux-js/server/document.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { Head, Body } from "catalyst-core"
+
+function Document(props) {
+    return (
+        <html lang={props.lang}>
+            <Head {...props}>
+                <meta charset="final-order" />
+            </Head>
+            <Body {...props} />
+        </html>
+    )
+}
+export default Document

package/templates/redux-js/server/index.js

@@ -0,0 +1,3 @@
+export const preServerInit = () => {
+    console.log("preServerInit")
+}

package/templates/redux-js/server/server.js

@@ -0,0 +1,16 @@
+export function addMiddlewares(app) {
+    const env = process.env.NODE_ENV || "development"
+    console.log("custom server called !!!!")
+
+    app.use("/pwa-api/service-worker.js", (req, res, next) => {
+
+        res.send("ok")
+    })
+    app.use(
+        "/favicon.ico",
+        (req, res, next) => {
+
+            res.send("ok")
+        }
+    )
+}

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

@@ -0,0 +1,20 @@
+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-js/src/js/containers/App/index.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import {
+  useLocation,
+  useOutlet,
+  UNSAFE_LocationContext,
+} from "react-router-dom";
+import {reduxTest} from "./actions"
+import "@css/base/index.scss";
+
+
+export const BaseOutlet = () => {
+  const o = useOutlet();
+  const [outlet] = useState(o);
+
+  return <>{outlet}</>;
+};
+const App = () => {
+  
+  const location = useLocation();
+  const page = (
+    <div key={location.pathname.includes("/auth") ? "" : location.pathname}>
+      <UNSAFE_LocationContext.Provider value={{ location }}>
+        <BaseOutlet />
+      </UNSAFE_LocationContext.Provider>
+    </div>
+  );
+  return (
+        <div className={"flexColumn"}>
+          <>
+              {/* <ShellLocusHeader /> */}
+          </>
+          <div>{page}</div>
+        </div>
+  );
+};
+
+App.serverSideFunction = ({store}) => {
+  store.dispatch(reduxTest())
+  return new Promise((resolve) => resolve());
+};
+
+export default App;

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

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

package/templates/redux-js/src/js/containers/DemoPage/DemoPage.js

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import { useCurrentRouteData, Link } from "@tata1mg/router";
+import css from './DemoPage.scss'
+
+const Demo = () => {
+    const { data, isFetched, loading } = useCurrentRouteData() || {}
+    
+    useEffect(() => {
+        console.log("data is =>", data)
+    })
+
+    return (
+
+        <div>
+            <div className={css.textColor}>Welcome to Demo page</div>
+            <Link to={"/"}>link</Link>
+        </div>
+    );
+};
+
+Demo.serverFetcher = async ({ req }, { store }) => {
+    console.log("server fetcher called!!")
+    const res = await fetch("https://jsonblob.com/api/1206830251241234432");
+    const json = await res.json();
+    return json;
+};
+
+Demo.clientFetcher = async ({ }, { }) => {
+    console.log("client fetcher called")
+    const res = await fetch("https://jsonblob.com/api/1206830251241234432");
+    const json = await res.json();
+    return json;
+};
+
+Demo.MetaTagFunction = (routerData) => {
+    return [<title key="PDP">PDP</title>]
+};
+
+export default Demo;

package/templates/redux-js/src/js/containers/DemoPage/DemoPage.scss

@@ -0,0 +1,3 @@
+.textColor {
+    color: orange;
+}

package/templates/redux-js/src/js/containers/Home/Home.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Link } from "@tata1mg/router";
+import css from './Home.scss'
+
+function Landing() {
+    return (
+        <div className={css.app}>
+        <header className={css.appHeader}>
+          <h1 className={css.heading}>Catalyst</h1>
+          <p>
+            Edit files inside src directory and save to reload.
+          </p>
+          <a
+            className={css.appLink}
+            href="https://catalyst.1mg.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn Catalyst
+          </a>
+          <Link to="/demo" className={css.appLink}>Navigate to demo page</Link>
+        </header>
+      </div>
+    )
+}
+
+export default Landing

package/templates/redux-js/src/js/containers/Home/Home.scss

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

package/templates/redux-js/src/js/reducer/index.js

@@ -0,0 +1,80 @@
+import { combineReducers } from "redux"
+// Import your reducers here
+
+import shellReducer from "@containers/App/reducer"
+
+/**
+ * @description A 'Reducer Manager' object, which keeps track of all the registered reducers and exposes a reduce() function. For detailed info :- https://redux.js.org/usage/code-splitting#using-a-reducer-manager
+ */
+
+function createReducerManager() {
+    // FRAMEWORK COMMENT THIS SHOULD BE EXPOSED TO USER
+    // Create an object which maps keys to reducers
+    const reducers = {
+        shellReducer,
+    }
+
+    // Create the initial combinedReducer
+    let reducerObj = combineReducers(reducers)
+
+    // An array which is used to delete state keys when reducers are removed
+    let keysToRemove = []
+
+    return {
+        getReducerMap: () => combineReducers(reducers),
+        // The root reducer function exposed by this object
+
+        // This will be passed to the store
+        reduce: (state, action) => {
+            // If any reducers have been removed, clean up their state first
+            if (keysToRemove.length > 0) {
+                state = { ...state }
+                for (let key of keysToRemove) {
+                    delete state[key]
+                }
+                keysToRemove = []
+            }
+
+            // Delegate to the combined reducer
+            return reducerObj(state, action)
+        },
+
+        // Adds a new reducer with the specified key
+        add: (reducer) => {
+            for (let key in reducer) {
+                if (!key) {
+                    return
+                }
+
+                // We will skip a step if the reducer is already present
+                if (reducers[key]) {
+                    continue
+                }
+
+                // Add the reducer to the reducer mapping
+                reducers[key] = reducer[key]
+            }
+
+            // Generate a new combined reducer
+            return combineReducers(reducers)
+        },
+
+        // Removes a reducer with the specified key
+        remove: (key) => {
+            if (!key || !reducers[key]) {
+                return
+            }
+
+            // Remove it from the reducer mapping
+            delete reducers[key]
+
+            // Add the key to the list of keys to clean up
+            keysToRemove.push(key)
+
+            // Generate a new combined reducer
+            return combineReducers(reducers)
+        },
+    }
+}
+
+export default createReducerManager

package/templates/redux-js/src/js/routes/index.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { RouterDataProvider, MetaTag } from "@tata1mg/router";
+import Home from "@containers/Home/Home";
+import App from "@containers/App";
+import Demo from "@containers/DemoPage/DemoPage"
+
+const routes = [
+  {
+    path: "/",
+    end: true,
+    component: Home,
+  },
+  {
+    path:"/demo",
+    end:true,
+    component: Demo
+  }
+];
+const getRoutes = () => {
+  return routes;
+};
+
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ */
+export const preparedRoutes = ({store,routerInitialState}) => {
+  
+  return ([
+  {
+    element: (
+      <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{store}} >
+      <MetaTag/>
+      <App />
+      </RouterDataProvider>
+    ),
+    children: getRoutes()?.map((route, index) => {
+      const Component = route.component;
+      // const pageType = route.staticPageType ? route.staticPageType : null
+      return {
+        ...route,
+        element: <Component key={index} />,
+      };
+    }),
+  },
+])
+}
+
+export default getRoutes;

package/templates/redux-js/src/js/stateManager/stateProvider.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Provider } from "react-redux";
+import configureStore from "../store";
+
+const ClientProvider = ({ children }) => {
+  const { __INITIAL_STATE__ } = window;
+
+  let store = configureStore(__INITIAL_STATE__);
+  return (
+    <Provider store={store} serverState={__INITIAL_STATE__}>
+      {children}
+    </Provider>
+  );
+};
+
+const ServerProvider = ({ store, children }) => {
+  return <Provider store={store}>{children}</Provider>; //on server
+};
+
+
+const serverStore = (initialState,req) => {
+  // will create a new store on server and this store would be available in server provider
+  return configureStore(initialState, req);
+};
+
+const hydrateClient = (serverStore) => {
+  const state = serverStore.getState();
+
+  return <script>{`window.__INITIAL_STATE__ = ${state} `}</script>;
+};
+
+// will be calling hydrate client in the template wrapper
+
+export { ClientProvider, ServerProvider, hydrateClient, serverStore };

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

@@ -0,0 +1,79 @@
+import { compose, applyMiddleware,combineReducers } from "redux"
+import  {configureStore as createStore}  from "@reduxjs/toolkit"
+import thunk from "redux-thunk"
+import { createLogger } from "redux-logger"
+import shellReducer from "@containers/App/reducer.js"
+import createReducerManager from "../reducer/index.js"
+import fetchInstance from "../../../api.js"
+/**
+ * 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} cookies    additional headers if needed
+ * @param    {object} requestObj    additional information
+ * @return   {object} the store itself
+ */
+
+process.env.NODE_ENV === "production"
+
+export default function configureStore(initialState, request) {
+    
+    // The variable defined below acts as a flag when the store is initialized on the client side
+    // Reason being that for the first time we need to actually need to forcefully set the reducer for which we have the initial data
+    let initializeClient = true
+
+    const reducerManager = createReducerManager()
+
+    // FRAMEWORK COMMENT. This should be exposed to user.
+    const api = fetchInstance
+    
+
+    // disable redux-logger in server - https://github.com/LogRocket/redux-logger/issues/6
+    const reduxLogger = createLogger({
+        predicate: () => typeof window !== "undefined",
+    })
+    const addReducer = (reducer) => {
+        // Only executed once when for the first run in client - side
+        if (initializeClient) {
+            initializeClient = false
+            return store.replaceReducer(reducerManager.add(reducer))
+        }
+
+        // This blocks check if the reducer is already added or not in store
+        // If not then it only add the missing reducers
+        // And if the required reducers are already present then we simply return without performing any change
+        let reducerToAdd = {}
+        const currentState = store.getState()
+        for (let key in reducer) {
+            if (!currentState[key]) {
+                reducerToAdd[key] = reducer[key]
+            }
+        }
+        if (Object.keys(reducerToAdd).length > 0) {
+            return store.replaceReducer(reducerManager.add(reducerToAdd))
+        }
+        return
+    }
+    let middleware = [thunk.withExtraArgument({ api, addReducer })]
+    if(process.env.NODE_ENV !== "production"){
+        middleware = [...middleware,reduxLogger]
+    }
+    // Add universal enhancers here
+    let enhancers = []
+
+    const composeEnhancers = process.env.NODE_ENV === "production" && (typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
+    const enhancer = composeEnhancers(...[applyMiddleware(...middleware), ...enhancers])
+
+    // create store with enhancers, middleware, reducers, and initialState
+    // When the store is initialized on the client side, we are passing a function that just returns the initial State from the server
+    // This is way we are able to maintain the initial state from the server on the client side and then add the relevant reducers
+    // Which then consumes the initial state
+    const store = createStore({
+        reducer:combineReducers({shellReducer}),
+        preloadedState:initialState
+    })
+
+
+    return store
+}
+
+

package/templates/redux-js/src/static/css/base/index.scss

@@ -0,0 +1,3 @@
+
+@import "styles";
+@import "../resources/variables";

package/templates/redux-js/src/static/css/base/styles.scss

@@ -0,0 +1,11 @@
+html {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    font-family: Inter, Poppins, Avenir, "Century Gothic", Arial, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0;
+}