@cdmbase/wiki-browser 12.0.18-alpha.10

package/lib/templates/content/docs/chrome-extension/index.md

@@ -0,0 +1,14 @@
+---
+meta:
+    title: Chrome Extension
+    description: Chrome Extension
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Chrome Extension ...
+headers:
+    Cache-Control: no-cache
+---
+
+## Chrome Extension
+
+**[Setup](/docs/chrome-extension/setup)**

package/lib/templates/content/docs/chrome-extension/setup.md

@@ -0,0 +1,30 @@
+---
+meta:
+    title: Setup
+    description: Setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Setup...
+headers:
+    Cache-Control: no-cache
+---
+
+References: https://github.com/Godiswill/cra-crx-boilerplate
+
+- Go to chrome://extensions .
+- Click on developer mode switch on top right side to activate it.
+- Click on load unpacked button
+- Browse to build/assets folder
+- We don't need to zip the build.
+- Just need to browse to the folder that contains manifest.json file
+
+#Register Callback URl
+
+In order for authentication to work properly, its required to register a callback url in auth0 project
+
+- Copy your extension id from the extension list like shown below
+
+![Extension ID](/assets/images/extension.png)
+
+- Replace your extension id with extension-id in this url `https://<extension-id>.chromiumapp.org`
+- Set env in dev.env AUTH0_EXTENSION_REDIRECT_URL = `https://YOUR_EXTENSION_ID.chromiumapp.org`

package/lib/templates/content/docs/contributing/adding-package.md

