create-catalyst-app 0.0.1-beta.0

package/templates/common/src/static/css/resources/_mixins.scss

@@ -0,0 +1,196 @@
+/**
+    @param: Number like 1, 2 or 3
+    @returns: Space in multiples of 8px
+*/
+@function makespace($spaceMultiple) {
+    @if $spaceMultiple == 4 {
+        $spaceMultiple: 5;
+    }
+    @return ($spaceMultiple * $base-space);
+}
+
+/**
+    @param: Input size in px
+    @returns: Size in rem
+*/
+@function remy($pxsize) {
+    @return calc($pxsize/$font-size-body) + rem;
+}
+
+@mixin font-size($size) {
+    // font-size: $size + px; // For unsupported browsers
+    font-size: remy($size);
+}
+
+// @mixin vertical-center {
+//     position: relative;
+//     top: 50%;
+//     -ms-transform: translateY(-50%);
+//     -webkit-transform: translateY(-50%);
+//     transform: translateY(-50%);
+// }
+
+// @mixin keyframes($name) {
+//     @-webkit-keyframes #{$name} {
+//         @content;
+//     }
+//     @-moz-keyframes #{$name} {
+//         @content;
+//     }
+//     @keyframes #{$name} {
+//         @content;
+//     }
+// }
+
+// @mixin text-shorten {
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     white-space: nowrap;
+// }
+
+// Clearfix mixin
+// %clearfix {
+//     *zoom: 1;
+
+//     &::before,
+//     &::after {
+//         content: " ";
+//         display: table;
+//     }
+
+//     &::after {
+//         clear: both;
+//     }
+// }
+
+// @mixin generateRatings {
+//     @each $index, $color, $text-color in $rating-bg-colors-map {
+//         .rating-#{$index} {
+//             background: $color;
+//             color: $text-color;
+//         }
+//     }
+// }
+
+@mixin optional-at-root($sel) {
+    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+        @content;
+    }
+}
+
+@mixin placeholder {
+    @include optional-at-root("::-webkit-input-placeholder") {
+        @content;
+    }
+
+    @include optional-at-root(":-moz-placeholder") {
+        @content;
+    }
+
+    @include optional-at-root("::-moz-placeholder") {
+        @content;
+    }
+
+    @include optional-at-root(":-ms-input-placeholder") {
+        @content;
+    }
+}
+
+// @mixin transition($transition-property, $transition-time, $method) {
+//     -webkit-transition: $transition-property $transition-time $method;
+//     -moz-transition: $transition-property $transition-time $method;
+//     -ms-transition: $transition-property $transition-time $method;
+//     -o-transition: $transition-property $transition-time $method;
+//     transition: $transition-property $transition-time $method;
+// }
+
+// @mixin enhanceAnimations() {
+//     -webkit-transform: translate3d(0, 0, 0);
+//     -moz-transform: translate3d(0, 0, 0);
+//     -ms-transform: translate3d(0, 0, 0);
+//     -o-transform: translate3d(0, 0, 0);
+//     transform: translate3d(0, 0, 0);
+
+//     // stoping flickering on chrome
+//     // -webkit-transform-style: preserve-3d;
+//     // -webkit-perspective: 1000;
+//     // -webkit-backface-visibility: hidden;
+// }
+
+// @mixin only-mobile {
+//     @media (max-width: #{$tablet-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin tablet {
+//     @media (min-width: #{$tablet-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin only-tablet {
+//     @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin desktop {
+//     @media (min-width: #{$desktop-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin only-desktop {
+//     @media (min-width: #{$desktop-width}) and (max-width: #{$large-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin large {
+//     @media (min-width: #{$large-width}) {
+//         @content;
+//     }
+// }
+
+// @mixin box-sizing($box-model) {
+//     -webkit-box-sizing: $box-model; // Safari <= 5
+//     -moz-box-sizing: $box-model; // Firefox <= 19
+//     box-sizing: $box-model;
+// }
+
+// @mixin border-radius($radius) {
+//     -webkit-border-radius: $radius;
+//     border-radius: $radius;
+//     background-clip: padding-box; /* stops bg color from leaking outside the border: */
+// }
+
+// @mixin opacity($opacity) {
+//     opacity: $opacity;
+//     $opacity-ie: $opacity * 100;
+
+//     filter: alpha(opacity=$opacity-ie); //IE8
+// }
+
+// hack to remove scrollbars from chrome and IE
+@mixin hideScroll() {
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        width: 0 !important; /* stylelint-disable-line */
+    }
+}
+
+// Sidebar Widget / Full width container mixin
+// @mixin contentWidth($container-width) {
+//     width: $container-width;
+// }
+
+@mixin truncateAfterNumberOfLines($lines) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: $lines;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+}

