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

package/templates/common/src/js/containers/PDP/PDP.js

@@ -1,37 +0,0 @@
-import React, { useEffect } from "react";
-import { useCurrentRouteData, Link } from "@tata1mg/router";
-const PDP = () => {
-    const { data, isFetched, loading } = useCurrentRouteData() || {}
-
-    useEffect(() => {
-        console.log("data is =>", data)
-    })
-
-    return (
-
-        <div>
-            <>Welcome to pdp page</>
-            <Link to={"/"}>link</Link>
-        </div>
-    );
-};
-
-PDP.serverFetcher = async ({ req }, { store }) => {
-    console.log("server fetcher called!!")
-    const res = await fetch("https://jsonblob.com/api/1206830251241234432");
-    const json = await res.json();
-    return json;
-};
-
-PDP.clientFetcher = async ({ }, { }) => {
-    console.log("client fetcher called")
-    const res = await fetch("https://jsonblob.com/api/1206830251241234432");
-    const json = await res.json();
-    return json;
-};
-
-PDP.MetaTagFunction = (routerData) => {
-    return [<title key="PDP">PDP</title>]
-};
-
-export default PDP;

package/templates/common/src/js/reducer/index.js

@@ -1,80 +0,0 @@
-import { combineReducers } from "redux"
-// Import your reducers here
-
-import shellReducer from "@containers/App/reducer"
-
-/**
- * @description A 'Reducer Manager' object, which keeps track of all the registered reducers and exposes a reduce() function. For detailed info :- https://redux.js.org/usage/code-splitting#using-a-reducer-manager
- */
-
-function createReducerManager() {
-    // FRAMEWORK COMMENT THIS SHOULD BE EXPOSED TO USER
-    // Create an object which maps keys to reducers
-    const reducers = {
-        shellReducer,
-    }
-
-    // Create the initial combinedReducer
-    let reducerObj = combineReducers(reducers)
-
-    // An array which is used to delete state keys when reducers are removed
-    let keysToRemove = []
-
-    return {
-        getReducerMap: () => combineReducers(reducers),
-        // The root reducer function exposed by this object
-
-        // This will be passed to the store
-        reduce: (state, action) => {
-            // If any reducers have been removed, clean up their state first
-            if (keysToRemove.length > 0) {
-                state = { ...state }
-                for (let key of keysToRemove) {
-                    delete state[key]
-                }
-                keysToRemove = []
-            }
-
-            // Delegate to the combined reducer
-            return reducerObj(state, action)
-        },
-
-        // Adds a new reducer with the specified key
-        add: (reducer) => {
-            for (let key in reducer) {
-                if (!key) {
-                    return
-                }
-
-                // We will skip a step if the reducer is already present
-                if (reducers[key]) {
-                    continue
-                }
-
-                // Add the reducer to the reducer mapping
-                reducers[key] = reducer[key]
-            }
-
-            // Generate a new combined reducer
-            return combineReducers(reducers)
-        },
-
-        // Removes a reducer with the specified key
-        remove: (key) => {
-            if (!key || !reducers[key]) {
-                return
-            }
-
-            // Remove it from the reducer mapping
-            delete reducers[key]
-
-            // Add the key to the list of keys to clean up
-            keysToRemove.push(key)
-
-            // Generate a new combined reducer
-            return combineReducers(reducers)
-        },
-    }
-}
-
-export default createReducerManager

package/templates/common/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;
-  console.log("inital state is ====>",__INITIAL_STATE__)
-  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/templates/common/src/js/store/index.js

