create-catalyst-app 0.0.1-beta.0

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

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

package/templates/none-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/none-js/src/js/containers/App/index.js

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

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

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

package/templates/none-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/none-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/none-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/none-js/src/js/stateManager/stateProvider.js

@@ -0,0 +1,19 @@
+import React from "react";
+import configureStore from "../store";
+
+
+
+const ServerProvider = ({children}) => {
+  return <>{children}</>;
+};
+
+
+const serverStore = (initialState,req) => {
+  // will create a new store on server and this store would be available in server provider
+  return configureStore(initialState, req);
+};
+
+
+// will be calling hydrate client in the template wrapper
+
+export { ServerProvider, serverStore };

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

@@ -0,0 +1,6 @@
+
+export default function configureStore() {
+    return {getState: ()=> {}}
+}
+
+

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

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

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

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

package/templates/none-js/webpackConfig.js

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

package/templates/redux-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/redux-js/.eslintignore

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

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

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

package/templates/redux-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/redux-js/README.md

@@ -0,0 +1,22 @@
+## 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/redux-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/redux-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');
+}