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

package/my-app/src/js/routes/index.js

@@ -1,43 +0,0 @@
-import React from "react";
-import { RouterDataProvider, MetaTag } from "@tata1mg/router";
-import Home from "@containers/Home/Home";
-import App from "@containers/App";
-
-const routes = [
-  {
-    path: "/",
-    end: true,
-    component: Home,
-  },
-];
-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/my-app/src/js/stateManager/stateProvider.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import configureStore from "../store";
-
-const ClientProvider = ({ children }) => {
-  const { __INITIAL_STATE__ } = window;
-
-  let store = configureStore(__INITIAL_STATE__);
-  return (
-    <Provider store={store} serverState={__INITIAL_STATE__}>
-      {children}
-    </Provider>
-  );
-};
-
-const ServerProvider = ({ store, children }) => {
-  return <Provider store={store}>{children}</Provider>; //on server
-};
-
-
-const serverStore = (initialState,req) => {
-  // will create a new store on server and this store would be available in server provider
-  return configureStore(initialState, req);
-};
-
-const hydrateClient = (serverStore) => {
-  const state = serverStore.getState();
-
-  return <script>{`window.__INITIAL_STATE__ = ${state} `}</script>;
-};
-
-// will be calling hydrate client in the template wrapper
-
-export { ClientProvider, ServerProvider, hydrateClient, serverStore };

package/my-app/src/js/store/index.js

@@ -1,22 +0,0 @@
-import { configureStore as createStore } from "@reduxjs/toolkit"
-import {combineReducers} from "redux"
-import {shellReducer} from "@containers/App/reducer.js"
-import fetchInstance from "../../../api"
-
-const configureStore = (initialState,request) => {
-    const api = fetchInstance
-    const store = createStore({
-        reducer: combineReducers({shellReducer}),
-        middleware: (getDefaultMiddleware) =>
-            getDefaultMiddleware({
-                thunk: {
-                    extraArgument: { api },
-                },
-            }),
-        preloadedState: initialState,
-    })
-    return store
-}
-
-
-export default configureStore

package/my-app/src/static/css/base/index.scss

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

package/my-app/src/static/css/base/styles.scss

@@ -1,3 +0,0 @@
-html {
-    box-sizing: border-box;
-}

package/my-app/src/static/css/base/typography.scss

@@ -1,53 +0,0 @@
-@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/scripts/cli.mjs

