create-catalyst-app 0.0.1-beta.0

package/templates/rtk-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/rtk-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/rtk-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/rtk-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/rtk-js/src/js/store/index.js

@@ -0,0 +1,22 @@
+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,request) => {
+    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-js/src/static/css/base/index.scss

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

package/templates/rtk-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;
+}

package/templates/rtk-js/src/static/css/base/typography.scss

@@ -0,0 +1,53 @@
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 300;
+    font-display: block;
+    src: local("Inter Light"), local("Inter-Light"), url($font_url + "Inter-Light-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: local("Inter Regular"), local("Inter-Regular"), url($font_url + "Inter-Regular-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 400;
+    font-display: block;
+    src: local("Inter Italic"), local("Inter-Italic"), url($font_url + "Inter-Italic-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: local("Inter Medium"), local("Inter-Medium"), url($font_url + "Inter-Medium-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: local("Inter SemiBold"), local("Inter-SemiBold"), url($font_url + "Inter-SemiBold-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+    src: local("Inter Bold"), local("Inter-Bold"), url($font_url + "Inter-Bold-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}

package/templates/rtk-js/src/static/css/resources/_variables.scss

@@ -0,0 +1 @@
+$sample-css-variable: #ff6f61;

package/templates/rtk-js/webpackConfig.js

@@ -0,0 +1,5 @@
+module.exports = {
+    developmentPlugins: [],
+    ssrPrugins: [],
+    clientPlugins: [],
+}