create-catalyst-app 0.0.1-beta.1 → 0.0.1-beta.11

package/templates/common/src/static/css/base/styles.scss

@@ -1,163 +1,3 @@
 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;
-}
-body {
-    &.preventYAxisScroll {
-        position: relative;
-        overflow-y: hidden;
-    }
-
-    &.preventXAxisScroll {
-        position: relative;
-        overflow-x: hidden;
-    }
-
-    &.preventScroll {
-        position: relative;
-        overflow: hidden;
-    }
-
-    &.offline {
-        input,
-        button,
-        a {
-            pointer-events: none;
-        }
-    }
-}
-
-* {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-#app {
-    height: 100%;
-    width: 100%;
-    margin: 0 auto;
-}
-
-#loader-portal {
-    position: absolute;
-    z-index: 100;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
-
-.select-element-portal {
-    position: fixed;
-    z-index: 1300;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.bottom-sheet-element {
-    position: fixed;
-    z-index: 100;
-    transition: all 0.2s ease-in;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    overflow: hidden;
-    transform: translate3d(0, 0, 0);
-}
-
-#bottom-sheet-root {
-    position: relative;
-    z-index: 100;
-
-    &.open {
-        height: 100%;
-
-        .bottom-sheet-backdrop {
-            background: $grey-backdrop;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 99;
-        }
-
-        .bottom-sheet-element {
-            &.full {
-                height: 95vh;
-            }
-
-            &.small {
-                height: 40vh;
-            }
-
-            &.medium {
-                height: calc(100% - 82px);
-            }
-        }
-    }
-}
-
-.bottomsheet-portal {
-    height: 100%;
-}
-
-.loader {
-    margin: makespace(1) auto;
-    border: makespace(1) solid $highlighted-background;
-    border-top: makespace(1) solid $action-primary;
-    border-radius: 50%;
-    width: makespace(6);
-    height: makespace(6);
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.shimmer {
-    border-radius: $gutter;
-    background: #f6f7f8;
-    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
-    background-repeat: no-repeat;
-    background-size: 200vw 100vh;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: shimmer;
-    animation-timing-function: linear;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-fill-mode: forwards;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-name: shimmer;
-    -webkit-animation-timing-function: linear;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: -100vw 0;
-    }
-
-    100% {
-        background-position: 100vw 0;
-    }
-}

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

@@ -1,172 +0,0 @@
-//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/{redux-js → common}/webpackConfig.js

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

package/templates/none-js/client/index.js

@@ -1,24 +1,20 @@
 import React from "react"
+import "./styles"
 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"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core/router/ClientRouter"
 
 window.addEventListener("load", () => {
     loadableReady(() => {
         const { __ROUTER_INITIAL_DATA__: routerInitialData } = window
-        
-        const router = createBrowserRouter(preparedRoutes({ store:{}, routerInitialState: routerInitialData }))
+
+        const router = clientRouter({ routerInitialState: routerInitialData })
 
         const Application = (
-            
-                <React.StrictMode>
-                    <RouterProvider router={router} />
-                </React.StrictMode>
-        
+            <React.StrictMode>
+                <RouterProvider router={router} />
+            </React.StrictMode>
         )
 
         const container = document.getElementById("app")

package/templates/none-js/package.json

@@ -1,53 +1,30 @@
 {
     "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"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
+        "@api": "api.js",
         "@containers": "src/js/containers",
-        "@lib": "src/js/lib",
-        "$server": "server",
-        "@constants": "src/js/constants",
+        "@server": "server",
         "@config": "config",
-        "@components": "src/js/components",
-        "@css": "src/static/css"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/tata1mg/catalyst"
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/"
     },
     "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"
+        "@tata1mg/router": "^0.0.1-beta.6",
+        "catalyst-core": "^0.0.1-beta.10"
     },
-    "homepage": "https://github.com/tata1mg/catalyst#readme",
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/node": "^7.22.19"
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

package/templates/none-js/src/js/containers/App/index.js

@@ -1,40 +1,16 @@
-import React, { useState } from "react";
-import {
-  useLocation,
-  useOutlet,
-  UNSAFE_LocationContext,
-} from "react-router-dom";
-import "@css/base/index.scss";
+import React from "react"
+import { Outlet } from "@tata1mg/router"
 
-
-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>
-  );
-};
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
 
-App.serverSideFunction = ({store}) => {
-  return new Promise((resolve) => resolve());
-};
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
 
-export default App;
+export default App

package/templates/none-js/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 = ({ 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}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

package/templates/redux-js/client/index.js

@@ -1,17 +1,18 @@
 import React from "react"
+import "./styles"
 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"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core/router/ClientRouter"
+import configureStore from "@store"
 
 window.addEventListener("load", () => {
     loadableReady(() => {
         const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
         const store = configureStore(__INITIAL_STATE__ || {})
-        const router = createBrowserRouter(preparedRoutes({ store, routerInitialState: routerInitialData }))
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
 
         const Application = (
             <Provider store={store} serverState={__INITIAL_STATE__}>

package/templates/redux-js/package.json

@@ -1,53 +1,33 @@
 {
     "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"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
+        "@api": "api.js",
         "@containers": "src/js/containers",
-        "@lib": "src/js/lib",
-        "$server": "server",
-        "@constants": "src/js/constants",
+        "@server": "server",
         "@config": "config",
-        "@components": "src/js/components",
-        "@css": "src/static/css"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/tata1mg/catalyst"
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
     },
     "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"
+        "@tata1mg/router": "^0.0.1-beta.6",
+        "catalyst-core": "^0.0.1-beta.10",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
     },
-    "homepage": "https://github.com/tata1mg/catalyst#readme",
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/node": "^7.22.19"
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

package/templates/redux-js/src/js/containers/App/actions.js

@@ -9,11 +9,8 @@ const createActionTypes = (prefix, actionTypeList = []) => {
 
 export default createActionTypes
 
-export const ShellActions = createActionTypes("shellActions", [
-    "REDUX_TEST"
-])
+export const ShellActions = createActionTypes("shellActions", ["REDUX_TEST"])
 export const reduxTest = () => {
-
     return {
         type: ShellActions.REDUX_TEST,
     }