@@ -0,0 +1,23 @@
+---
+meta:
+    title: Adding package to sub packages
+    description: Adding package to sub packages
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Adding package to sub packages...
+headers:
+    Cache-Control: no-cache
+---
+
+## Adding package to sub packages or to servers or to devices
+
+We use [Lerna Hoisting](https://github.com/lerna/lerna/blob/9dc2bc5a9e200de3e8b5e83bbd8cec1fddfc2916/doc/hoist.md) feature. This makes sure the NPM package at most installed only once in the root `node_modules`. However, we should not place npm dependency under root `package.json`. The dependency should go under the package that needs it. For Example, if `servers/backend-server` requires the package then the dependency should be added to its `package.json` but not to the root package.json. Once added follow the below steps to install the package.
+
+Run
+
+1. `npm run lerna`. This should automatically install the new npm package as it reads from all packages or servers `package.json`.
+2. If above one didn't work then install from the root without save option
+
+```
+npm i apollo-server@<version> --no-save
+```

package/lib/templates/content/docs/contributing/adding_new_modules.md

@@ -0,0 +1,99 @@
+---
+meta:
+    title: Adding Modules with FullStack Pro Kit
+    description: Adding Modules with FullStack Pro Kit
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Adding Modules with FullStack Pro Kit...
+headers:
+    Cache-Control: no-cache
+---
+
+# Adding Modules with FullStack Pro Kit
+
+In this guide, we explain how you can add new modules with FullStack-pro Kit.
+
+## Table of Contents
+
+- [Add New Modules](#installing-and-importing-dependencies)
+
+## Add New Modules
+
+Adding new modules, usually goes under `packages-modules` folder. For example to create counter module, you create
+
+1. From root directory, create following folders by running the commands (in unix).
+
+    ```
+    mkdir -p packages-modules/counter/browser/src
+    mkdir -p packages-modules/counter/servers/src
+
+    touch packages-modules/counter/browser/src/package.json
+    touch packages-modules/counter/servers/src/package.json
+    ```
+
+2. Copy following files from the existing modules,
+
+    From one of the existing moudles, copy the following files into the new module. Make sure the browser's module are copied from another existing browsers location and similarly for server's module.
+    - webpack.config.js
+    - tsconfig.json
+
+3. Copy the content of the package.json for both browser and server from the existing modules and change the `name` in the package.json to the specific name of the module you want to create. Please make sure to keep the namespace of the module uniform, if the existing module have `@admin-layout`, your new browser module's `package.json` name would be `@admin-layout/counter-browser`, similarly for server module will have `@admin-layout/counter-server`.
+
+    ```json
+    {
+        "name": "@admin-layout/counter-module-browser",
+        "version": "0.0.1",
+        .....
+        "publishConfig": {
+            "access": "public"
+        },
+        .....
+
+        "dependencies": {
+            "@sample-stack/platform-browser": "link:../../../packages/sample-platform/browser",
+        },
+        "peerDependencies": {
+            "@common-stack/client-react": ">=0.0.229",
+            "@common-stack/core": ">=0.0.229",
+            "antd": "^3.26.4"
+        }
+    }
+    ```
+
+    Add any additional dependencies that this module needed.
+
+4. Then, to use the new module add to `servers` and main `package.json`
+
+    a. In root `package.json` file add the new module where you have existing modules
+
+    ```json
+    "dependencies": {
+        .....
+        "@sample-stack/counter-module-browser": "link:packages-modules/counter/browser",
+        "@sample-stack/counter-module-server": "link:packages-modules/counter/server",
+        ....
+    }
+    ```
+
+    b. In frontend server `servers/frontend-server` add the browser module with relative path.
+
+    ```json
+    "dependencies": {
+        .....
+        "@sample-stack/counter-module-browser": "link:../../packages-modules/counter/browser",
+    }
+    ```
+
+    c. In backend servers `servers/backend-server` add the server module with relative path.
+
+    ```json
+    "dependencies": {
+        ....
+        "@sample-stack/counter-module-server": "link:../../packages-modules/counter/server",
+        ....
+    }
+    ```
+
+Notes:
+
+- You may have to rerun `yarn watch` to pickup new modules

package/lib/templates/content/docs/contributing/architecture-updates.md

@@ -0,0 +1,19 @@
+---
+meta:
+    title: Architecture Update
+    description: Architecture Update
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Architecture Update...
+headers:
+    Cache-Control: no-cache
+---
+
+## Use git to merge upstream changes
+
+```
+git init
+git remote add [REMOTE_NAME] [GIT_URL]
+git fetch REMOTE_NAME
+git checkout REMOTE_NAME/BRANCH -- path/to/directory
+```

package/lib/templates/content/docs/contributing/avoid-using-promises-ui.md

@@ -0,0 +1,116 @@
+---
+meta:
+    title: Avoid using promises in UI
+    description: Avoid using promises in UI
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Avoid using promises in UI...
+headers:
+    Cache-Control: no-cache
+---
+
+## Avoid using promises in UI
+
+Do not use promises in the UI. If you using apollo-client, we can use an in-built `upgrade` to perform necessary action.
+
+## Wrong-Way
+
+```
+import * as React from 'react';
+import {
+    IOrganizationListSlotProps,
+} from '@adminide-stack/react-shared-components';
+import {     useGetUserOrganizationsListLazyQuery,
+ } from '@adminide-stack/account-api-client';
+import { useChangeOrganizationMutation } from '@adminide-stack/platform-browser/lib/components';
+import {IOrganization} from '@adminide-stack/core';
+
+const {useLayoutEffect} = React;
+
+export interface IOrganizationListProps extends IOrganizationListSlotProps {
+    active: boolean;
+}
+
+export const OrganizationsList = (props: IOrganizationListProps): React.ReactElement => {
+    const [fetchOrganizations, {data, loading}] = useGetUserOrganizationsListLazyQuery({
+        fetchPolicy:'cache-and-network',
+    });
+    const [changeOrganization] = useChangeOrganizationMutation();
+    const changeOrg = async (orgId: string) => {
+        await changeOrganization({
+            variables: {
+                orgId,
+            },
+        });
+    };
+    const {active, render} = props;
+
+    useLayoutEffect(() => {
+        if (active) {
+            fetchOrganizations();
+        }
+    }, [active]);
+
+    return render({organizations: data?.getUserOrganizations as IOrganization[], changeOrg, loading});
+};
+
+OrganizationsList.defaultProps = {
+    active: false,
+};
+```
+
+## Right Way
+
+```
+import * as React from 'react';
+import {
+    IOrganizationListSlotProps,
+} from '@adminide-stack/react-shared-components';
+import {
+    useGetUserOrganizationsListLazyQuery,
+} from '@adminide-stack/account-api-client';
+import { useChangeOrganizationMutation } from '@adminide-stack/platform-browser/lib/ant-module';
+import { IOrganization } from '@adminide-stack/core';
+
+const { useLayoutEffect } = React;
+
+export interface IOrganizationListProps extends IOrganizationListSlotProps {
+    active: boolean;
+}
+
+export const OrganizationsList = (props: IOrganizationListProps): React.ReactElement => {
+    const [fetchOrganizations, { data, loading }] = useGetUserOrganizationsListLazyQuery();
+    const [changeOrganization] = useChangeOrganizationMutation();
+    const changeOrg = (orgName: string) => {
+        changeOrganization({
+            variables: {
+                orgName: orgName,
+            },
+            update: (cache, { data, errors }) => {
+                if (data) {
+                    cache.modify({
+                        fields: {
+                            getUserOrganizations() {}
+                        }
+                    })
+                }
+            }
+        });
+    };
+    const { active, render } = props;
+
+    useLayoutEffect(() => {
+        if (active) {
+            fetchOrganizations();
+        }
+    }, [active]);
+
+    return render({ organizations: data?.getUserOrganizations as IOrganization[], changeOrg, loading });
+};
+
+OrganizationsList.defaultProps = {
+    active: false,
+};
+```
+
+Incase if have nonapollo client that requires promises then use packages like `react-hook`.

package/lib/templates/content/docs/contributing/coding-guidelines.md

@@ -0,0 +1,111 @@
+---
+meta:
+    title: Coding Guidelines
+    description: Coding Guidelines
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Coding Guidelines...
+headers:
+    Cache-Control: no-cache
+---
+
+## Coding Guidelines
+
+## Intro
+
+These are CDEBase coding guidelines. Please also review our [Source Code Organisation](./source-code-organization.md) page.
+
+## Indentation
+
+We use tabs, not spaces.
+
+## Names
+
+- Use PascalCase for `type` names
+- Use PascalCase for `enum` values. If the `enums` generated from Graphql codegen then it should follow Graphql code style convention.
+- Use camelCase for `function` and `method` names
+- Use camelCase for `property` names and `local variables`
+- Use whole words in names when possible
+
+## Naming for Files and Directories
+
+- Name files after their default export. If that default export is a React Component, or a class, then the file name should be in `PascalCase`.
+- Otherwise, the filename should be in `camelCase`.
+- For naming files avoid using `kebab-case` and `snake_case` and make sure the name follows the default export of the file.
+- Naming directories should follow `kebab-case`. Except use `PascalCase` for directories when containing only React components:
+
+```
+components/CtaButton/index.ts
+import 'components/CtaButton'
+```
+
+or
+
+```
+components/CtaButton/CtaButton.tsx
+import 'components/CtaButton/CtaButton'
+```
+
+rather than
+
+```
+components/cta-button/CtaButton.tsx
+```
+
+## Import files order
+
+### browser side import order
+
+- react import (if it is .tsx file)
+- react based packages like react-redux, react-fela, chakra-ui ...
+- npm packages for js utils
+- @common, @admin, @pubngo packages..
+- ../../../package
+- ../../folder/
+- ./Component
+
+### server side import order is similar like
+
+- node packages first
+- @common-stack, @cdm, @pubngo ...
+- import from local path by far path first and near folder next
+
+## Types
+
+- Do not export `types` or `functions` unless you need to share it across multiple components
+- Do not introduce new `types` or `values` to the global namespace
+
+## Comments
+
+- Use JSDoc style comments for `functions`, `interfaces`, `enums`, and `classes`
+
+## Strings
+
+- Use "double quotes" for strings shown to the user that need to be externalized (localized)
+- Use 'single quotes' otherwise
+- All strings visible to the user need to be externalized
+
+## Style
+
+- Use arrow functions `=>` over anonymous function expressions
+- Only surround arrow function parameters when necessary. For example, `(x) => x + x` is wrong but the following are correct:
+
+```javascript
+x => x + x
+(x, y) => x + y
+<T>(x: T, y: T) => x === y
+```
+
+- Always surround loop and conditional bodies with curly braces
+- Open curly braces always go on the same line as whatever necessitates them
+- Parenthesized constructs should have no surrounding whitespace. A single space follows commas, colons, and semicolons in those constructs. For example:
+
+```javascript
+for (let i = 0, n = str.length; i < 10; i++) {
+    if (x < 10) {
+        foo();
+    }
+}
+
+function f(x: number, y: string): void {}
+```

package/lib/templates/content/docs/contributing/do-and-dont.md

@@ -0,0 +1,42 @@
+---
+meta:
+    title: Do and Dont't
+    description: Do and Dont't
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Do and Dont't...
+headers:
+    Cache-Control: no-cache
+---
+
+## Don't do it...
+
+1. `yarn <package>`
+
+    Do not install dependencies as `yarn <package dependency>`.
+    We use `lerna` and the way it works for the project is by installing `dependencies` to the `packages` or `servers` that requires it. In most cases,
+    you can just add the package to frontend or backend by running following
+
+    > to add to the frontend server so browser gets it
+
+    `lerna add --scope=*fronted-server <package>`
+
+    > to add to the backend server for nodejs to use it
+
+    `lerna add --scope=*backend-server <package>`
+
+    If a dependency is just needed by one package, you can add to that package's package.json file
+
+    `lerna add --scope=<package name> <package>`
+
+    Ideally, root `package.json` should have all the `devDependencies` of the project while `packages` & `servers` file references should be under `dependencies` section as shown [here](https://github.com/cdebase/fullstack-pro/blob/master/package.json#L67-L78).
+
+    Sometimes we may need to `pin` a package as other dependencies can bring some older versions of the package we want to add. In that case we can pin the required package version by adding to the `pacakge.json`. But make sure you don't have different version of the package in `servers` or `packages` otherwise a duplciate package will be added to its `nodemodules`.
+
+## Do
+
+1. Each package version should be uniform across the repository
+
+    Before adding a `<package dependency>`, see if the package of different version exist. If it exist then update that version to the required version.
+
+2. You can edit one of the `packages` or `servers`'s `package.json` file directly to add a `dependencies` and then run `yarn lerna` to install them. This is a easy way to install a known version by adding to the target `pacakage.json` file.

package/lib/templates/content/docs/contributing/faq.md

@@ -0,0 +1,22 @@
+---
+meta:
+    title: Babel, JSX, and Build Steps
+    description: Babel, JSX, and Build Steps
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Babel, JSX, and Build Steps...
+headers:
+    Cache-Control: no-cache
+---
+
+### 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.
+
+### Why you have used [hot](https://github.com/cdebase/fullstack-pro/blob/master/servers/frontend-server/src/app/Main.tsx#L3)?
+
+It is used for `hot reloading`. Checkout out [React Hot Loader](https://github.com/gaearon/react-hot-loader)
+
+### 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/templates/content/docs/contributing/folder-setup/browser.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Browser
+    description: Browser
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Browser...
+headers:
+    Cache-Control: no-cache
+---
+
+## Browser

package/lib/templates/content/docs/contributing/folder-setup/config.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Config
+    description: Config
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Config...
+headers:
+    Cache-Control: no-cache
+---
+
+## Config

package/lib/templates/content/docs/contributing/folder-setup/containers-server.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Container Server
+    description: Container Server
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Container Server...
+headers:
+    Cache-Control: no-cache
+---
+
+## Container Server

package/lib/templates/content/docs/contributing/folder-setup/core.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Core
+    description: Core
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Core...
+headers:
+    Cache-Control: no-cache
+---
+
+## Core

package/lib/templates/content/docs/contributing/folder-setup/graphql.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Graphql
+    description: Graphql
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Graphql...
+headers:
+    Cache-Control: no-cache
+---
+
+## Graphql

package/lib/templates/content/docs/contributing/folder-setup/index.md

@@ -0,0 +1,30 @@
+---
+meta:
+    title: Folder Setup
+    description: Folder Setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Folder Setup...
+headers:
+    Cache-Control: no-cache
+---
+
+## Folder Setup
+
+**[Browser](/docs/contributing/folder-setup/browser)**
+
+**[Config](/docs/contributing/folder-setup/config)**
+
+**[Containers Server](/docs/contributing/folder-setup/containers-server)**
+
+**[Core](/docs/contributing/folder-setup/core)**
+
+**[Graphql](/docs/contributing/folder-setup/graphql)**
+
+**[Module](/docs/contributing/folder-setup/module)**
+
+**[Server](/docs/contributing/folder-setup/server)**
+
+**[Services](/docs/contributing/folder-setup/services)**
+
+**[Store](/docs/contributing/folder-setup/store)**

package/lib/templates/content/docs/contributing/folder-setup/module.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Module
+    description: Module
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Module...
+headers:
+    Cache-Control: no-cache
+---
+
+## Module

package/lib/templates/content/docs/contributing/folder-setup/server.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Server
+    description: Server
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Server...
+headers:
+    Cache-Control: no-cache
+---
+
+## Server

package/lib/templates/content/docs/contributing/folder-setup/services.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Services
+    description: Services
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Services...
+headers:
+    Cache-Control: no-cache
+---
+
+## Services

package/lib/templates/content/docs/contributing/folder-setup/store.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Store
+    description: Store
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Store...
+headers:
+    Cache-Control: no-cache
+---
+
+## Store

package/lib/templates/content/docs/contributing/frontend-coding.md

@@ -0,0 +1,30 @@
+---
+meta:
+    title: Frontend Coding
+    description: Frontend Coding
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Frontend Coding...
+headers:
+    Cache-Control: no-cache
+---
+
+## Frontend Coding
+
+- **Avoid using promises in the React Components:**
+
+There are many ways to avoid using promises in UI. We use the promises in the services but not in the React UI. Here is good blog on how to avoid promises using Hooks when using apollo-react.
+
+https://www.freecodecamp.org/news/react-apollo-client-2020-tutorial/
+
+- **Synchronous Code only:** Don't write any asynchronous code (avoid promises, await) directly in the UI. Use libraries such as [React Query](https://react-query.tanstack.com/overview) to better manage the asynchronous code.
+
+- **No Expansive code:** Don't write expensive code with `react` components that would take full state
+
+    If you ever need to take a full state either from `redux` or `apollo-client` and further computed within the component would result in bad
+    performance.
+    1. If the `state` has nested objects which cause the props to more prone to changes causing unwanted Component rendering.
+
+    2. this code won't be reusable.
+
+    So in that case, use [selectors](https://github.com/reduxjs/reselect) and inject them into props so it resolves the above-mentioned issues.