@cdmbase/wiki-browser 12.0.18-alpha.10

package/lib/templates/content/docs/mobile/App-navigation-generator.md

@@ -0,0 +1,410 @@
+---
+meta:
+    title: App Navigation Generator
+    description: App Navigation Generator
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: App Navigation Generator...
+headers:
+    Cache-Control: no-cache
+---
+
+# App Navigation Generator
+
+To generate app navigations, you need to follow some steps given below.
+
+### Requirements
+
+- Rollup (**rollup.config.mjs**).
+- Admin Layout Pacakge (**@admin-layout/gluestack-ui-mobile**).
+
+### For LifeCycle Component and Interaction Manager functionality,use key in compute.ts as below
+
+- <span style={{color:"#1877F2"}}>withLifeCycle</span> <br />
+  (Use this when only lifecylc component is needed as wrapper for component)
+- <span style={{color:"#1877F2"}}>withInteraction</span> <br />
+  (Use this when only interaction manager functionality is needed , applied only on android)
+- <span style={{color:"#1877F2"}}>withLifeCycleInteraction</span> <br />
+  (Use this when both lifecylc component and interaction manager functionality is required)
+
+_Note: Default duration is 200 ms_
+
+```js
+{
+    withLifeCycle: true;
+}
+{
+    withInteraction: true;
+}
+{
+    withLifeCycleInteraction: true;
+}
+```
+
+or with **_custom duration_** (_Duration is not required for withLifeCycle_)
+
+```js
+{
+    withInteraction: {
+        duration: 100;
+    }
+}
+{
+    withLifeCycleInteraction: {
+        duration: 100;
+    }
+}
+```
+
+### For Icons we use @expo/vector-icons,use icon with name and props in compute.ts as below ,used as Drawer icons or BottomTab icons
+
+```tsx
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+const MyComponent = () => {
+  return <MaterialCommunityIcons name="home" size={24} color="black" />;
+}
+//Similar
+icon: {
+    // Icon Type from @expo/vector-icons directory
+    name: 'MaterialCommunityIcons',
+    // props of icon
+    props: {
+        name: 'home',
+        size: 24,
+        color:'#eee',
+    },
+}
+```
+
+### importPaths in compute.ts file is used for converting import to absolute path as below and it is handled by [@common-stack/rollup-vite-utils](https://github.com/CDEBase/common-stack/blob/b28eb57618ffd06096a2202498f2ad3b4aa5e40f/packages/rollup-vite-utils/src/rollup/rollupPluginModifyLibFiles.ts#L55)
+
+```tsx
+ {
+    importPaths: {
+           login: () => import('./screens/Login'),
+     },
+     // converted to
+     "importPaths": {
+           "login": '@yourpkg/pkgname/lib/screens/Login.js',
+     },
+ }
+```
+
+### unauthenticatedComponent and customHeader are the only keys in compute.ts file is using importsPath as below and it is handled by [@admin-layout/gluestack-ui-mobile](https://github.com/CDEBase/admin-layout/blob/586cd601e94674129d94832e485aa25ae53b894e/packages/gluestack-ui/mobile/src/utils/generateMobileNavigations.ts#L169)
+
+```ts
+unauthenticatedComponent:'$.importPaths.homeGuestComponent',
+customHeader:{
+  component:'$.importPaths.navigationHeader',
+},
+```
+
+### Step 1:
+
+- Create **compute.ts** file inside module package/src folder
+- Update module package tsconfig file to **target ES6 module**
+- Create **rollup.config.mjs** in module **package root** directory
+- Update rollup.config.mjs **input to src/index.ts**( if index.jsx file then replace it to index.ts) and extend module package rollup config with base rollup.config.base.mjs **createRollupConfig** function
+- Update module package **package.json** add **"type": "module"** and replace scripts **"build:lib":"tsc"** with **"build:lib": "rollup -c rollup.config.mjs"**
+
+**[mypackage/src/compute.ts](https://github.com/CDEBase/adminIde-stack/blob/develop/packages-modules/account-api/mobile/src/compute.ts)**
+
+```ts
+/* eslint-disable import/no-extraneous-dependencies */
+import { getFilteredRoutes } from '@common-stack/client-react/lib/utils/filteredRoutes.js';
+import { IRouteData } from '@common-stack/client-react/lib/interfaces/router.js';
+import { IPageStore } from '@adminide-stack/core/lib/interfaces/page-store.js';
+
+export const myPageStore: IPageStore[] = [
+    {
+        key: 'home',
+        path: '/:orgName/l/home',
+        name: 'Home',
+        exact: false,
+        menu_position: 'bottom',
+        auth: true,
+        component: () => import('./screens/Home'),
+        withLifeCycleInteraction: {
+            duration: 100,
+        },
+        icon: {
+            name: 'MaterialCommunityIcons',
+            props: {
+                name: 'home-variant-outline',
+                size: 24,
+                color: '#eee',
+            },
+        },
+        importPaths: {
+            navigationHeader: () => import('./components/NavigationHeader/NavigationHeader'),
+            // homeGuestComponent: () => import('./screens/Login'),
+        },
+        // unauthenticatedComponent:'$.importPaths.homeGuestComponent',
+        customHeader: {
+            name: 'NavigationHeader',
+            component: '$.importPaths.navigationHeader',
+            props: {
+                showTitle: false,
+                showOrganizationTitle: true,
+                showToggle: true,
+                showFilter: true,
+                isSearchBack: false,
+            },
+        },
+        props: {
+            initialParams: { orgName: null },
+            options: {
+                headerShown: true,
+                title: 'Home',
+                headerTitle: 'Home',
+                priority: 1,
+                tabBarActiveTintColor: '#000',
+                tabBarInactiveTintColor: 'black',
+                tabBarLabel: 'Home',
+            },
+        },
+    },
+];
+```
+
+**[mypackage/rollup.config.mjs](https://github.com/CDEBase/adminIde-stack/blob/develop/packages-modules/account-api/mobile/rollup.config.mjs)**
+
+```js
+import { createRollupConfig } from '../../../rollup.config.base.mjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+
+// Define any additional plugins specific to this bundle
+const additionalPlugins = [
+    json(),
+    resolve(), // resolves node_modules
+    // terser(), // minifies the output
+];
+
+// Use the createRollupConfig function to merge the base and specific configurations
+export default [
+    createRollupConfig({
+        input: ['src/index.ts'],
+        output: [
+            {
+                dir: 'lib',
+                format: 'es',
+                name: 'Accounts',
+                compact: true,
+                exports: 'named',
+                sourcemap: true,
+                preserveModules: true,
+                chunkFileNames: '[name]-[hash].[format].js',
+                globals: { react: 'React' },
+            },
+        ],
+        plugins: [
+            // Spread in additional plugins specific to this config
+            ...additionalPlugins,
+        ],
+        // Enable caching for faster rebuilds
+        cache: true,
+    }),
+];
+```
+
+**[mypackage/package.json](https://github.com/CDEBase/adminIde-stack/blob/4c5924c62006a4d265e48b5d6164b5069b3b2974/packages-modules/account-api/mobile/package.json#L7)**
+
+```json
+{
+    ...
+    "type": "module",
+     "scripts": {
+      ...
+      "build:lib": "rollup -c rollup.config.mjs",
+      ...
+     }
+}
+```
+
+### Step 2:
+
+- Create **config.json** file inside portable-devices/mobile root folder if not exists and add/update mobileConfig and modules key to update modules and app generation required mobile config.
+- Create **generate-navigations.mjs or yourfilename.mjs** inside portable-devices/mobile root folder.
+- Update portable-devices/mobile **package.json** scripts and add script to generate development and production app navigation files with above mjs files.
+- Update **portable-devices/mobile/src/modules/modules.tsx** file , import **_modules and useGetModules hook_** from autogenerated **src/app/modules.ts** file and app navigation from autogenerated **src/app/navigation.tsx** file to use with src/modules/modules.tsx file for autogenerated navigation and import and add Navigation from src/modules/modules.tsx in src/App.tsx file.
+
+**[portable-devices/mobile/config.json](https://github.com/CDEBase/admin-layout/blob/develop/portable-devices/mobile/config.json)**
+
+```json
+{
+    "commonPaths": {},
+    "copyOperations": [],
+    "mobileConfig": {
+        "initialRouteName": "",
+        "unauthenticatedComponentPath": "",
+        "customTabBarPath": "",
+        "customDrawerPath": "",
+        "customHeaderPath": ""
+    },
+    "modules": ["@somepkg/yourpkg1", "@admin-layout/gluestack-ui-mobile"],
+    "paths": {}
+}
+```
+
+_Note: here mobileConfig initialRouteName is used when we want to change the app initial navigation redirect route,unauthenticatedComponentPath is the global unauthenticated component absolute path like **'@yourpkg/somemobilepkg/lib/screens/Login.js'** , same for other customTabBarPath,customDrawerPath or customHeaderPath._
+
+**[portable-devices/mobile/generate-navigations.mjs](https://github.com/CDEBase/admin-layout/blob/develop/portable-devices/mobile/generate-navigations.mjs)**
+
+```js
+import path from 'path';
+import { fileURLToPath } from 'url';
+import {
+    GenerateMobileNavigations,
+    readJsonFile,
+} from '@admin-layout/gluestack-ui-mobile/lib/utils/generateMobileNavigations.js';
+if (process.env.NODE_ENV === 'development') {
+    import('dotenv').then((dotenv) => {
+        dotenv.config({ path: `${process.cwd()}/${process.env.ENV_FILE}` });
+    });
+}
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// App navigations setting config file path
+const configFilePath = path.join(__dirname, 'config.json');
+// Default app navigations directory path
+const appDirPath = path.join(__dirname, './src/app');
+
+const generateNavigations = async () => {
+    const config = await readJsonFile(configFilePath);
+    //App navigations generator class only appDirPath and modules are required
+    const app = new GenerateMobileNavigations({
+        appDirPath: appDirPath,
+        modules: config.modules,
+        initialRouteName: config.mobileConfig.initialRouteName, // (Optional)
+        unauthenticatedComponentPath: config.mobileConfig.unauthenticatedComponentPath, // (Optional)
+        customTabBarPath: config.mobileConfig.customTabBarPath, // (Optional)
+        customDrawerPath: config.mobileConfig.customDrawerPath, // (Optional)
+        customHeaderPath: config.mobileConfig.customHeaderPath, // (Optional)
+    });
+    try {
+        await app.generateAppNavigations();
+        console.log('app navigation generated');
+    } catch (error) {
+        console.error('Error generating app navigation:', error);
+    }
+};
+
+generateNavigations();
+```
+
+_Note: generate-navigations.mjs will generate app navigations inside src/app directory_
+
+**[portable-devices/mobile/package.json](https://github.com/CDEBase/admin-layout/blob/586cd601e94674129d94832e485aa25ae53b894e/portable-devices/mobile/package.json#L43)**
+
+```json
+{
+    ...
+    "scripts": {
+        ...
+        "eas-build-post-install": "lerna exec --scope='{@messenger-box/core,...}' yarn build && yarn generate-app-navigations-prod",
+        "watch": "yarn generate-app-navigations && cross-env NODE_ENV=development ENV_FILE=../../config/development/dev.env expo start --clear --localhost",
+        "generate-app-navigations": "yarn cross-env NODE_ENV=development ENV_FILE=../../config/development/dev.env node generate-navigations.mjs",
+        "generate-app-navigations-prod": "node generate-navigations.mjs",
+        ...
+    }
+}
+```
+
+**[portable-devices/mobile/src/modules/modules.tsx](https://github.com/CDEBase/admin-layout/blob/develop/portable-devices/mobile/src/modules/modules.tsx)**
+
+```tsx {11,12,18,22,39}
+import * as React from 'react';
+import { enableScreens } from 'react-native-screens';
+import {
+    ErrorBoundary,
+    NavigationContainerComponent,
+    ApplicationErrorHandler,
+    Box,
+    Spinner,
+} from '@admin-layout/gluestack-ui-mobile';
+import { InversifyProvider, PluginArea } from '@common-stack/client-react';
+import appModules, { useGetModules } from '../app/modules';
+import AppNavigations from '../app/navigation';
+
+enableScreens(true);
+
+export const MainRoute = ({ container }: any) => {
+    const [mainFeatures, setMainFeatures] = React.useState<any>(null);
+    const { appRouteConfig } = useGetModules();
+
+    React.useEffect(() => {
+        if (appRouteConfig) {
+            appModules.routeConfig = appRouteConfig;
+            setMainFeatures(appModules);
+        }
+    }, [appRouteConfig]);
+
+    const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
+
+    if (!mainFeatures || mainFeatures?.routeConfig?.length == 0) return loadingComponent();
+
+    const plugins = mainFeatures?.getComponentFillPlugins();
+    const configuredRoutes = mainFeatures?.getConfiguredRoutes2('/');
+
+    return (
+        <InversifyProvider container={container} modules={mainFeatures}>
+            {mainFeatures?.getWrappedRoot(
+                <ErrorBoundary>
+                    <NavigationContainerComponent configurableRoutes={configuredRoutes} independent={true}>
+                        <AppNavigations />
+                        <PluginArea />
+                        <ApplicationErrorHandler plugins={plugins} />
+                    </NavigationContainerComponent>
+                </ErrorBoundary>,
+            )}
+        </InversifyProvider>
+    );
+};
+
+export default appModules;
+```
+
+**[portable-devices/mobile/src/App.tsx](https://github.com/CDEBase/admin-layout/blob/develop/portable-devices/mobile/src/App.tsx)**
+
+```tsx {14,28}
+import 'reflect-metadata';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ApolloProvider } from '@apollo/client/index.js';
+import { Provider } from 'react-redux';
+import { GluestackUIProvider } from '@admin-layout/gluestack-ui-mobile';
+import { config } from './config/gluestack-ui.config';
+import { SlotFillProvider } from '@common-stack/components-pro';
+import { persistStore } from 'redux-persist';
+import { PersistGate } from 'redux-persist/integration/react';
+import { createReduxStore, history } from './config/redux-config';
+import { createClientContainer } from './config/client.service';
+import { LogBox, SafeAreaView } from 'react-native';
+import { MainRoute } from './modules/modules';
+
+const { apolloClient: client, container, serviceFunc } = createClientContainer();
+const { store } = createReduxStore(history, client, serviceFunc(), container);
+
+export default function () {
+    let persistor = persistStore(store as any);
+    return (
+        <SlotFillProvider>
+            <ApolloProvider client={client}>
+                <Provider store={store}>
+                    <PersistGate persistor={persistor}>
+                        <SafeAreaView style={{ flex: 1 }}>
+                            <GluestackUIProvider config={config} colorMode="light">
+                                <MainRoute container={container} />
+                            </GluestackUIProvider>
+                        </SafeAreaView>
+                    </PersistGate>
+                </Provider>
+            </ApolloProvider>
+        </SlotFillProvider>
+    );
+}
+```
+
+For testing or adding route config in **portable-devices/mobile** create compute.ts file inside **portable-devices/mobile/src/compute.ts** and add routeConfig as above from step 1. This will generate route config json in src/app/main_routes.json and include your routes in generated navigations.

package/lib/templates/content/docs/mobile/MobileTestCases.md

@@ -0,0 +1,264 @@
+---
+meta:
+    title: Mobile Test Cases
+    description: Mobile Test Cases
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Mobile Test Cases...
+headers:
+    Cache-Control: no-cache
+---
+
+## Mobile Test Cases
+
+### 1. Inbox Test Cases
+
+---
+
+**_Example Config:_**
+
+> **_ Channel Roles: _** _ Host/Guest_
+
+```
+import { Inbox } from '@messenger-box/platform-mobile';
+import { IRoomType } from '@messenger-box/platform-client';
+const inboxConfig = {
+  ['//l/inbox']: {
+      exact: true,
+      name: 'Inbox',
+      props: {
+          initialParams: { channelId: null },
+          component:(props: any) => (
+            <Inbox {...props}
+             channelFilters={{type: IRoomType.Direct,orgName:orgName}}
+             channelRole={'Guest'}
+             supportServices={true}  />
+          ),
+      },
+  },
+}
+```
+
+- [x] ** Inbox with channelFilters (default type direct).**
+
+```
+<Inbox channelFilters={{type: IRoomType.Direct}} />
+```
+
+- [x] ** Inbox with channelFilters (default type direct and orgName null).**
+
+```
+<Inbox channelFilters={{type: IRoomType.Direct,orgName:orgName}} />
+```
+
+- [x] ** Inbox with channelRole (default all type).**
+
+```
+<Inbox channelFilters={{type: IRoomType.Direct}} channelRole={'Guest'} />
+```
+
+- [x] ** Inbox with supportServices (default false).**
+
+```
+<Inbox channelFilters={{type: IRoomType.Direct}} supportServices={true} />
+```
+
+- **Expected Result:** The inbox should display a list of all direct channels by default.Additionally, it should support filtering the displayed channels based on specified criteria (channelFilters).When supportServices=true, it should display all fitered channels with all support service channels (By default supportServices=false).
+
+---
+
+### 2. Inbox Conversation Test Cases
+
+---
+
+**_Example Config:_**
+
+```
+import { DialogMessages } from '@messenger-box/platform-mobile';
+import { IRoomType } from '@messenger-box/platform-client';
+const inboxConversationConfig = {
+  ['//inbox/dialogmessage']: {
+      exact: true,
+      name: 'Inbox.DialogMessages',
+      props: {
+          component:(props: any) => (
+            <DialogMessages {...props}
+              channelId={props?.route?.params?.channelId}
+              role={'Guest'}
+              isShowThreadMessage={true}
+             />
+          ),
+      },
+  },
+}
+```
+
+- [x] ** Inbox Conversation with ChannelId.**
+
+```
+<DialogMessages channelId={props?.route?.params?.channelId} />
+```
+
+- [x] ** Inbox Service Conversation with ChannelId and postParentId.**
+
+```
+<DialogThreadMessages
+  channelId={props?.route?.params?.channelId}
+  postParentId={props?.route?.params?.postParentId}
+ />
+```
+
+- [x] ** Inbox Conversation with Role.**
+
+```
+<DialogMessages channelId={props?.route?.params?.channelId} role={'Guest'} />
+```
+
+- [x] ** Inbox Conversation with Thread Messages (Default true).**
+
+```
+<DialogMessages
+  channelId={props?.route?.params?.channelId}
+  isShowThreadMessage={false} />
+```
+
+- **Expected Result:** The inbox conversation component should display a list of all direct channel messages by default for given channelId.Additionally, it should support filtering the displayed channel messages based on specified criteria (role and isShowThreadMessage).When isShowThreadMessage=false, it should display all fitered channel messages with thread messages view disabled (By default isShowThreadMessage=true).
+
+---
+
+<!-- #### Test Case 1.2: Inbox with suportService
+- **Description:** Ensure that the inbox displays a list of all direct channel with service channel.
+- **Steps:**
+  - [ ]  Navigate to the  navigation.ts.
+  - [ ]  Import Inbox component from import { Inbox } from '@messenger-box/platform-mobile'.
+  - [ ]  Pass supportServices props to inbox component .
+  ```
+  import { Inbox } from '@messenger-box/platform-mobile';
+
+  const inboxConfig = {
+    ['//l/inbox']: {
+        exact: true,
+        name: 'Inbox',
+        props: {
+            initialParams: { channelId: null },
+            component:(props: any) => (
+              <Inbox {...props} supportServices={true} />
+            ),
+            options: {
+                headerShown: true,
+                title: 'Direct messages',
+                headerTitle: 'Direct messages',
+            },
+        },
+    },
+  }
+
+  ```
+- **Expected Result:** The inbox should display a list of all direct and support service channels list. -->
+
+<!-- #### Test Case 1.2: Email Pagination
+- **Description:** Verify that pagination works correctly when there are more emails than can fit on one page.
+- **Steps:**
+  1. Navigate to the Inbox page.
+  2. Ensure there are more emails than the maximum displayed per page.
+  3. Click the "Next" button to go to the next page.
+  4. Verify that the next set of emails is displayed.
+- **Expected Result:** Emails should be paginated correctly.
+- [ ] Test Case 1.2: Email Pagination
+
+### 2. Email Details
+#### Test Case 2.1: Viewing an Email
+- **Description:** Ensure that clicking on an email opens the email in detail view.
+- **Steps:**
+  1. Navigate to the Inbox page.
+  2. Click on an email from the list.
+  3. Verify that the email detail view is displayed.
+- **Expected Result:** The email's full content is displayed.
+- [ ] Test Case 2.1: Viewing an Email
+
+### 3. Composing Emails
+#### Test Case 3.1: Composing a New Email
+- **Description:** Verify that the user can compose and send a new email.
+- **Steps:**
+  1. Click on the "Compose" button.
+  2. Fill in the recipient's email address, subject, and body.
+  3. Click "Send."
+  4. Verify that the email is sent and appears in the Sent folder.
+- **Expected Result:** The email is successfully sent and appears in the Sent folder.
+- [ ] Test Case 3.1: Composing a New Email
+
+### 4. Replying to Emails
+#### Test Case 4.1: Replying to an Email
+- **Description:** Ensure that the user can reply to an email.
+- **Steps:**
+  1. Open an email from the Inbox.
+  2. Click on the "Reply" button.
+  3. Enter the reply message.
+  4. Click "Send."
+  5. Verify that the reply is sent and appears in the Sent folder.
+- **Expected Result:** The reply is successfully sent and appears in the Sent folder.
+- [ ] Test Case 4.1: Replying to an Email
+
+### 5. Email Management
+#### Test Case 5.1: Marking an Email as Read/Unread
+- **Description:** Verify that the user can mark an email as read or unread.
+- **Steps:**
+  1. Navigate to the Inbox.
+  2. Select an email.
+  3. Click on the "Mark as Read/Unread" button.
+  4. Verify that the email's state changes accordingly.
+- **Expected Result:** The email is marked as read or unread.
+- [ ] Test Case 5.1: Marking an Email as Read/Unread
+
+#### Test Case 5.2: Deleting an Email
+- **Description:** Ensure that the user can delete an email.
+- **Steps:**
+  1. Navigate to the Inbox.
+  2. Select an email.
+  3. Click on the "Delete" button.
+  4. Confirm the deletion.
+  5. Verify that the email is removed from the Inbox.
+- **Expected Result:** The email is successfully deleted.
+- [ ] Test Case 5.2: Deleting an Email
+
+#### Test Case 5.3: Restoring a Deleted Email
+- **Description:** Verify that the user can restore a deleted email from the Trash.
+- **Steps:**
+  1. Navigate to the Trash folder.
+  2. Select a deleted email.
+  3. Click on the "Restore" button.
+  4. Verify that the email is moved back to the Inbox.
+- **Expected Result:** The email is restored to the Inbox.
+- [ ] Test Case 5.3: Restoring a Deleted Email
+
+#### Test Case 5.4: Permanently Deleting an Email
+- **Description:** Ensure that the user can permanently delete an email from the Trash.
+- **Steps:**
+  1. Navigate to the Trash folder.
+  2. Select a deleted email.
+  3. Click on the "Permanently Delete" button.
+  4. Confirm the deletion.
+  5. Verify that the email is removed permanently.
+- **Expected Result:** The email is permanently deleted and cannot be recovered.
+- [ ] Test Case 5.4: Permanently Deleting an Email
+
+### 6. Searching Emails
+#### Test Case 6.1: Searching for an Email by Subject
+- **Description:** Verify that the search functionality works for finding emails by subject.
+- **Steps:**
+  1. Navigate to the Inbox.
+  2. Enter a keyword in the search bar that matches the subject of an email.
+  3. Click the "Search" button.
+  4. Verify that the search results display the correct emails.
+- **Expected Result:** Emails with the matching subject are displayed in the search results.
+- [ ] Test Case 6.1: Searching for an Email by Subject
+
+#### Test Case 6.2: Searching for an Email by Sender
+- **Description:** Ensure that the search functionality works for finding emails by sender.
+- **Steps:**
+  1. Navigate to the Inbox.
+  2. Enter the sender's name or email address in the search bar.
+  3. Click the "Search" button.
+  4. Verify that the search results display the correct emails.
+- **Expected Result:** Emails from the specified sender are displayed in the search results.
+- [ ] Test Case 6.2: Searching for an Email by Sender -->