@cdmbase/wiki-browser 12.0.18-alpha.5

package/lib/templates/content/docs/remix/devtools/remix-devtools.md

@@ -0,0 +1,58 @@
+---
+meta:
+    title: Remix Development Tools
+    description: Remix Development Tools
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Remix Development Tools...
+headers:
+    Cache-Control: no-cache
+---
+
+## Remix Development Tools
+
+To add `remix-development-tools` to the project
+
+- **package.json**
+
+    ```diff
+    @@ -342,6 +342,7 @@
+             "redux-first-history": "^5.1.1",
+             "redux-mock-store": "^1.5.4",
+             "remap-istanbul": "^0.13.0",
+    +        "remix-development-tools": "^4.4.1",
+             "resolve-url-loader": "^5.0.0",
+             "rimraf": "^3.0.2",
+             "rollup": "^4.13.0",
+    ```
+
+- **servers/frontend-server/vite.config.ts**
+    ```diff
+    @@ -3,6 +3,7 @@ import { vitePlugin as remix } from '@remix-run/dev';
+     import { dirname, resolve } from 'path';
+     import { installGlobals } from '@remix-run/node';
+     import { fileURLToPath } from 'url';
+    +import { remixDevTools } from 'remix-development-tools';
+     import { defineRoutesConfig } from '@common-stack/rollup-vite-utils/lib/vite-wrappers/json-wrappers.js';
+     import tsconfigPaths from 'vite-tsconfig-paths';
+     import { i18nInternationalizationPlugin } from '@common-stack/rollup-vite-utils/lib/vite-plugins/i18n-internationalization-plugin.js';
+    @@ -71,6 +72,18 @@ export default defineConfig(async ({ isSsrBuild }) => {
+         const viteConfig = {
+             define: envVariables,
+             plugins: [
+    +            remixDevTools({
+    +                server: {
+    +                    logs: {
+    +                        cookies: true,
+    +                        defer: true,
+    +                        actions: true,
+    +                        loaders: true,
+    +                        cache: true,
+    +                        siteClear: true,
+    +                    },
+    +                },
+    +            }),
+                 i18nInternationalizationPlugin({
+                     folderName: 'cdm-locales',
+                     packages: [...config.modules, ...config.i18n.packages],
+    ```

package/lib/templates/content/docs/remix/examples/changes-using-servercode.md

