create-catalyst-app 0.0.1-beta.0

package/templates/redux-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/redux-js/src/static/css/resources/_variables.scss

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

package/templates/redux-js/webpackConfig.js

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

package/templates/rtk-js/.babelrc

@@ -0,0 +1,26 @@
+{
+     "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/templates/rtk-js/.eslintignore

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

package/templates/rtk-js/.eslintrc

@@ -0,0 +1,53 @@
+{
+    "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", "plugin:prettier/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/templates/rtk-js/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "arrowParens": "always",
+    "printWidth": 110
+}

package/templates/rtk-js/.stylelintrc

@@ -0,0 +1,35 @@
+{
+    "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/templates/rtk-js/README.md

@@ -0,0 +1,23 @@
+## 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/templates/rtk-js/api.js

@@ -0,0 +1,29 @@
+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/templates/rtk-js/checkVersion.js

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

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

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

package/templates/rtk-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/rtk-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 "./reducer.js"
+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/rtk-js/src/js/containers/App/reducer.js

@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    testActionDispatched: false,
+}
+
+export const appSlice = createSlice({
+    name: "shellReducer",
+    initialState: initialState,
+    reducers: {
+        reduxTest: (state, action) => {
+            state.testActionDispatched = true
+        },
+    },
+})
+
+export const { reduxTest } = appSlice.actions
+export const shellReducer = appSlice.reducer
+
+
+
+
+
+
+
+

package/templates/rtk-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/rtk-js/src/js/containers/DemoPage/DemoPage.scss

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

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