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

package/templates/rtk-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 = ({ 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
+}

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

@@ -0,0 +1,28 @@
+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} 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 }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
+    })
+    return store
+}
+
+export default configureStore

package/templates/rtk-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/rtk-ts/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+    const classes: { [key: string]: string }
+    export default classes
+}

package/templates/tailwind/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+}

package/templates/tailwind/src/static/css/base/index.scss

@@ -0,0 +1,2 @@
+@import "styles";
+@import "tailwindcss";

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/styles.js

@@ -1,14 +0,0 @@
-/* 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 "@css/base/index.scss"

package/my-app/config/config.json

@@ -1,15 +0,0 @@
-{
-    "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/my-app/config/config_template.json

@@ -1,18 +0,0 @@
-{
-    "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/my-app/config/index.js

@@ -1,44 +0,0 @@
-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/my-app/package.json

@@ -1,28 +0,0 @@
-{
-    "name": "my-app",
-    "version": "1.0.0",
-    "description": "wefdver",
-    "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",
-        "@routes": "src/js/routes/index.js",
-        "@store": "src/js/store/index.js"
-    },
-    "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@reduxjs/toolkit": "1.9.3",
-        "@tata1mg/router": "^0.0.1-alpha.13",
-        "catalyst-core": "0.0.1-beta.1",
-        "react-redux": "^8.1.3"
-    }
-}

package/my-app/server/document.js

@@ -1,14 +0,0 @@
-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/my-app/server/index.js

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

package/my-app/server/server.js

@@ -1,3 +0,0 @@
-export function addMiddlewares(app) {
-    
-}

package/my-app/src/js/containers/App/index.js

@@ -1,16 +0,0 @@
-import React, { useState } from "react"
-import { useOutlet } from "@tata1mg/router"
-import { reduxTest } from "./reducer"
-const App = () => {
-    const o = useOutlet()
-    const [outlet] = useState(o)
-
-    return <>{outlet}</>
-}
-
-App.serverSideFunction = ({store}) => {
-  store.dispatch(reduxTest())
-  return new Promise((resolve) => resolve())
-}
-
-export default App

package/my-app/src/js/containers/DemoPage/DemoPage.js

@@ -1,39 +0,0 @@
-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/my-app/src/js/containers/DemoPage/DemoPage.scss

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

package/my-app/src/js/containers/Home/Home.js

@@ -1,25 +0,0 @@
-import React from 'react'
-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>
-        </header>
-      </div>
-    )
-}
-
-export default Landing

package/my-app/src/js/containers/Home/Home.scss

@@ -1,36 +0,0 @@
-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/my-app/src/js/reducer/index.js

@@ -1,80 +0,0 @@
-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