create-catalyst-app 0.0.1-beta.2 → 0.0.1-beta.3

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

@@ -1,42 +1,16 @@
-import React, { useState } from "react";
-import {
-  useLocation,
-  useOutlet,
-  UNSAFE_LocationContext,
-} from "react-router-dom";
-import {reduxTest} from "./actions"
-import "@css/base/index.scss";
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-
-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>
-  );
-};
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
 
-App.serverSideFunction = ({store}) => {
-  store.dispatch(reduxTest())
-  return new Promise((resolve) => resolve());
-};
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
 
-export default App;
+export default App

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

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

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

@@ -0,0 +1,28 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+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
+                return {
+                    ...route,
+                    element: <Component key={index} />,
+                }
+            }),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

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

@@ -1,79 +1,28 @@
-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"
+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} cookies    additional headers if needed
- * @param    {object} requestObj    additional information
- * @return   {object} the store itself
+ * @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
  */
 
-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 configureStore = (initialState) => {
     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
+        reducer: combineReducers({ shellReducer }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
     })
-
-
     return store
 }
 
-
+export default configureStore

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

@@ -1,17 +1,18 @@
 import React from "react"
+import "./styles"
 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"
+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 = createBrowserRouter(preparedRoutes({ store, routerInitialState: routerInitialData }))
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
 
         const Application = (
             <Provider store={store} serverState={__INITIAL_STATE__}>

package/templates/rtk-js/package.json

@@ -1,52 +1,25 @@
 {
     "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": {
+        "@api": "api.js",
         "@containers": "src/js/containers",
-        "@lib": "src/js/lib",
-        "$server": "server",
-        "@constants": "src/js/constants",
+        "@server": "server",
         "@config": "config",
-        "@components": "src/js/components",
-        "@css": "src/static/css"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/tata1mg/catalyst"
+        "@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-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",
-            "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"
+        "@tata1mg/router": "^0.0.1-beta.0",
+        "catalyst-core": "^0.0.1-beta.3",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
     }
 }

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

@@ -1,42 +1,16 @@
-import React, { useState } from "react";
-import {
-  useLocation,
-  useOutlet,
-  UNSAFE_LocationContext,
-} from "react-router-dom";
-import {reduxTest} from "./reducer.js"
-import "@css/base/index.scss";
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-
-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>
-  );
-};
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
 
-App.serverSideFunction = ({store}) => {
-  store.dispatch(reduxTest())
-  return new Promise((resolve) => resolve());
-};
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
 
-export default App;
+export default App

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

