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

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

@@ -1,24 +1,20 @@
 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"
 
 window.addEventListener("load", () => {
     loadableReady(() => {
         const { __ROUTER_INITIAL_DATA__: routerInitialData } = window
-        
-        const router = createBrowserRouter(preparedRoutes({ store:{}, routerInitialState: routerInitialData }))
+
+        const router = clientRouter({ routerInitialState: routerInitialData })
 
         const Application = (
-            
-                <React.StrictMode>
-                    <RouterProvider router={router} />
-                </React.StrictMode>
-        
+            <React.StrictMode>
+                <RouterProvider router={router} />
+            </React.StrictMode>
         )
 
         const container = document.getElementById("app")

package/templates/none-js/package.json

@@ -1,52 +1,30 @@
 {
     "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"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_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/"
     },
     "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"
+        "@tata1mg/router": "^0.0.1-beta.7",
+        "catalyst-core": "0.0.1-beta.14"
     },
-    "homepage": "https://github.com/tata1mg/catalyst#readme",
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/node": "^7.22.19"
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -1,40 +1,16 @@
-import React, { useState } from "react";
-import {
-  useLocation,
-  useOutlet,
-  UNSAFE_LocationContext,
-} from "react-router-dom";
-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}) => {
-  return new Promise((resolve) => resolve());
-};
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
 
-export default App;
+export default App

package/templates/none-js/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/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,34 @@
+{
+    "name": "create-catalyst-app-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",
+        "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.1-beta.14"
+    },
+    "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

@@ -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/redux-js/package.json

@@ -1,52 +1,33 @@
 {
     "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"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_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"
+        "@tata1mg/router": "^0.0.1-beta.7",
+        "catalyst-core": "0.0.1-beta.14",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
     },
-    "homepage": "https://github.com/tata1mg/catalyst#readme",
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/node": "^7.22.19"
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

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

@@ -9,11 +9,8 @@ const createActionTypes = (prefix, actionTypeList = []) => {
 
 export default createActionTypes
 
-export const ShellActions = createActionTypes("shellActions", [
-    "REDUX_TEST"
-])
+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

@@ -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,19 @@
-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,
-      };
-    }
-
-    default:
-      return state;
-  }
-};
+export const shellReducer = (state = defaultState, action) => {
+    switch (action.type) {
+        case ShellActions.REDUX_TEST: {
+            return {
+                ...state,
+                testActionDispatched: true,
+            }
+        }
 
-export default shellReducer;
+        default:
+            return state
+    }
+}

package/templates/redux-js/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
+}