@common-stack/generate-plugin 6.0.6-alpha.5 → 6.0.6-alpha.7

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Project_Setup.md

@@ -1,159 +0,0 @@
-## Getting Started
-
-If you want to develop FullStack locally you must follow the following instructions:
-
-1. Clone fullstack-pro locally
-```
-git clone https://github.com/cdmbase/fullstack-pro
-cd fullstack-pro
-```
-
-2. Install dependencies and build packages.
-
-    a. make sure `python` version `2.7.16` or higher in `^2` version installed.
-
-    b. install `node-gyp` globally. For installation check [this document](https://github.com/nodejs/node-gyp#installation).
-
-    c. install `watchman` for macOS users
-
-    d. Node version supported is `>=12.18.4` and `yarn` version is `1.22`. You can Download Node from [here](https://nodejs.org/dist/v12.18.4/)
-
-    e. Insall and build packages using following command. Run from the root folder of this project.
-```
-    yarn global add lerna
-    yarn bootstrap
-```
-    
-3. Setup environment file
-
-You need to have environemnt file before you start the project. There is a sample file exist at `config/development/dev.env.sample` which you can copy as `config/development/dev.env`.
-
-```
-cp ./config/development/dev.env.sample ./config/development/dev.env
-```
-
-You may need to set personalized values in the `dev.env` file.
-
-4. Start server MongoDB and Redis (look for Installation Section)
-
-> redis-server
-
-> mongod
-
-5. Start both client and server together
-```
-yarn start
-```
-Alternatively, if you need to run `backend` and `frontend` on its respective terminal instead of one terminal then follow [How to Start Backend and Frontend seperately](./How_to_Run_Various_Options.md#how-to-start-backend-and-frontend-seperately)
-
-### Server Enpoints: 
-The graphql server endpoints are
->http://localhost:8080/graphql
-
-The browser server endopoint is
->http://localhost:3000
-
-
-## How to run with HotReload for live changes both in the server and browser?
-
-To run build with watch for dependent packages, for auto reloading changes into the server to be productive during development.
-
-```
-yarn watch-packages
-```
-
-If you also need to watch along with it, you can use as many scopes as required like below. 
-
-```
-yarn watch-packages -- --scope=@sample-stack/counter-module* --scope=@packageb
-```
-
-To run build with watch for all the packages. Note: This will run watch on all packages under `packages-modules` and may saturate the resources in your laptop instead run above `watch-packages` command.
-
-```
-yarn watch
-```
-
-Sometimes if we have to run `build` or `watch` you can use the `lerna` [command](https://github.com/lerna/lerna/tree/master/commands/exec#usage) for the targeted packages
-
-```
-lerna exec --scope=<package name> yarn watch
-```
-
-- here `<package name>` will be the package you working on currently. If you have multiple packages, then you need to run it multiple times for each package in its respective terminal.
-
-## How to take changes from the branch?
-
-Most of the changes at code level can be taken using `git` command.
-
-But in some cases when `lerna's packages` are added or versions in `packages.json` are updated, to avoid getting installed duplicate pacakges due to monrepo architecture you need to first clean existing `node_modules` and reinstall again. This can be done with following command.
-
-```
-yarn clean:force && git pull <branch_name> && yarn install && yarn build
-```
-- here <branch_name> should be replaced with the branch you getting updates.
-
-## Installation of Prerequisties servers
-
-Install redis and mongo and setup an instance with default settings on default port,
-Please check the installation documentation of each one.
-
-MongoDB install : https://www.mongodb.com/docs/manual/administration/install-community/
-Redis install: https://redis.io/docs/getting-started/
-
-
-## Advance Options
-### To test Production build and run
-You need to run Frontend and Backend in two seperate servers. 
-
-to start frontend server
-```
-lerna exec --scope=*frontend-server yarn build
-lerna exec --scope=*frontend-server yarn start:dev
-```
-to start backend server
-```
-lerna exec --scope=*backend-server yarn build
-lerna exec --scope=*backend-server yarn start:dev
-```
-
-Note: you can pass `:<env>` next to `start` to use env config.
-- dev: to use `/config/development/dev.env`
-- stage: to use `/config/staging/staging.env`
-
-
-
-### Docker build and run
-
-Build three docker images by following the steps:
-- Frontend Server
-```
-lerna exec --scope=*frontend-server yarn docker:build
-lerna exec --scope=*frontend-server yarn docker:run
-```
-- Backend Server
-```
-lerna exec --scope=*backend-server yarn docker:build
-lerna exec --scope=*backend-server yarn docker:run
-```
-- moleculer-server
-```
-lerna exec --scope=*moleculer-server yarn docker:build
-lerna exec --scope=*moleculer-server yarn docker:run
-```
-
-Note: It uses `/config/staging/staging.env` for environment variables.
-
-### Environment settings for non-development
-```
-GRAPHQL_URL
-CLIENT_URL
-NATS_URL
-NATS_USER
-NATS_PW
-```
-## Troubleshoot
-To troubleshoot webpack configuration run
-```
-yarn zen:watch:debug
-```

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Dynamically_Render_Components.md

@@ -1,57 +0,0 @@
-
-Refernce: https://medium.com/@j5bot/react-dynamically-rendering-different-components-without-switch-the-capitalized-reference-e668d89e460b
-
-```
-import React from 'react'; // required to use JSX
-
-export const CapitalizedReferenceComponentCollectionExternals = (props) => {
-
-  // get references to all possible components
-  // that this component might render,
-  // and the collection of dynamic components we need to render,
-  // using destructuring
-  const { components: Components, collection } = props;
-
-  // A Capitalized reference to reuse
-  let Component;
-
-  // A reference to the component's props to reuse
-  let componentProps;
-
-  // A function which returns component.props if it exists,
-  // and otherwise returns props
-  const defaultMapPropsToComponent = function (
-    {
-      component = {},
-      props = {}
-    } = {}
-  ) {
-
-    return component.props || props;
-
-  };
-
-  // render the component collection
-  return(
-    <div>{
-        collection.map(
-          ( component ) => {
-            // Reference the proper component
-            Component = Components[ component.type ];
-            // Get the props you want to use for this component instance
-            // here we are assuming that you can specify a mapping function
-            // on the component definition, in props, or use the default
-            componentProps = (
-              component.mapPropsToComponent ||
-                props.mapPropsToComponent ||
-                  defaultMapPropsToComponent
-            )( component, props );
-            return (<Component { ...componentProps } />);
-          }
-        )
-    }</div>
-  );
-};
-
-export default CapitalizedReferenceComponentCollectionExternals;
-```

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/HOC_With_Render_Props.md

@@ -1,87 +0,0 @@
-Reference: https://gist.github.com/mjackson/a1bee5a8b24a0db7ff29586b124cfb38
-https://www.youtube.com/watch?v=BcVAq3YFiuc&t=1397s
-https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
-```
-import React from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
-
-document.body.style.background = `
-  linear-gradient(135deg,
-    #1e5799 0%,
-    #2989d8 50%,
-    #207cca 51%,
-    #7db9e8 100%
-  )
-`;
-
-const getHeaderStyle = y => {
-  const pin = y >= 100;
-  const top = -y / 2;
-  return {
-    textTransform: "uppercase",
-    textAlign: "center",
-    width: "100%",
-    margin: 0,
-    position: "fixed",
-    top: pin ? "0px" : `${top + 50}px`,
-    textShadow: pin
-      ? `0px ${(y - 100) / 5}px ${Math.min(
-          (y - 100) / 10,
-          20
-        )}px rgba(0, 0, 0, 0.5)`
-      : "none"
-  };
-};
-
-class ScrollY extends React.Component {
-  state = { y: 0 };
-
-  handleWindowScroll = () => {
-    this.setState({ y: window.scrollY });
-  };
-
-  componentDidMount() {
-    this.handleWindowScroll();
-    window.addEventListener("scroll", this.handleWindowScroll);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("scroll", this.handleWindowScroll);
-  }
-
-  render() {
-    return this.props.children(this.state.y);
-  }
-}
-
-class App extends React.Component {
-  render() {
-    const { y } = this.props;
-
-    return (
-      <div style={{ height: "300vh", color: "white" }}>
-        <h1 style={getHeaderStyle(y)}>{this.props.message}</h1>
-      </div>
-    );
-  }
-}
-
-function withScrollY(Component) {
-  return class extends React.Component {
-    render() {
-      return (
-        <ScrollY>{y => <Component {...this.props} y={y} />}</ScrollY>
-      );
-    }
-  };
-}
-
-const AppWithScrollY = withScrollY(App);
-
-ReactDOM.render(
-  <AppWithScrollY message="hello" />,
-  document.getElementById("app")
-);
-
-```

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Mongoose_Connection.md

@@ -1,45 +0,0 @@
-
-Reference:
-https://github.com/barakbd/docker_typescript_debug_vscode/blob/8454ab4bdd9713da373e898e7c606193bfbfc5e2/src/config/mongoose_connection.ts
-
-```
-/ https://codingsans.com/blog/mongoose-models-using-typescript-classes
-import * as mongoose from "mongoose";
-var connectionOptions: mongoose.ConnectionOptions | undefined;
-
-const uri: string = `mongodb://${process.env.MONGODB_HOST_AND_PORT_LIST}/${
-  process.env.MONGODB_DATABASE_NAME
-}`;
-
-console.log("uri", uri);
-const mongooseConnectionOptions: mongoose.ConnectionOptions = {
-  autoReconnect: true,
-  reconnectTries: 3,
-  keepAlive: 120,
-  user: process.env.MONGODB_DB_USERNAME,
-  pass: process.env.MONGODB_DB_PASSWORD,
-  authSource: process.env.MONGODB_AUTH_SOURCE,
-  replicaSet: process.env.MONGODB_REPLICASET
-};
-
-process.env.NODE_ENV === "local"
-  ? (connectionOptions = undefined)
-  : (connectionOptions = mongooseConnectionOptions);
-
-console.log("mongoose connectionOptions - ", connectionOptions);
-
-mongoose
-  .connect(uri, connectionOptions)
-  .then(() => {
-    console.info("mogoose connect - success");
-    // console.info(`uri - ${uri}`);
-    // console.info(`connectionOptions - ${connectionOptions}`);
-  })
-  .catch((err: mongoose.Error) => {
-    console.error("mogoose connect - error - ", err);
-    // throw err;
-    process.kill(process.pid);
-  });
-const mongooseConnection: mongoose.Connection = mongoose.connection;
-export { mongooseConnection };
-```

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/React_Componet_Extensions.md

@@ -1,11 +0,0 @@
-
-
-https://github.com/superdesk/superdesk-client-core/blob/d5ee7b11dddd2255a77b518e177b7ec33b167311/scripts/apps/extension-points/services/ExtensionPoints.js
-
-https://github.com/taskrabbit/react-component-extension
-
-
-
-https://github.com/camwest/react-slot-fill
-
-Reference: https://www.youtube.com/watch?v=395ou6k6C6k

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/RxJS_notes.md

@@ -1,3 +0,0 @@
-
-
-https://itnext.io/handling-redux-side-effects-the-rxjs-way-59c057b12cd4

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Styles_With_Type.md

@@ -1,52 +0,0 @@
-
-Sample Style Sheet implementation. 
-
-```js
-import * as CSS from 'csstype';
-import { css } from '@emotion/react'
-
-const DefaultSettingsView = (props: IDefaultSettings) => {
-
-
-    return(()=> {
-            <div className={css(styleSheet.title({title:title}))}>
-                <span className={css(styleSheet.note({ width: width || 0 }))}>test</span>
-            </div>
-    })
-
-}
-const styleSheet: { [key: string]: (x: any) => CSS.Properties } = {
-    resizable: {
-        position: 'relative',
-        '> .react-resizable-handle': {
-            position: 'absolute',
-            width: '3px',
-            height: '100%',
-            top: 0,
-            right: 0,
-            padding: '0 3px 3px 0',
-            boxSizing: 'border-box',
-            cursor: 'col-resize',
-        },
-    },
-    title: ({ theme }) => ({
-        textTransform: 'uppercase',
-        padding: '5px 0',
-        fontSize: '11px',
-        marginLeft: '33px',
-        color: theme.name === 'light' ? '#424242bd' : '#e7e7e77a',
-        boxShadow: theme.name === 'light' ? '0px 1px 2px 0px #f3f3f3' : '0px 1px 2px 0px #000000',
-        marginBottom: '2px',
-    }),
-    note: ({ width }) => ({
-        marginLeft: '33px',
-        fontSize: '14px',
-        whiteSpace: 'nowrap',
-        textOverflow: 'clip',
-        display: 'block',
-        maxWidth: width,
-        overflow: 'hidden',
-    }),
-};
-
-```

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Tutorials.md

@@ -1,12 +0,0 @@
-
-
-Typescript Tutorials
----
-https://basarat.gitbooks.io/typescript/
-https://medium.com/@martin_hotell/react-children-composition-patterns-with-typescript-56dfc8923c64
-
-
-
-Cors: 
----
-https://www.blackhillsinfosec.com/cors-lite/

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/faq.md

@@ -1,17 +0,0 @@
----
-id: faq-build
-title: Babel, JSX, and Build Steps
-permalink: docs/faq-build.html
-layout: docs
-category: FAQ
----
-
-
-### From where this `@sample-stack/platform-browser` comes  in `packages/sample-platform/browser/src/containers/Counter.tsx`?
-
-We use [lerna](https://github.com/lerna/lerna) for monorepo. For example all packages starts with `@sample-stack` are either under `packages` or `pacakges-modules` directories.
-
-
-### What is use of rehydrate?
-
-It is used for SSR(server side rendering). Server generates initial browser page along with state(redux or apollo-client or css) and that state will be used in the browser to rehydated during browser rendering so the client state don't start from initial values.

package/lib/generators/add-fullstack/files/docs/development/CodeContribution/installation_issues.md

@@ -1,9 +0,0 @@
-
-
-
-1. Error when `node-gyp rebuild`.
- Could be missing `python`. Install it and rerun the install again. 
- For more docs, check https://github.com/nodejs/node-gyp#installation
-
-2. For Mac User to develop Desktop app need
-`xcode-select --install`