@@ -0,0 +1,79 @@
+---
+meta:
+    title: Changes Using Server Code
+    description: Changes Using Server Code
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Changes Using Server Code...
+headers:
+    Cache-Control: no-cache
+---
+
+## Changes Using Server Code
+
+Here is the diff for the commit [e2e30c8](https://github.com/CDEBase/admin-layout/commit/e2e30c8c088b13daa28002e0d36bad51badd91ba) in markdown format:
+
+````md
+# Commit e2e30c8: seperate server code
+
+**Author:** [veeramarni](https://github.com/veeramarni)
+
+---
+
+### Changes
+
+#### Modified
+
+##### `packages-modules/demo/ant-browser/rollup.config.mjs`
+
+```diff
+@@ -5,7 +5,7 @@ const additionalPlugins = [];
+ export default [
+     createRollupConfig({
+         input: [
+-            'src/index.ts',
++            'src/index.ts', 'src/index.server.ts',
+         ],
+         plugins: [
+             // Spread in additional plugins specific to this config
+```
+````
+
+##### `packages-modules/demo/ant-browser/src/antd-pro-demo/modules/system/compute.tsx`
+
+```diff
+@@ -39,6 +39,7 @@ export const systemPageStore = [
+         path: `${ORG_STD_ROUTES.ORG_BASE_PATH}/system/menu`,
+         auth: true,
+         component: () => import('./menu/Component'),
++        hasServerCode: true,
+         position: IMenuPosition.Lower,
+         exact: true,
+         priority: 3,
+@@ -99,6 +100,7 @@ export const systemPageStore = [
+         path: `/custom-pages/*`,
+         auth: true,
+         component: () => import('./menu/CustomPage'),
++        hasServerCode: true,
+         position: IMenuPosition.Lower,
+         exact: true,
+         priority: 2,
+```
+
+#### Added
+
+##### `packages-modules/demo/ant-browser/src/antd-pro-demo/modules/system/index.server.ts`
+
+```diff
+@@ -0,0 +1,2 @@
++export * as l from './menu/Component.server';
++export * as p from './menu/CustomPage.server';
+```
+
+---
+
+For more details, see the [commit on GitHub](https://github.com/CDEBase/admin-layout/commit/e2e30c8c088b13daa28002e0d36bad51badd91ba).
+
+```
+
+```

package/lib/templates/content/docs/remix/extra-icons.md

@@ -0,0 +1,62 @@
+---
+meta:
+    title: Extra Icons
+    description: Extra Icons
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Extra Icons...
+headers:
+    Cache-Control: no-cache
+---
+
+# Extra Icons
+
+The following is the configuration of it
+
+## Passing Data through `compute.ts`
+
+To populate data in this component, you'll need to pass configuration options through `compute.ts`. Here’s an example:
+
+1. Configure `extraIcons` in `compute.ts`.
+
+this is how you will configure in `compute.ts`.
+
+```ts
+{
+   ....
+    extraIcons: [
+       `<icon-repository-name>.${<icon-name>}`
+
+       // example
+
+        `rifi.${IIconRifi.RifiAllCategories}`
+       ......
+    ],
+
+    ....
+}
+```
+
+this is how you will configure in `config.json in frontend-server`.
+
+```ts
+{
+   ....
+   iconsRepository: {
+        ....
+        <icon-repository-name>: "<icon-repository-path>",
+
+        // example
+        rifi: "@pubngo-stack/icons/lib/rifi/{iconName}.js"
+
+        .......
+    },
+
+    ....
+}
+```
+
+### Key Fields:
+
+- **extraIcons**: Array of additional icons to map to the categories. Each icon has an associated value that will be passed to the `CategoriesTypeList` component.
+- **iconsRepository**: Object mapping icon repositories to their respective paths. Each key represents a repository, and the value is the path template for the icons in that repository.

package/lib/templates/content/docs/remix/extra-links.md

@@ -0,0 +1,65 @@
+---
+meta:
+    title: Extra Links
+    description: Extra Links
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Extra Links...
+headers:
+    Cache-Control: no-cache
+---
+
+# Extra Links
+
+The following is the configuration of it
+
+## Passing Data through `compute.ts`
+
+To populate data in this component, you'll need to pass configuration options through `compute.ts`. Here’s an example:
+
+1. Configure `extraLinks` in `compute.ts`.
+
+this is how you will configure in `compute.ts`.
+
+```ts
+{
+   ....
+    extraLink: [
+       `{ rel:stylesheet, hrefImportPath:<link-path> }`
+
+       // example
+
+        `{ rel:stylesheet, hrefImportPath:'@splidejs/react-splide/css' }`
+       ......
+    ],
+
+    ....
+}
+```
+
+this is how you will configure in `page route`.
+
+```ts
+{
+   ....
+
+    export const links = (params) => {
+        return [
+            {
+                rel: 'stylesheet',
+                href: reactDayPickerStyles as unknown as string,
+            },
+            ...params,
+        ];
+    };
+
+    ....
+}
+```
+
+params will automatically adds the link provided in compute.ts
+
+### Key Fields:
+
+- **extraLinks**: Array of additional links to be included in the page. Each link has an associated value that will be passed to the `links` function.
+- **params**: Array of link objects that will be automatically populated with the links provided in `compute.ts`.

package/lib/templates/content/docs/remix/generated-data-loaders.md

@@ -0,0 +1,114 @@
+---
+meta:
+    title: Generated Data Loaders
+    description: Generated Data Loaders
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Generated Data Loaders...
+headers:
+    Cache-Control: no-cache
+---
+
+Here's an improved version of your document:
+
+# Generated Data Loaders
+
+To minimize repetitive work, we automatically generate Remix data loaders by analyzing the page source code. Our parser scans the page for GraphQL queries and calls all of those queries in the generated data loaders. This ensures that by the time the component requests the data, it is already available in the Apollo Cache, reducing redundancy.
+
+The following example demonstrates how a component's code is used to generate data loaders:
+
+```ts
+#Teams.tsx
+
+const Teams = (props) => {
+    const [data, { loading }] = useTeamsQuery({ variables: { orgName, pageSize: 10 } });
+    // rest of the business logic
+    return (
+        // component render Markup
+    )
+}
+```
+
+When our Rollup plugin parses the component and detects the GraphQL queries, it creates a key-value pair where the key represents the GraphQL document the query uses, and the value refers to the variables used by the query. Note the following:
+
+- The GraphQL document must be present in the `core` package. For example, if a component is inside `account-browser`, the GraphQL document should be exported from either the `client` or `core` package.
+- Variables passed in the `variables` parameter will be converted to `params.<variableName>`, and the loader will expect these values in the params.
+
+For the above component, the following `routes.json` structure will be created:
+
+```json
+{
+    "queries": {
+        "TeamsDocument": "{orgName: params.orgName, pageSize: 10}"
+    }
+}
+```
+
+This serves as meta-information for our generator function, which uses it to create [loaders](./data-loaders.md) for both server and client. The generated loaders will look something like this:
+
+```ts
+export const loaders = ({ params, context }) => {
+    const { apolloClient: client } = context;
+    const queries = { GetTeamsDocument: { orgName: params.orgName, pageSize: 10 } };
+
+    const organizationTeamsQuery = client.query({
+        query: GetTeamsDocument,
+        variables: queries['GetTeamsDocument'],
+        fetchPolicy: __SERVER__ ? 'network-only' : 'cache-first',
+    });
+
+    return {
+        data: {
+            organizationTeamsQuery,
+        },
+    };
+};
+
+const clientLoader = async ({ params, serverLoader }) => {
+    const client = window.__APOLLO_CLIENT__;
+    try {
+        const getKey = (documentName) => camelCase(documentName).replace('Document', '');
+        const queries = { GetTeamsDocument: { orgName: params.orgName, pageSize: 10 } };
+        const queryKeys = ['TeamsQuery'];
+        let shouldCallServerLoader = false;
+        let response = {};
+        let cachedData, cacheKey;
+
+        cachedData = client.cache.readQuery({
+            query: GetTeamsDocument,
+            variables: queries['GetTeamsDocument'],
+        });
+        cacheKey = getKey('GetTeamsDocument');
+
+        if (!cachedData) {
+            shouldCallServerLoader = true;
+        }
+        if (cachedData && cachedData[cacheKey]) {
+            response[queryKeys[0]] = Promise.resolve(cachedData[cacheKey]);
+        }
+
+        if (!shouldCallServerLoader) return response;
+        const serverData = await serverLoader();
+        let queryKey = queryKeys[0];
+
+        if (!serverData[queryKey].then) {
+            return;
+        }
+        serverData[queryKey].then(({ data }) => {
+            client.cache.writeQuery({
+                query: GetTeamsDocument,
+                variables: queries['GetTeamsDocument'],
+                data,
+            });
+        });
+
+        return serverData;
+    } catch (err) {
+        console.error('Error in clientLoader', err);
+    }
+};
+```
+
+The above document provides an example for a simple use case where a component has only one query. For components with multiple queries, the generated loaders will be longer.
+
+---

package/lib/templates/content/docs/remix/queryParamsGenerator.md

@@ -0,0 +1,89 @@
+---
+meta:
+    title: Query Params Generator
+    description: Query Params Generator
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Query Params Generator...
+headers:
+    Cache-Control: no-cache
+---
+
+# Generalized Query Loaders Documentation
+
+This documentation describes how to pass nested variables to queries using a parameter generation function and how to implement query loaders with custom logic.
+
+## Query Params Generator Implementation
+
+The `queryParamsGenerator` function generates query parameters based on the input parameters.
+
+### Usage
+
+```javascript
+export const queryParamsGenerator = (params) => ({
+    nestedParam1: {
+        subParam: {
+            key: params.value,
+        },
+    },
+    nestedParam2: { key: params.value },
+});
+```
+
+## Query Loader Implementation
+
+This section describes how to implement query loaders using the variables generated by the `queryParamsGenerator` function.
+
+### Example Query Loader 1: CustomQueryLoader1
+
+The `CustomQueryLoader1` loads data using the variables generated by the `queryParamsGenerator` function with a specified fetch policy.
+
+### Usage
+
+```javascript
+const CustomQueryLoader1 = useCustomQuery1({
+    variables: queryParamsGenerator(params).nestedParam1,
+    fetchPolicy: 'custom-fetch-policy',
+});
+```
+
+## General Example
+
+Here is a generalized example of how to use the CustomQueryLoader1 and CustomQueryLoader2 together:
+
+```javascript
+import { useCustomQuery1, useCustomQuery2 } from './path/to/queries';
+import { dimentsions } from './dimension.js';
+
+export const queryParamsGenerator = (params) => ({
+    nestedParam1: {
+        subParam: {
+            key: params.value,
+        },
+        dimensions: dimensions,
+    },
+    nestedParam2: { key: params.value },
+});
+
+const ExampleComponent = (props) => {
+    const params = { value: 'uniqueIdentifier' };
+
+    const QueryLoader1 = useQuery1({
+        variables: queryParamsGenerator(params).nestedParam1,
+        fetchPolicy: 'cache-only',
+    });
+
+    const QueryLoader2 = useCustomQuery2({
+        variables: queryParamsGenerator(params).nestedParam2,
+        fetchPolicy: 'cache-only',
+    });
+
+    return (
+        <React.Suspense fallback={<Spinner></Spinner>}>
+            <Await resolve={Promise.all([QueryLoader1, QueryLoader2])}>
+                <ExampleComponent loaderData={[QueryLoader1, QueryLoader2]} {...props} />
+            </Await>
+        </React.Suspense>
+    );
+};
+```

package/lib/templates/content/docs/remix/resources.md

@@ -0,0 +1,16 @@
+---
+meta:
+    title: Resources
+    description: Resources
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Resources...
+headers:
+    Cache-Control: no-cache
+---
+
+## Resources
+
+- Mastering Remix.run Routing: Exploring Every Option with In-Depth Diagrams
+
+    https://www.youtube.com/watch?v=Q-careWW_lA

package/lib/templates/content/docs/remix/styles.md

@@ -0,0 +1,132 @@
+---
+meta:
+    title: Styles
+    description: Styles
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Styles...
+headers:
+    Cache-Control: no-cache
+---
+
+## Styles
+
+# CSS Import and Stylesheet Links Example
+
+This example demonstrates how to import CSS files from a package and return them as stylesheet links in a TypeScript project.
+
+## Installation
+
+To use this example, follow these steps:
+
+1. Install the necessary packages:
+
+    ```bash
+    npm install <your-css-package>
+    # or
+    yarn add <your-css-package>
+
+    ```
+
+### Import the CSS files in your TypeScript file:
+
+append the _?url_ at the end of css import
+
+```javascript
+import mainStyles from '<your-css-package>/main.css?url';
+
+or;
+
+import '<your-css-package>/any.css';
+```
+
+#### Add @tsignore above import
+
+```javascript
+//@ts-ignore
+import mainStyles from '<your-css-package>/main.css?url';
+```
+
+#### Define a function to return stylesheet links:
+
+```javascript
+//@ts-ignore
+import mainStyles from '<your-css-package>/main.css?url';
+//@ts-ignore
+import customStyles from '../styles/landing.css?url';
+
+export const links = () => {
+   return [
+       {
+           rel: 'stylesheet',
+           href: customStyles as unknown as string,
+       },
+       {
+           rel: 'stylesheet',
+           href: mainStyles as unknown as string,
+       },
+   ];
+};
+```
+
+#### Note: All css files import should be in route component, in subcomponent components it will not work
+
+## Directory Structure
+
+app
+routes
+app.tsx
+components
+Button.tsx
+styles
+app.css
+button.css
+
+## app.tsx (Route Component)
+
+```tsx
+import { LinksFunction } from 'remix';
+import buttonStyles from '../styles/button.css?url';
+
+export const links: LinksFunction = () => {
+    return [{ rel: 'stylesheet', href: buttonStyles }];
+};
+
+import Button from '../components/Button';
+const ComponentWithLoader = (props) => {
+    return (
+        <React.Suspense fallback={<Spinner></Spinner>}>
+            <Await resolve={OwnerPropertiesLoader} errorElement={<Alert>Error loading TypeLists!</Alert>}>
+                <div>
+                    <h1>Welcome to my Remix app!</h1>
+                    <Button />
+                </div>
+            </Await>
+        </React.Suspense>
+    );
+};
+```
+
+## Button.tsx (SubComponent)
+
+```tsx
+export default function Button() {
+    return <button className="custom-button">Click me</button>;
+}
+```
+
+## Troubleshoot
+
+### Error: No route matches URL "/styles/landing.css"
+
+Make sure `styles` folder which it is looking is copied to `lib` folder. If not check `rollup.config.base.mjs` under root of the project, whether it has `styles` pattern in `copy plugin`
+
+```js
+const additionalPlugins = [copy({ patterns: ['**/cdm-locales/**/*', '**/styles/**/*'], rootDir: './src' })];
+```
+
+### Build error: [!] RollupError: Could not resolve "../styles/landing.css?url" from "src/pages/Landing.tsx"
+
+Make sure `ignoreCssUrlPlugin` added to `rollup.config.base.mjs` after `typescript` plugin as shown below.
+
+<img width="1410" alt="image" src="https://github.com/cdmbase/cdebase-wiki/assets/3382355/2017114b-2ee2-4bcf-a25a-269d1c9999c3"/>

package/lib/templates/content/docs/remix/wiki.md

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

package/lib/templates/content/docs/security/auth-wrapper/auth-wrapper.md

@@ -0,0 +1,24 @@
+---
+meta:
+    title: Auth Wrapper
+    description: Auth Wrapper
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Auth Wrapper...
+headers:
+    Cache-Control: no-cache
+---
+
+# Auth Wrapper
+
+Authwrapper is a configuration provided to the Feature, it takes a component AuthWrapper or AuthWrapperHoc in mobile. The purpose of this wrapper is to validate whether the user is authenticated to access the component else it will get redirected to login.
+
+![Configuration](/assets/images/configuration.png)
+
+If you want that particular route should only be accessible to logged in user you can simply pass `auth: true` while configuring the route as shown below
+
+![Route Config](/assets/images/route-config.png)
+
+For mobile, authWrapper works in the similar fashion but the route config can have another property which will be UnAuthenticatedComponent which when provided will be rendered incase the user is unauthenticated and trying to access the route.
+
+![Unauthenticated Component](/assets/images/unauthenticated.png)

package/lib/templates/content/docs/security/index.md

@@ -0,0 +1,18 @@
+---
+meta:
+    title: Security
+    description: Security
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Security...
+headers:
+    Cache-Control: no-cache
+---
+
+## Security
+
+**[Secure Button (mobile)](/docs/security/secure-button-mobilenative)**
+
+**[Secure Button (web)](/docs/security/secure-button-web)**
+
+**[Auth Wrapper](/docs/security/auth-wrapper)**