@@ -1,266 +0,0 @@
-#!/usr/bin/env node
-import { exec, execSync } from "child_process";
-import Commander, { Option } from "commander";
-import prompts from "prompts";
-import { red, green, cyan, yellow } from "picocolors";
-import ora from "ora";
-import packageJson from "../package.json" assert { type: "json" };
-import tar from "tar";
-import path from "path";
-import fs from "fs";
-
-
-
-// Hardcoded branch
-let projectName = null;
-const program = new Commander.Command(packageJson.name)
-  .version(packageJson.version)
-  .description("Copy code from a specific branch of a GitHub repository.")
-  .arguments("[folderName]")
-  .usage(`${green("[folderName]")} [options]`)
-  .action((name) => (projectName = name))
-  // .addOption(
-  //   new Option(
-  //     "-l, --lang <lang>",
-  //     "Specify the language (js or ts)",
-  //     /^(js|ts)$/i
-  //   )
-  // )
-  .addOption(
-    new Option(
-      "-s, --state-management [stateManagement]",
-      "Specify state management (rtk, redux, or none)",
-      /^(rtk|redux|none)$/i,
-      "none"
-    )
-  )
-  .action(async (folderName = null, cmd) => {
-    try {
-      // Use options provided through commander or prompt the user
-      validateOptions(cmd);
-      const projectName = folderName || (await promptProjectName());
-      const language = "js"
-      const stateManagement =
-        cmd.stateManagement || (await promptStateManagement());
-
-      const resolvedProjectPath = path.resolve(projectName.trim());
-      const projectPath = path.basename(resolvedProjectPath);
-      const root = path.resolve(projectPath);
-      console.log("project path is ====>", root);
-
-      // Define mapping of options to repository suffixes
-      const repositorySuffixes = {
-        js: "js",
-        ts: "ts",
-        redux: "redux",
-        rtk: "rtk",
-        none: "none",
-      };
-
-    
-      const packageName = packageJson.name; 
-      const packageVersion = packageJson.version; 
-
-      const subdirectoryToExtract = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`; 
-
-      const extractionDestination = `/${projectName}/`;
-      const spinner = ora(
-        `Cloning.....`
-      ).start();
-      (() => {
-        try {
-          
-
-          const tempDir = createTempDir();
-
-          console.log(`\nPacking npm package: ${packageName}@${packageVersion}`);
-          const packageFilePath = packNpmPackage(
-            packageName,
-            packageVersion,
-            tempDir
-          );
-
-          console.log(cyan(`Extracting`));
-          extractSubdirectory(packageFilePath);
-          console.log(green(`Extraction Complete`));
-          console.log(cyan("generating npmrc"))
-          generateNPMRC(projectName)
-          console.log(cyan(`Installing Packages`));
-          execSync(
-            `cd ${projectName} && npm i`
-          ,{stdio:"inherit"})
-          spinner.stop()
-
-          // Optionally, you can delete the temporary directory
-          // fs.rmdirSync(tempDir, { recursive: true });
-          deleteDirectory(tempDir)
-        } catch (error) {
-          spinner.stop()
-          console.error(`Error: ${error.message}`);
-          process.exit(1);
-        }
-      })();
-
-
-       function  packNpmPackage  (packageName, packageVersion, tempDir) {
-        const tarballFileName = `${packageName}-${packageVersion}.tgz`;
-        const tarballFilePath = path.join(tempDir, tarballFileName);
-
-        try {
-          execSync(`npm pack ${packageName}@${packageVersion} --silent`, {
-            cwd: tempDir,
-          })
-          
-          return tarballFilePath;
-        } catch (error) {
-          console.error(`Error packing npm package: ${error.message}`);
-          throw error;
-        }
-      }
-
-      // Function to create a temporary directory
-      function createTempDir() {
-        const tempDir = fs.mkdtempSync(path.join(process.cwd(), "temp-"));
-        console.log("temp dir is ===>",tempDir)
-        return tempDir;
-      }
-
-      // Function to extract subdirectory from npm package and delete tar file
-      function extractSubdirectory(packageFilePath) {
-        tar.extract({
-          file: packageFilePath,
-          sync: true,
-          filter: (path, entry) => {
-            return path.startsWith(`${subdirectoryToExtract}/`);
-          },
-          cwd: path.join(process.cwd()),
-          onentry: (entry) => {
-          // Modify entry path to remove the initial 'package/' prefix
-            entry.path = entry.path.replace(
-              `${subdirectoryToExtract}/`,
-              extractionDestination
-            );
-          },
-        });
-
-    
-
-        if (stateManagement !== "none") {
-          console.log(
-            cyan(
-              `You chose ${language}, ${stateManagement}. You can now start working on your project!`
-            )
-          );
-        } else {
-          console.log(
-            cyan(
-              `You chose ${language} without state management. You can now start working on your project!`
-            )
-          ); 
-        }
-
-        
-      
-      }
-    } catch (error) {
-    
-      console.error(red("An error occurred:"), error.message);
-      process.exit(1);
-    }
-  })
-  .allowUnknownOption();
-
-program.parse(process.argv);
-
-async function promptLanguage() {
-  const response = await prompts({
-    type: "select",
-    name: "lang",
-    message: "Choose the language:",
-    choices: [
-      { title: "js", value: "js" },
-      { title: "ts", value: "ts" },
-    ],
-  });
-
-  return response.lang;
-}
-
-async function promptStateManagement() {
-  const response = await prompts({
-    type: "select",
-    name: "stateManagement",
-    message: "Choose state management:",
-    choices: [
-      { title: "Redux", value: "redux" },
-      { title: "Redux Toolkit (RTK)", value: "rtk" },
-      { title: "None", value: "none" },
-    ],
-  });
-
-  return response.stateManagement;
-}
-async function promptProjectName() {
-  const res = await prompts({
-    type: "text",
-    name: "path",
-    message: "What is your project named?",
-    initial: "my-app",
-  });
-
-  if (typeof res.path === "string") {
-    projectName = res.path.trim();
-    return res.path;
-  }
-
-  if (!res.path || projectName === "") {
-    console.log(
-      "\nPlease specify the project directory:\n" +
-        `  ${cyan(program.name())} ${green("<project-directory>")}\n` +
-        "For example:\n" +
-        `  ${cyan(program.name())} ${green("my-next-app")}\n\n` +
-        `Run ${cyan(`${program.name()} --help`)} to see all options.`
-    );
-    process.exit(1);
-  }
-}
-
-function validateOptions(cmd) {
-  // Validate language option
-  if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {
-    throw new Error('Invalid language option. Use "js" or "ts".');
-  }
-
-  // Validate state management option
-  if (
-    cmd.stateManagement &&
-    !["rtk", "redux", "none"].includes(cmd.stateManagement.toLowerCase())
-  ) {
-    throw new Error(
-      'Invalid state management option. Use "rtk", "redux", or "none".'
-    );
-  }
-}
-
-function deleteDirectory(dirPath) {
-  if (fs.existsSync(dirPath)) {
-    fs.readdirSync(dirPath).forEach((file) => {
-      const currentPath = path.join(dirPath, file);
-      if (fs.lstatSync(currentPath).isDirectory()) {
-        deleteDirectory(currentPath);
-      } else {
-        fs.unlinkSync(currentPath);
-      }
-    });
-    fs.rmdirSync(dirPath);
-  }
-}
-
-function generateNPMRC (projectName) {
-  
-
-const npmrcContent = "//registry.npmjs.org/:_authToken=${NPM_TOKEN}"
-
-fs.writeFileSync(process.cwd()+`/${projectName}/.npmrc`,npmrcContent);
-
-}

package/templates/common/.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/templates/common/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

package/templates/common/.prettierrc.json

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

package/templates/common/.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/templates/common/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/templates/common/client/index.js

@@ -1,39 +0,0 @@
-import React from "react"
-// import "./styles"
-import { hydrateRoot } from "react-dom/client"
-import { loadableReady } from "@loadable/component"
-import {createBrowserRouter,RouterProvider } from "@tata1mg/router"
-import {ClientProvider} from "../src/js/stateManager/stateProvider.js"
-import { preparedRoutes } from "../src/js/routes/index.js"
-import configureStore from "../src/js/store/index.js"
-window.addEventListener("load", () => {
-    loadableReady(() => {
-        
-    
-        // Hydrate the redux store from server state.
-        // visitor id is sent with ga track events but we observed multiple cases where visitor id was not being passed. It could be due to the case that maybe cookie is not accessible in some cases. Hence, setting it here as a fallback in case gtmUtility.js is not able to get it any other way.
-        // window.visitorId = store.getState()?.shellReducer?.visitorId
-        // const platform = store.getState()?.shellReducer?.webviewPlatform
-        // const store = {}
-        
-        
-        const {__ROUTER_INITIAL_DATA__:routerInitialData,__INITIAL_STATE__ } = window
-        // console.log("router initila data is ====>",routerInitialData)
-        const store = configureStore(__INITIAL_STATE__||{})
-        const router = createBrowserRouter(
-            preparedRoutes({ store, routerInitialState:(routerInitialData) })
-        )
-
-        const Application = (
-            <ClientProvider>
-                <React.StrictMode>
-                    <RouterProvider router={router}/>
-                </React.StrictMode>
-            </ClientProvider>
-        )
-        // localStorage.setItem("isWebview", window.__INITIAL_STATE__?.shellReducer?.isWebview)
-        
-        const container = document.getElementById("app")
-        hydrateRoot(container, Application)
-    })
-})

package/templates/common/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": ""
-}