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

package/templates/common/src/js/containers/Home/Home.scss

@@ -0,0 +1,34 @@
+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/templates/common/src/js/routes/index.js

@@ -1,50 +1,11 @@
-import React from "react";
-import { RouterDataProvider } from "@tata1mg/router";
-import Home from "@containers/Home/Home";
-import PDP from "@containers/PDP/PDP";
-import App from "@containers/App";
+import Home from "@containers/Home/Home"
 
 const routes = [
-  {
-    path: "/",
-    end: true,
-    component: Home,
-  },
-  {
-    path: "/pdp",
-    end: true,
-    component: PDP,
-  },
-];
-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}} >
-
-      <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;
+    {
+        path: "/",
+        end: true,
+        component: Home,
+    },
+]
+
+export default routes

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

@@ -1,8 +1 @@
-@import "typography";
-@import "layout";
 @import "styles";
-@import "overrides";
-
-
-@import "../resources/variables";
-@import "../resources/mixins";

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/{my-app → templates/common}/webpackConfig.js

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