@@ -8,7 +8,7 @@ export const appSlice = createSlice({
     name: "shellReducer",
     initialState: initialState,
     reducers: {
-        reduxTest: (state, action) => {
+        reduxTest: (state) => {
             state.testActionDispatched = true
         },
     },
@@ -16,11 +16,3 @@ export const appSlice = createSlice({
 
 export const { reduxTest } = appSlice.actions
 export const shellReducer = appSlice.reducer
-
-
-
-
-
-
-
-

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

@@ -0,0 +1,28 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+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
+                return {
+                    ...route,
+                    element: <Component key={index} />,
+                }
+            }),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

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

@@ -1,12 +1,19 @@
 import { configureStore as createStore } from "@reduxjs/toolkit"
-import {combineReducers} from "redux"
-import {shellReducer} from "@containers/App/reducer.js"
-import fetchInstance from "../../../api"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
 
-const configureStore = (initialState,request) => {
+/**
+ * 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}),
+        reducer: combineReducers({ shellReducer }),
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({
                 thunk: {
@@ -18,5 +25,4 @@ const configureStore = (initialState,request) => {
     return store
 }
 
-
 export default configureStore

package/my-app/.babelrc

@@ -1,26 +0,0 @@
-{
-     "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "targets": {
-                    "node": "current"
-                },
-            },
-        ],
-        "@babel/preset-react"
-    ],
-                "plugins": [
-                    "@babel/plugin-proposal-object-rest-spread",
-                    "transform-es2015-modules-commonjs",
-                    "transform-class-properties",
-                    "dynamic-import-node",
-                    "@loadable/babel-plugin"
-                ],
-    "env": {
-        "test": {
-            "presets": ["@babel/preset-react"]
-        }
-    },
-     "ignore": ["__TEST__"]
-}

package/my-app/.eslintignore

@@ -1,6 +0,0 @@
-**/node_modules/*
-**/dist/*
-**/build/*
-**/coverage/*
-**/eventScripts/*
-**/docs/*

package/my-app/.eslintrc

@@ -1,53 +0,0 @@
-{
-    "parser": "@babel/eslint-parser",
-    "rules": {
-        "prettier/prettier": "error",
-        "no-console": "warn",
-        "react/prop-types": 1,
-        "react/display-name": [0, { "ignoreTranspilerName": true }],
-        "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-        "no-prototype-builtins": "off",
-        "jam3/no-sanitizer-with-danger": 2,
-        "react/jsx-no-target-blank": [0, {
-            "enforceDynamicLinks": "never"
-        }]
-    },
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jest": true,
-        "node": true
-    },
-    "globals": {
-        "expect": true,
-        "__non_webpack_require__": true,
-        "logger": "readonly",
-        "AppCallbacks": "readonly"
-    },
-    "extends": ["eslint:recommended", "plugin:react/recommended"],
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true
-        },
-        "babelOptions": {
-            "configFile": "./babel.config.js"
-        },
-        "ecmaVersion": 6
-    },
-    "plugins": ["babel", "react", "react-hooks", "prettier", "jam3"],
-    "settings": {
-        "react": {
-            "createClass": "createReactClass",
-            "pragma": "React",
-            "version": "detect"
-        },
-        "propWrapperFunctions": [
-            "forbidExtraProps",
-            { "property": "freeze", "object": "Object" },
-            { "property": "myFavoriteWrapper" }
-        ],
-        "linkComponents": ["Hyperlink", { "name": "Link", "linkAttribute": "to" }]
-    }
-}

package/my-app/.stylelintrc

@@ -1,35 +0,0 @@
-{
-    "extends": [
-        "stylelint-config-standard-scss",
-        "stylelint-config-prettier-scss",
-        "stylelint-config-css-modules"
-    ],
-    "plugins": ["stylelint-prettier"],
-    "rules": {
-        "property-no-vendor-prefix":null,
-        "scss/function-no-unknown": null,
-        "selector-class-pattern": null,
-        "prettier/prettier": true,
-        "color-no-invalid-hex": true,
-        "comment-empty-line-before": ["always", { "ignore": ["stylelint-commands", "after-comment"] }],
-        "indentation": 4,
-        "number-leading-zero": null,
-        "max-empty-lines": 2,
-        "declaration-no-important": true,
-        "block-no-empty": true,
-        "no-empty-source": null,
-        "selector-pseudo-class-no-unknown": null,
-        "selector-type-no-unknown": null,
-        "rule-empty-line-before": ["always", { "except": ["first-nested"], "ignore": ["after-comment"] }],
-        "declaration-property-unit-allowed-list": {
-            "/.*/": ["em", "rem", "%", "s", "vh", "vw", "px", "deg", "ms", "dpi", "dvh", "fr"]
-        },
-        "at-rule-no-unknown": null,
-        "scss/double-slash-comment-whitespace-inside": null,
-        "scss/at-mixin-pattern": null,
-        "scss/dollar-variable-pattern": null,
-        "selector-id-pattern": null,
-        "keyframes-name-pattern": null,
-        "selector-pseudo-element-no-unknown": null
-    }
-}

package/my-app/README.md

@@ -1,23 +0,0 @@
-## Getting Started
-Commence development by initiating the application in development mode with the following commands:
-
-For running the application in development mode, run:
-
-```bash
-npm run start
-```
-
-For a production build, utilize:
-
-```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,29 +0,0 @@
-const apiInstance = () => {
-    const fetchFunction = async (url, options) => {
-        let baseURL = process.env.API_URL
-        let finalUrl = baseURL + url
-
-        // Request Interceptor - you can modify request here
-
-        
-        // Add query params if exist
-        if (Object.keys(options?.params).length > 0) {
-            finalUrl = url + "?" + new URLSearchParams(options.params)
-        }
-
-        return fetch(finalUrl, options)
-            .then(async (response) => {
-                const parsedResponse = await response.json()
-                // Response Interceptor - you can modify response here
-                return parsedResponse
-            });
-    }
-    return {
-        get: fetchFunction,
-        post: fetchFunction,
-        delete: fetchFunction,
-        patch: fetchFunction,
-        put: fetchFunction
-    }
-}
-export default { apiInstance }

package/my-app/checkVersion.js

@@ -1,3 +0,0 @@
-if(process.versions.node.split(".")[0]<20){
-    console.error('\x1b[31m%s\x1b[0m', 'use node version >=20');
-}

package/my-app/client/index.js

@@ -1,27 +0,0 @@
-import React from "react"
-import "./styles"
-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 "@routes"
-import configureStore from "@store"
-
-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)
-    })
-})