create-catalyst-app-internal 0.0.1-beta.7 → 0.0.1-beta.70

package/Readme.md

@@ -0,0 +1,56 @@
+# Creating a Catalyst App
+
+Scaffold your Catalyst app swiftly with `create-catalyst-app`. This tool expedites the process by initializing your project with predefined configurations. To kickstart your project, execute the following command:
+
+```bash
+npx create-catalyst-app@latest
+```
+
+Upon execution, you'll be prompted to name your project. Once named, a template will be cloned into the specified directory.
+
+```bash
+✔ What is your project named? my-app
+```
+
+Next, select your preferred state management tool from the provided options.
+
+```bash
+? Choose state management: › - Use arrow-keys. Return to submit .
+❯   Redux
+    Redux Toolkit (RTK)
+    None
+```
+
+Following your selection, a default template will be cloned into the directory, and all necessary packages will be installed.
+
+## Getting Started
+
+Commence development by initiating the application in development mode with the following commands:
+
+Navigate into the directory
+
+```bash
+cd my-app
+```
+
+For running the application in development mode, run:
+
+```bash
+npm run start
+```
+
+For a production build, change NODE_ENV to "production" in config/config.json, and then run :
+
+```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/codemod/new-route/index.js

@@ -0,0 +1,98 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+const prompts = require('prompts');
+const { program } = require('commander');
+
+const { createNewComponent, createRTKReducerFile, createReduxActionFile, createReduxReducerFile } = require("./template")
+const { validateComponentName, validatePath, discardChanges, createDirectory, createReducerEntryInStore, createNewRoute, toCamelCase, checkIfRoutePathExist } = require("./utils")
+
+// Configure commander to accept CLI options
+program
+    .option('-p, --path <path>', 'Path for the new route')
+    .option('-c, --component <component>', 'Component name for the new route')
+    .parse(process.argv);
+
+
+async function main() {
+    let { routePath, templateType, componentName } = program;
+
+    // If all options are not provided, prompt the user for input
+    if (!routePath || !componentName || !templateType) {
+        const response = await prompts([
+            {
+                type: "select",
+                name: "templateType",
+                message: "Choose state management template being used:",
+                choices: [
+                    { title: "Redux", value: "redux" },
+                    { title: "Redux Toolkit (RTK)", value: "rtk" },
+                    { title: "None", value: "none" },
+                ],
+            },
+            {
+                type: routePath ? null : 'text',
+                name: 'routePath',
+                message: "Enter the route path",
+                validate: validatePath
+            },
+            {
+                type: componentName ? null : 'text',
+                name: 'componentName',
+                message: 'Enter the component name for new route',
+                validate: validateComponentName
+            }
+        ]);
+
+        routePath = routePath || response.routePath;
+        templateType = templateType || response.templateType
+        componentName = componentName || response.componentName;
+    }
+
+
+    // Code transformations
+    if (componentName && routePath && templateType) {
+
+        const reducerName = toCamelCase(componentName)
+        const containersDir = 'src/js/containers';
+        const routeTransformerPath = path.join(__dirname, "./", 'transformers/createRoute.js')
+        const reducerTransformerPath = path.join(__dirname, "./", 'transformers/createReducer.js');
+
+        const funcArgs = { containersDir, componentName, routePath, reducerName, templateType, reducerTransformerPath, routeTransformerPath }
+
+        // create directory 
+        if (createDirectory(funcArgs)) {
+
+            try {
+
+                checkIfRoutePathExist(funcArgs)
+
+                if (templateType === "none") {
+                    createNewComponent(funcArgs)
+                }
+
+                if (templateType === "redux") {
+                    createNewComponent(funcArgs)
+                    createReduxActionFile(funcArgs)
+                    createReduxReducerFile(funcArgs)
+                    createReducerEntryInStore(funcArgs)
+                }
+
+                if (templateType === "rtk") {
+                    createNewComponent(funcArgs)
+                    createRTKReducerFile(funcArgs)
+                    createReducerEntryInStore(funcArgs)
+                }
+
+                createNewRoute(funcArgs);
+
+            } catch (e) {
+                discardChanges(funcArgs)
+                console.log(pc.red(`\n${e}`))
+            }
+        }
+
+    }
+}
+
+main();

package/codemod/new-route/template.js

@@ -0,0 +1,119 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+
+// Function to create component using given input
+function createNewComponent({ componentName, containersDir }) {
+
+    const componentPath = path.join(containersDir, `${componentName}/${componentName}.js`);
+
+    // Component template
+    const componentTemplate = `import React from 'react';
+  
+  const ${componentName} = () => {
+    return (
+      <div>
+        <h1>${componentName}</h1>
+        <p>This is the ${componentName} component.</p>
+      </div>
+    );
+  };
+  
+  export default ${componentName};
+  `;
+
+    fs.writeFileSync(componentPath, componentTemplate, 'utf8');
+    console.log(`\n${pc.cyan(componentName)} component created at ${pc.gray(componentPath)}`);
+}
+
+
+// Function to create rtk reducer file using given input
+function createRTKReducerFile({ componentName, containersDir, reducerName }) {
+    const reducerPath = path.join(containersDir, `${componentName}/reducer.js`);
+
+    // rtk reducer template
+    const reducerTemplate = `import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    testActionDispatched: false,
+}
+
+export const appSlice = createSlice({
+    name: ${reducerName}Reducer,
+    initialState: initialState,
+    reducers: {
+        reduxTest: (state) => {
+            state.testActionDispatched = true
+        },
+    },
+})
+
+export const { reduxTest } = appSlice.actions
+export const ${reducerName}Reducer = appSlice.reducer
+`;
+
+    fs.writeFileSync(reducerPath, reducerTemplate, 'utf8');
+    console.log(`\n${pc.cyan("reducer.js")} file created at ${pc.gray(reducerPath)} `);
+}
+
+
+// Function to create redux action file using given input
+function createReduxActionFile({ componentName, containersDir, reducerName }) {
+    const actionsPath = path.join(containersDir, `${componentName}/actions.js`);
+
+    // redux action template
+    const actionTemplate = `const createActionTypes = (prefix, actionTypeList = []) => {
+    const actionTypesObject = {}
+    actionTypeList.forEach((item) => {
+        actionTypesObject[item] =  prefix + "/" + item
+})
+
+return actionTypesObject
+}
+
+export default createActionTypes
+
+export const ${reducerName}Actions = createActionTypes(${reducerName}Actions, ["REDUX_TEST"])
+export const reduxTest = () => {
+    return {
+        type: ${reducerName}Actions.REDUX_TEST,
+    }
+}
+`;
+
+    fs.writeFileSync(actionsPath, actionTemplate, 'utf8');
+    console.log(`\n${pc.cyan("action.js")} file created at ${pc.gray(actionsPath)} `);
+
+}
+
+// Function to create redux reducer file using given input
+function createReduxReducerFile({ componentName, containersDir, reducerName }) {
+    const reducerPath = path.join(containersDir, `${componentName}/reducer.js`);
+
+    // redux reducer template
+    const reducerTemplate = `import { ${reducerName}Actions } from "./actions"
+
+export const defaultState = {
+    testActionDispatched: false,
+}
+
+export const ${reducerName}Reducer = (state = defaultState, action) => {
+    switch (action.type) {
+        case ${reducerName}Actions.REDUX_TEST: {
+            return {
+                ...state,
+                testActionDispatched: true,
+            }
+        }
+
+        default:
+            return state
+    }
+}
+`;
+
+    fs.writeFileSync(reducerPath, reducerTemplate, 'utf8');
+    console.log(`\n${pc.cyan("reducer.js")} file created at ${pc.gray(reducerPath)} `);
+}
+
+module.exports = { createNewComponent, createRTKReducerFile, createReduxActionFile, createReduxReducerFile }

package/codemod/new-route/transformers/createReducer.js

@@ -0,0 +1,38 @@
+const pc = require("picocolors")
+
+module.exports = function (fileInfo, api, options) {
+    const jscodeshift = api.jscodeshift;
+    const root = jscodeshift(fileInfo.source);
+
+    const { componentName, reducerName } = options;
+
+    // Insert the node at the top of the file
+    root.find(jscodeshift.Program).get('body', 0).insertBefore(`import { ${reducerName}Reducer } from '@containers/${componentName}/reducer.js'`);
+
+    root.find(jscodeshift.CallExpression, {
+        callee: {
+            name: 'combineReducers'
+        }
+    }).forEach(path => {
+        const args = path.value.arguments;
+        if (args.length > 0 && args[0].type === 'ObjectExpression') {
+            args[0].properties.push(
+                jscodeshift.property(
+                    'init',
+                    jscodeshift.identifier(`${reducerName}Reducer`),
+                    jscodeshift.identifier(`${reducerName}Reducer`)
+                )
+            );
+            args[0].properties.forEach(property => {
+                if (property.key.name === property.value.name) {
+                    property.shorthand = true;
+                }
+            });
+        }
+    })
+
+    console.log(`\nReducer added in ${pc.gray("src/js/store/index.js")}`);
+    return root.toSource();
+
+};
+

package/codemod/new-route/transformers/createRoute.js

@@ -0,0 +1,33 @@
+const pc = require("picocolors")
+
+module.exports = function (fileInfo, api, options) {
+    const jscodeshift = api.jscodeshift;
+    const root = jscodeshift(fileInfo.source);
+
+    const { routePath, componentName } = options;
+
+    // Create a new route object using a template expression
+    const newObject = jscodeshift.template.expression`
+    {
+        path: ${JSON.stringify(routePath)},
+        end: true,
+        component: ${componentName}
+    }
+    `;
+
+    // Insert the node at the top of the file
+    root.find(jscodeshift.Program).get('body', 0).insertBefore(`import ${componentName} from '@containers/${componentName}/${componentName}'`);
+
+    root.find(jscodeshift.VariableDeclarator, { id: { name: 'routes' } })
+        .forEach(path => {
+            // Ensure we are modifying the top-level array expression
+            if (path.value.init.type === 'ArrayExpression') {
+                path.value.init.elements.push(newObject);
+            }
+        });
+
+    console.log(pc.green('\nNew route added successfully.'));
+    return root.toSource();
+
+};
+

package/codemod/new-route/utils.js

@@ -0,0 +1,90 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+const { execSync } = require('child_process');
+
+// validates router path
+function validatePath(path) {
+    const pathPattern = /^\/[a-zA-Z0-9-_]+(?:\/:[a-zA-Z0-9-_]+)?(?:\?[a-zA-Z0-9-_=]*)?$/;
+
+    if (!path.startsWith('/')) {
+        return "The path must start with a forward slash (`/`).";
+    }
+    if (!pathPattern.test(path)) {
+        if (!/^[\/a-zA-Z0-9-_]+/.test(path)) {
+            s
+            return "Only letters, digits, hyphens, and underscores are allowed after the initial slash.";
+        }
+        if (/\/[^:][a-zA-Z0-9-_]+/.test(path)) {
+            return "Parameters must start with a slash and a colon, followed by valid characters.";
+        }
+        if (/\?[^a-zA-Z0-9-_=]*$/.test(path)) {
+            return "Query strings must start with a question mark and contain valid characters.";
+        }
+        return "The path is incorrectly formatted.";
+    }
+    return true;
+}
+
+// validates component name
+function validateComponentName(name) {
+    return /^[A-Z][a-zA-Z0-9]*$/.test(name) || "Component name should start with an uppercase letter and may contain alphanumeric characters";
+}
+
+
+// discard changes if anything breaks
+function discardChanges({ componentName, containersDir }) {
+    if (fs.existsSync(`${containersDir}/${componentName}`)) {
+        fs.rmSync(`${containersDir}/${componentName}`, { recursive: true, force: true });
+    }
+}
+
+// creates directory using given input
+function createDirectory({ componentName, containersDir }) {
+    try {
+        // directory check
+        if (fs.existsSync(`${containersDir}/${componentName}`)) {
+            throw new Error("directory with similar name already exist");
+        }
+
+        fs.mkdirSync(`${containersDir}/${componentName}`)
+        console.log(`\n${pc.cyan(componentName)} directory created at ${pc.gray(containersDir)}`);
+
+        return true
+
+    } catch (e) {
+        console.log(pc.red(`\nError: ${e}`))
+    }
+}
+
+// adds route object inside src/js/route/index.js file
+function createNewRoute({ componentName, routePath, routeTransformerPath }) {
+    const command = `jscodeshift --silent -t ${routeTransformerPath} --routePath ${routePath} --componentName ${componentName} src/js/routes/index.js`;
+    execSync(command, { stdio: 'inherit' });
+}
+
+// adds newly created reducer into src/js/store/index.js file
+function createReducerEntryInStore({ componentName, routePath, reducerTransformerPath, reducerName }) {
+    const command = `jscodeshift --silent -t ${reducerTransformerPath} --reducerName ${reducerName} --routePath ${routePath} --componentName ${componentName} src/js/store/index.js`;
+    execSync(command, { stdio: 'inherit' });
+}
+
+// converts string to camel case
+function toCamelCase(str) {
+    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
+}
+
+function checkIfRoutePathExist({routePath, componentName}) {
+    const routeIndexPath = "src/js/routes/index.js";
+    const data = fs.readFileSync(routeIndexPath, 'utf8')
+    // Check if the file content includes routePath
+    if (data.includes(routePath)) {
+        throw new Error(`${routePath} path already exist in src/js/routes/index.js`)
+    }
+
+    if (data.includes(`@containers/${componentName}/${componentName}`)) {
+        throw new Error(`${componentName} component path already exist in src/js/routes/index.js`)
+    }
+}
+
+module.exports = { validatePath, validateComponentName, discardChanges, createReducerEntryInStore, createNewRoute, createDirectory, toCamelCase, checkIfRoutePathExist }

package/license

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 1mg Healthcare Solutions Private Limited.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/my-app/.eslintignore

@@ -0,0 +1 @@
+**/build/*

package/my-app/.eslintrc

@@ -0,0 +1,28 @@
+{
+    "rules": {
+        "react-hooks/exhaustive-deps": "error" // Checks effect dependencies
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+    ],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": "latest"
+    },
+    "plugins": [
+        "react",
+        "react-hooks"
+    ],
+     "settings": {
+        "react": {
+            "pragma": "React",
+            "version": "detect"
+        }
+    }
+}

package/my-app/README.md

@@ -0,0 +1,25 @@
+## Getting Started
+
+Commence development by initiating the the following commands:
+
+For running the application in development mode, run:
+
+```bash
+npm run start
+```
+
+For a production build, change NODE_ENV to "production" in config/config.json, then run :
+
+```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

@@ -0,0 +1,16 @@
+const fetchFunction = (url, options) => {
+    let baseURL = process.env.API_URL
+    let finalUrl = baseURL + url
+
+    // Request Interceptor -  modify request here
+
+    return fetch(finalUrl, options)
+        .then(response => {
+            return response.json().then(parsedResponse => {
+                // Response Interceptor -  modify response here
+                return parsedResponse
+            })
+        })
+}
+
+export default fetchFunction

package/my-app/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/my-app/client/styles.js

@@ -0,0 +1,3 @@
+// Include initial base styles. Global styles will come here.
+
+import "@css/base/index.scss"

package/my-app/config/config.json

@@ -0,0 +1,12 @@
+{
+    "NODE_SERVER_HOSTNAME": "localhost",
+    "NODE_SERVER_PORT": 3005,
+    "WEBPACK_DEV_SERVER_HOSTNAME": "localhost",
+    "WEBPACK_DEV_SERVER_PORT": 3006,
+    "BUILD_OUTPUT_PATH": "build",
+    "PUBLIC_STATIC_ASSET_PATH": "/assets/",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
+    "API_URL": "",
+    "ANALYZE_BUNDLE": false,
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
+}