package/templates/common/src/static/css/resources/_variables.scss

@@ -0,0 +1,172 @@
+//COLOURS -------------------------------
+// Actions
+$action-primary: #ff6f61;
+$action-auxiliary: #8a2422;
+$action-disabled: #e0e0e0;
+$action-disabled-text: #a9a9a9;
+$transparent: transparent;
+
+// Backgrounds
+$container-background: #fff;
+$divider: #dbdbdb;
+$highlighted-background: #fef7ef;
+$secondary-background: #f0f0f0;
+
+// Information (Text)
+$information-primary: #3b3b3b;
+$information-secondary: #767676;
+$information-tertiary: #a9a9a9;
+
+// States
+$success: #208376;
+$success-background: #e7f7e5;
+$caution: #d5410b;
+$caution-background: #ffe0cc;
+$error: #e51f47;
+$error-background: #ffd9e1;
+
+// Bottom Sheet
+
+$grey-backdrop: rgb(43 43 43 / 48%);
+
+// Basic
+$transition-duration: 0.2s !default;
+$transition-animation: ease !default;
+$border-radius: 4px !default;
+$border-radius-sm: 2px !default;
+
+// TYPOGRAPHY ---------------------------
+//Line Height
+$line-height-base: 1.5 !default;
+$line-height-x-small: 18px !default;
+
+//Font Sizes
+$font-size-hero: 48 !default;
+$font-size-l1: 30 !default;
+$font-size-l2: 24 !default;
+$font-size-l3: 20 !default;
+$font-size-l4: 18 !default;
+$font-size-l5: 16 !default;
+$font-size-body: 14 !default;
+$font-size-small: 12 !default;
+$font-size-x-small: 11 !default;
+
+//Font Weight
+$font-weight-semi-bold: 600 !default;
+$font-weight-medium: 500 !default;
+$font-weight-regular: 400 !default;
+$font-family-base: "Poppins" !default;
+$tablet-width: 768px;
+$desktop-width: 960px;
+$large-width: 1280px;
+
+// Spacers
+$base-space: 8px !default;
+
+// Sidenav
+$sidenav-list-separator: #eaeaea !default; // NOT IN DOC, REPLACE ASAP
+$sidenav-text-light: #9e9e9e !default; // NOT IN DOC, REPLACE ASAP
+$sidenav-row-highlight-bg: #f7f7f7 !default; // NOT IN DOC, REPLACE ASAP
+
+// Footer
+$footer-bg-alternate: rgb(
+    224 224 224 / 20%
+) !default; // Figure out a way to use colours with alpha without breaking general colour guidelines
+
+// Dialogs (Not modals for now)
+$dialog-border-radius: $border-radius !default;
+$dialog-box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%) !default;
+$dialog-overlay-bg: rgb(0 0 0 / 75%) !default; // NOT IN DOC, REPLACE ASAP
+
+// Form Elements
+$input-box-height: 40px !default;
+$input-border-radius: $border-radius !default;
+$input-border-width: 1px !default;
+$input-border-focused-width: 2px !default;
+$input-border-difference: calc(#{$input-border-focused-width} - #{$input-border-width}) !default;
+$input-textarea-min-height: 85px !default;
+$input-max-width: 100% !default;
+
+// Dropdown
+$dropdown-max-rows: 5 !default;
+$dropdown-helper-text-color: rgb(0 0 0 / 54%) !default; // NOT IN DOC, REPLACE ASAP
+$dropdown-height: $input-box-height !default;
+$dropdown-border-radius: $input-border-radius !default;
+$dropdown-border-width: $input-border-width !default;
+$dropdown-border-focused-width: $input-border-focused-width !default;
+$dropdown-border-difference: calc(#{$dropdown-border-focused-width} - #{$dropdown-border-width}) !default;
+
+// ELEVATION --------------------------------------------------------------
+//These are to be used in box-shadow css property of the component/div you want to provide elevation to
+$elevation-shadow-l1: 0 0 4px 0 rgb(0 0 0 / 8%), 0 4px 4px 0 rgb(0 0 0 / 8%);
+$elevation-shadow-l2: 0 0 8px 0 rgb(0 0 0 / 8%), 0 8px 8px 0 rgb(0 0 0 / 8%);
+$elevation-shadow-l3: 0 0 16px 0 rgb(0 0 0 / 8%), 0 16px 16px 0 rgb(0 0 0 / 8%);
+
+//These are to be used in z-index css property of the component/div you want to provide elevation to
+$elevation-index-l1: 4;
+$elevation-index-l2: 8;
+$elevation-index-l3: 16;
+$elevation-index-l4: 24;
+
+// Columns
+$col: calc(
+    calc(100vw - 72px) / 6
+); //48px for 6 gutters of 8 pixel each and 24px for 12px of padding on each side : 48+24
+$col-1: $col;
+$col-2: calc(calc(#{$col} * 2) + 8px);
+$col-3: calc(calc(#{$col} * 3) + 16px);
+$col-4: calc(calc(#{$col} * 4) + 24px);
+$col-5: calc(calc(#{$col} * 5) + 32px);
+$col-6: calc(calc(#{$col} * 6) + 40px);
+
+// Gutter
+$gutter: 4px;
+
+// Header
+$header-height: 56px !default;
+$header-box-shadow: 0 1px 6px 0 rgb(0 0 0 / 15%) !default;
+$header-search-height: 40px !default;
+$header-search-border-radius: 4px !default;
+$header-location-bar-height: 18px !default;
+
+// Pages
+//QuantitySelector
+$quantity-chip-color: #616161 !default; // NOT IN DOC, REPLACE ASAP
+
+//SelectorChip
+$selector-chip-border-radius: 4px;
+$selector-chip-border: 1px;
+$selector-chip-border-selected: 1px;
+
+// Accordion
+$border-width: 1px;
+$accordion-transition-duration: 0.4s;
+
+// CheckBox
+$border-width: 1px;
+$border-width-selected: 2px;
+$checkmark-width: 14px;
+$checkmark-height: 8px;
+
+// Radio
+$border-width: 1px;
+$border-width-selected: 2px;
+$radio-width: 12px;
+$radio-height: 12px;
+
+// Search Page
+$search-input-height: 56px !default;
+$search-item-divider-width: 1px !default;
+$search-item-divider-color: $action-disabled !default;
+
+// User Feedback
+$user-feedback-bar-height: 8px !default;
+$user-feedback-bar-radius: 4px !default;
+$user-feedback-legend-height: 21px !default;
+$user-feedback-legend-width: 21px !default;
+
+// Separator
+$separator-height-xs: 1px !default;
+$separator-height-sm: 4px !default;
+$separator-height-md: 8px !default;
+$separator-height-lg: 16px !default;

package/templates/common/src/static/css/resources/_vendors.scss

@@ -0,0 +1 @@
+/* Import or define any sass mixins, functions, and vendor mixins below */

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

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

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

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

package/templates/none-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/none-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/none-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/none-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/none-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 } = window
+        
+        const router = createBrowserRouter(preparedRoutes({ store:{}, routerInitialState: routerInitialData }))
+
+        const Application = (
+            
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+        
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/none-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/none-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:3005/assets/",
+    "LOCAL_ASSET_PATH": "/assets/",
+    "EXTERNAL_BASE_URL": "http://localhost:3005",
+    "DEV_SERVER_PORT": 3005,
+    "DEV_SERVER_HOSTNAME": "localhost",
+    "DEV_SERVER_HOST_URL": "http://localhost:3005",
+    "ENV_NAME": "local",
+    "BUILD_ENV": ""
+}

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