@@ -1,77 +0,0 @@
-import { compose, createStore, applyMiddleware } from "redux"
-import thunk from "redux-thunk"
-import { createLogger } from "redux-logger"
-
-import createReducerManager from "../reducer/index.js"
-import fetchInstance from "../../../api.js"
-/**
- * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
- * @param    {object} initialState    Default state
- * @param    {object} cookies    additional headers if needed
- * @param    {object} requestObj    additional information
- * @return   {object}         the store itself
- */
-
-process.env.NODE_ENV === "production"
-
-export default function configureStore(initialState, cookies, requestObj, customHeaders) {
-    // The variable defined below acts as a flag when the store is initialized on the client side
-    // Reason being that for the first time we need to actually need to forcefully set the reducer for which we have the initial data
-    let initializeClient = true
-
-    const reducerManager = createReducerManager()
-
-    // FRAMEWORK COMMENT. This should be exposed to user.
-    const api = fetchInstance
-    
-
-    // disable redux-logger in server - https://github.com/LogRocket/redux-logger/issues/6
-    const reduxLogger = createLogger({
-        predicate: () => typeof window !== "undefined",
-    })
-    const addReducer = (reducer) => {
-        // Only executed once when for the first run in client - side
-        if (initializeClient) {
-            initializeClient = false
-            return store.replaceReducer(reducerManager.add(reducer))
-        }
-
-        // This blocks check if the reducer is already added or not in store
-        // If not then it only add the missing reducers
-        // And if the required reducers are already present then we simply return without performing any change
-        let reducerToAdd = {}
-        const currentState = store.getState()
-        for (let key in reducer) {
-            if (!currentState[key]) {
-                reducerToAdd[key] = reducer[key]
-            }
-        }
-        if (Object.keys(reducerToAdd).length > 0) {
-            return store.replaceReducer(reducerManager.add(reducerToAdd))
-        }
-        return
-    }
-    let middleware = [thunk.withExtraArgument({ api, addReducer })]
-    if(process.env.NODE_ENV !== "production"){
-        middleware = [...middleware,reduxLogger]
-    }
-    // Add universal enhancers here
-    let enhancers = []
-
-    const composeEnhancers = process.env.NODE_ENV === "production" && (typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
-    const enhancer = composeEnhancers(...[applyMiddleware(...middleware), ...enhancers])
-
-    // create store with enhancers, middleware, reducers, and initialState
-    // When the store is initialized on the client side, we are passing a function that just returns the initial State from the server
-    // This is way we are able to maintain the initial state from the server on the client side and then add the relevant reducers
-    // Which then consumes the initial state
-    const store = createStore(
-        Object.keys(initialState).length === 0 ? reducerManager.getReducerMap() : () => initialState,
-        initialState,
-        enhancer
-    )
-
-    return store
-}
-
-

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

@@ -1,81 +0,0 @@
-pre {
-    white-space: pre-wrap;
-    background: #f1f1f1;
-    padding: 10px;
-}
-
-select {
-    border: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    color: $information-primary;
-}
-
-select:focus {
-    outline: none;
-}
-
-table {
-    border: 1px solid #ccc;
-    border-collapse: collapse;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    table-layout: fixed;
-}
-
-table caption {
-    font-size: 1.5em;
-    margin: 0.5em 0 0.75em;
-}
-
-table tr {
-    background-color: #f8f8f8;
-    border: 1px solid #ddd;
-    padding: 0.35em;
-}
-
-table th,
-table td {
-    padding: 0.625em;
-    text-align: left;
-}
-
-table th {
-    font-size: 0.85em;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-}
-
-button {
-    padding: 0;
-}
-
-img {
-    max-width: 100%;
-    display: inline-block;
-}
-
-a {
-    text-decoration: none;
-    color: $action-primary;
-}
-
-hr {
-    border: solid 1px $divider;
-    margin: 0;
-}
-
-input {
-    border: solid;
-    -webkit-appearance: none;
-    color: $information-primary;
-    background-color: $container-background;
-    text-align: start;
-}
-
-b,
-strong {
-    font-weight: 600;
-}

package/templates/common/src/static/css/base/animations.js

@@ -1,38 +0,0 @@
-export const pageTransitions = {
-    hidden: () => {
-        return {
-            x: 0,
-            opacity: 0,
-        }
-    },
-    visible: () => {
-        return {
-            x: 0,
-            opacity: 1,
-            transition: {
-                type: "spring",
-                delay: 0,
-                stiffness: 800,
-                damping: 65,
-                mass: 2,
-            },
-        }
-    },
-
-    exit: (params) => {
-        if (params?.showPageTransition === false) return { x: 0 }
-        else {
-            return {
-                x: params?.action === "POP" ? "50vw" : "-50vw",
-                opacity: 0,
-                transition: {
-                    type: "spring",
-                    delay: 0,
-                    stiffness: 800,
-                    damping: 65,
-                    mass: 2,
-                },
-            }
-        }
-    },
-}

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

@@ -1,242 +0,0 @@
-.minHeight100 {
-    height: 100vh;
-}
-
-.containerFluid {
-    width: 100%;
-    padding: 8px 16px 16px;
-}
-
-.container-fluid {
-    // only to be used on VISUALLY root level elements (containers containing components) which do not have full width atoms/molecules inside it
-    width: 100%;
-    padding-left: 12px; // the only exception in the entire DLS to ensure an imaginary 16px indentation
-    padding-right: 12px;
-}
-
-.container-fluid-padded {
-    // same as the above
-    width: 100%;
-    padding: makespace(2) 12px;
-}
-
-.container-fluid-padded-xl {
-    width: 100%;
-    padding: makespace(3) 12px;
-}
-
-.gutter-only {
-    // to be used only in very very crucial scenarios. You almost NEVER need it, if think you do, you're doing something wrong at the atom level
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.fullWidth {
-    width: 100%;
-}
-
-.col-1 {
-    width: $col;
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-2 {
-    width: calc(calc(#{$col} * 2) + 8px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-3 {
-    width: calc(calc(#{$col} * 3) + 16px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-4 {
-    width: calc(calc(#{$col} * 4) + 24px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-5 {
-    width: calc(calc(#{$col} * 5) + 32px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.col-6 {
-    width: calc(calc(#{$col} * 6) + 40px);
-    margin-left: $gutter;
-    margin-right: $gutter;
-}
-
-.marginTop-4 {
-    margin-top: $gutter;
-}
-
-.marginTop-8 {
-    margin-top: makespace(1);
-}
-
-.marginTop-16 {
-    margin-top: makespace(2);
-}
-
-.marginTop-24 {
-    margin-top: makespace(3);
-}
-
-.marginTop-32 {
-    margin-top: makespace(4);
-}
-
-.marginTop-40 {
-    margin-top: makespace(5);
-}
-
-.marginTop-48 {
-    margin-top: makespace(6);
-}
-
-.marginBottom-24 {
-    margin-bottom: makespace(3);
-}
-
-.marginTop-96 {
-    margin-top: makespace(12);
-}
-
-.marginBoth-4 {
-    margin-top: $gutter;
-    margin-bottom: $gutter;
-}
-
-.marginBoth-8 {
-    margin-top: makespace(1);
-    margin-bottom: makespace(1);
-}
-
-.marginBoth-16 {
-    margin-top: makespace(2);
-    margin-bottom: makespace(2);
-}
-
-.marginBoth-24 {
-    margin-top: makespace(3);
-    margin-bottom: makespace(3);
-}
-
-.marginBoth-40 {
-    margin-top: makespace(5);
-    margin-bottom: makespace(5);
-}
-
-.marginBoth-48 {
-    margin-top: makespace(6);
-    margin-bottom: makespace(6);
-}
-
-.paddingBoth-8 {
-    padding-top: makespace(1);
-    padding-bottom: makespace(1);
-}
-
-.paddingBoth-16 {
-    padding-top: makespace(2);
-    padding-bottom: makespace(2);
-}
-
-.paddingBoth-40 {
-    padding-top: makespace(5);
-    padding-bottom: makespace(5);
-}
-
-// This is where most used flex attributes throughout our codebase should go
-
-.flex {
-    display: flex;
-}
-
-.flexColumn {
-    display: flex;
-    flex-direction: column;
-}
-
-.flexWrap {
-    flex-wrap: wrap;
-}
-
-.alignCenter {
-    align-items: center;
-}
-
-.alignBase {
-    align-items: baseline;
-}
-
-.alignFlexEnd {
-    align-items: flex-end;
-}
-
-.justifyCenter {
-    justify-content: center;
-}
-
-.justifyBetween {
-    justify-content: space-between;
-}
-
-.justifyEnd {
-    justify-content: flex-end;
-}
-
-.spaceAround {
-    justify-content: space-around;
-}
-
-.middleDivider {
-    margin-left: makespace(2);
-    margin-right: makespace(2);
-}
-
-.insetDivider {
-    margin-left: makespace(1);
-    margin-right: makespace(1);
-}
-
-.displayNone {
-    display: none;
-}
-
-.textCenter {
-    text-align: center;
-}
-
-.textRight {
-    text-align: right;
-}
-
-.textUnderline {
-    text-decoration: underline;
-}
-
-.minHeight-100 {
-    min-height: 100vh;
-}
-
-.smallBorderRadius {
-    border-radius: 4px;
-}
-
-.borderRadius {
-    border-radius: makespace(1);
-}
-
-//WIDGET
-
-.widget-container {
-    width: 100%;
-    padding-top: makespace(1);
-    padding-bottom: makespace(2);
-}