agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package/template/metro.config.js

@@ -1,36 +1,11 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
 /**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
  *
- * @format
+ * @type {import('metro-config').MetroConfig}
  */
+const config = {};
 
-const blacklist = require('metro-config/src/defaults/exclusionList');
-
-// blacklist is a function that takes an array of regexes and combines
-// them with the default blacklist to return a single regex.
-
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-  resolver: {
-    blacklistRE: blacklist([/\.electron\/.*/]),
-  },
-};
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/template/package.json

@@ -48,75 +48,91 @@
     "url": "https://github.com/AgoraIO-Community/app-builder-core"
   },
   "dependencies": {
-    "@apollo/client": "3.3.20",
-    "@gorhom/bottom-sheet": "4.4.5",
+    "@apollo/client": "3.8.1",
+    "@gorhom/bottom-sheet": "4.4.7",
+    "@netless/react-native-whiteboard": "^0.0.14",
     "@openspacelabs/react-native-zoomable-view": "^2.1.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/checkbox": "0.4.2",
+    "@react-native-async-storage/async-storage": "1.19.2",
+    "@react-native-community/checkbox": "0.5.16",
     "@react-native-community/clipboard": "1.5.1",
-    "@sentry/react": "6.5.1",
-    "@sentry/react-native": "2.4.3",
-    "@sentry/tracing": "6.2.1",
     "@supersami/rn-foreground-service": "^1.1.1",
     "add": "^2.0.6",
+    "agora-extension-ai-denoiser": "1.1.0",
+    "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
-    "agora-rtc-sdk-ng": "4.14.0",
-    "agora-rtm-sdk": "1.4.3-203",
+    "agora-rtc-sdk-ng": "4.20.1-1",
+    "agora-rtm-sdk": "1.5.1",
+    "buffer": "^6.0.3",
     "electron-log": "4.3.5",
     "electron-squirrel-startup": "1.0.0",
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
+    "fetch-retry": "^5.0.6",
     "graphql": "15.5.0",
+    "hark": "^1.2.3",
     "jwt-decode": "3.1.2",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
     "npm": "^9.7.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "p-queue": "^7.3.4",
+    "protobufjs": "^7.2.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-is": "18.0.0",
-    "react-native": "0.64",
-    "react-native-agora": "3.7.1",
+    "react-native": "0.72.4",
+    "react-native-agora": "4.2.6-build.3-rc.1",
+    "react-native-document-picker": "^9.1.0",
     "react-native-exit-app": "1.1.0",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-keyboard-manager": "6.5.4-1",
-    "react-native-reanimated": "2.12.0",
+    "react-native-reanimated": "3.4.2",
     "react-native-responsive-fontsize": "0.5.1",
+    "react-native-share": "10.0.2",
     "react-native-svg": "13.6.0",
     "react-native-vector-icons": "9.2.0",
     "react-native-walkthrough-tooltip": "1.4.0",
-    "react-native-web": "0.14.13",
+    "react-native-web": "0.19.7",
+    "react-native-webview": "13.8.1",
     "react-router-dom": "5.2.0",
     "react-router-native": "5.2.0",
     "react-spring-bottom-sheet": "3.4.1",
-    "react-tooltip": "4.5.1"
+    "react-tooltip": "4.5.1",
+    "rn-fetch-blob": "0.12.0",
+    "white-web-sdk": "2.16.42"
   },
   "devDependencies": {
-    "@babel/core": "7.14.3",
+    "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-proposal-optional-chaining": "7.16.0",
-    "@babel/preset-env": "7.14.4",
+    "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@babel/runtime": "7.14.0",
+    "@babel/runtime": "^7.20.0",
     "@bam.tech/react-native-make": "3.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@react-native-community/eslint-config": "1.1.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.11",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/hark": "^1.2.2",
     "@types/jest": "25.2.3",
+    "@types/react": "17.0.2",
     "@types/react-is": "17.0.3",
     "@types/react-native": "0.67.6",
     "@types/react-native-keep-awake": "2.0.2",
     "@types/react-router-dom": "5.1.7",
     "@types/react-router-native": "5.1.0",
-    "@types/react-test-renderer": "16.9.5",
+    "@types/react-test-renderer": "18.0.0",
     "@types/webpack-dev-server": "3.11.4",
     "@types/webpack-env": "^1.16.4",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
-    "@typescript-eslint/parser": "2.34.0",
-    "babel-jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "babel-jest": "^29.2.1",
     "babel-loader": "8.2.4",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-define": "2.0.1",
@@ -126,7 +142,7 @@
     "electron": "16.0.1",
     "electron-builder": "23.6.0",
     "electron-notarize": "1.0.0",
-    "eslint": "6.8.0",
+    "eslint": "^8.19.0",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",
@@ -134,15 +150,16 @@
     "gulp-replace": "^1.1.3",
     "html-webpack-plugin": "4.5.2",
     "ignore-loader": "^0.1.2",
-    "jest": "25.5.4",
-    "metro-react-native-babel-preset": "0.59.0",
-    "prettier": "2.3.1",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "prettier": "^2.4.1",
     "react-devtools-electron": "4.7.0",
+    "react-native-url-polyfill": "^2.0.0",
     "react-refresh": "0.12.0",
-    "react-test-renderer": "17.0.1",
+    "react-test-renderer": "18.2.0",
     "style-loader": "3.3.1",
     "ts-loader": "^8.3.0",
-    "typescript": "3.9.9",
+    "typescript": "4.8.4",
     "webpack": "5.72.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "4.8.1",
@@ -150,15 +167,7 @@
     "webpack-node-externals": "3.0.0",
     "yargs": "15.4.1"
   },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
+  "engines": {
+    "node": ">=18"
   }
 }

package/template/react-native-toast-message/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
-
+import { IconsInterface } from '../src/atoms/CustomIcon';
 declare module 'react-native-toast-message' {
   interface AnyObject {
     [key: string]: any;
@@ -56,6 +56,8 @@ declare module 'react-native-toast-message' {
       onShow?: () => void;
       onHide?: () => void;
       onPress?: () => void;
+      leadingIcon?: React.ReactNode;
+      leadingIconName?: keyof IconsInterface;
     }): void;
 
     static hide(): void;

package/template/react-native-toast-message/index.js

@@ -2,3 +2,4 @@ import Toast from './src';
 
 export { default as BaseToast } from './src/components/base';
 export default Toast;
+

package/template/react-native-toast-message/src/components/base/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Icon from '../icon';
 import { icons } from '../../assets';
 import { stylePropType } from '../../utils/prop-types';
-import styles, { HEIGHT } from './styles';
+import styles from './styles';
 
 function BaseToast({
   leadingIcon,
@@ -26,7 +26,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -37,43 +37,31 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              justifyContent: 'space-between'
+              alignItems: 'center'
             }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                flex: 1
-              }}>
-              {leadingIcon ? leadingIcon : <></>}
-              <Text
-                testID='text1'
-                style={[styles.text1, text1Style]}
-                numberOfLines={text1NumberOfLines}>
-                {text1}
-              </Text>
-            </View>
-            <View style={{ justifyContent: 'flex-start', alignSelf: 'center' }}>
-              {trailingIcon ? trailingIcon : <></>}
-            </View>
-          </View>
-        )}
-        {(text2 || text2?.length > 0) && (
-          <View>
+            {leadingIcon ? leadingIcon : <></>}
+
             <Text
-              testID='text2'
-              style={[styles.text2, text2Style]}
-              numberOfLines={text2NumberOfLines}>
-              {text2}
+              testID='text1'
+              style={[styles.text1, text1Style]}
+              numberOfLines={text1NumberOfLines}>
+              {text1}
             </Text>
           </View>
         )}
+        {(text2 || text2?.length > 0) && (
+          <Text
+            testID='text2'
+            style={[styles.text2, text2Style]}
+            numberOfLines={text2NumberOfLines}>
+            {text2}
+          </Text>
+        )}
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 32,
-              paddingBottom: 24
+              paddingTop: 16
             }}>
             {primaryBtn ? primaryBtn : <></>}
             {secondaryBtn ? secondaryBtn : <></>}
@@ -82,12 +70,11 @@ function BaseToast({
           <></>
         )}
       </View>
+      {trailingIcon ? trailingIcon : <></>}
     </TouchableOpacity>
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
@@ -106,6 +93,7 @@ BaseToast.propTypes = {
 BaseToast.defaultProps = {
   leadingIcon: null,
   trailingIcon: null,
+  leadingIconName: null,
   text1: undefined,
   text2: undefined,
   onPress: undefined,

package/template/react-native-toast-message/src/components/base/styles.js

@@ -1,40 +1,37 @@
-import { StyleSheet } from 'react-native';
-import colors from '../../colors';
-
-export const HEIGHT = 105;
+import { StyleSheet, Platform } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
-    height: HEIGHT,
-    borderRadius: 6,
-    backgroundColor: colors.white,
+    borderRadius: 4,
+    borderTopWidth: 4,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    width: '100%',
+    paddingHorizontal: Platform.OS === 'android' ? 16 : 24,
+    paddingVertical: 16,
+    height: 'auto',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 2
   },
-  borderTop: {
-    borderTopWidth: 5,
-    borderTopColor: colors.alto
-  },
   contentContainer: {
-    paddingLeft: 20,
     flex: 1,
-    flexDirection: 'row',
+    overflow: 'hidden',
+    flexDirection: 'column',
     justifyContent: 'flex-start'
   },
   text1: {
-    fontSize: 15,
+    fontSize: 14,
+    lineHeight: 22,
     fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '600',
-    marginRight: 2
+    fontWeight: '700'
   },
   text2: {
-    fontSize: 15,
-    fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '400'
+    marginTop: 4,
+    fontSize: 14,
+    lineHeight: 22,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro'
   }
 });

package/template/react-native-toast-message/src/components/checkbox.js

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity, Text, Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import { stylePropType } from '../utils/prop-types';
-import styles, { HEIGHT } from './base/styles';
+import styles from './base/styles';
 import Checkbox from '../../../src/subComponents/Checkbox';
-import { PrimaryButton } from 'customization-api';
+import PrimaryButton from '../../../src/atoms/PrimaryButton';
 import TertiaryButton from '../../../src/atoms/TertiaryButton';
 
 function BaseToast({
@@ -30,7 +30,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -76,9 +76,7 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 8,
-              marginLeft: 4
+              paddingTop: 12
             }}
             onPress={() => {
               setChecked((e) => !e);
@@ -97,19 +95,22 @@ function BaseToast({
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 24
+              marginTop: 16
             }}>
             {primaryBtn && (
               <PrimaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  lineHeight: 14,
+                  paddingLeft: 0
+                }}
                 containerStyle={{
-                  height: 40,
+                  height: 32,
                   borderRadius: 4,
-                  paddingVertical: 0,
-                  paddingHorizontal: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20,
                   minWidth: 'unset'
                 }}
                 {...primaryBtn}
@@ -121,11 +122,17 @@ function BaseToast({
             )}
             {secondaryBtn && (
               <TertiaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  paddingLeft: 0,
+                  lineHeight: 14
+                }}
                 containerStyle={{
-                  height: 40,
-                  marginLeft: 16,
-                  paddingVertical: 0
+                  height: 32,
+                  marginLeft: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20
                 }}
                 {...secondaryBtn}
                 onPress={(e) => {
@@ -143,8 +150,6 @@ function BaseToast({
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,

package/template/react-native-toast-message/src/index.js

@@ -255,8 +255,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -381,6 +382,7 @@ class Toast extends Component {
           'text1',
           'text2',
           'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',

package/template/react-native-toast-message/src/index.sdk.tsx

@@ -254,8 +254,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -379,6 +380,8 @@ class Toast extends Component {
           'isVisible',
           'text1',
           'text2',
+          'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',

package/template/src/App.tsx

@@ -9,18 +9,19 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
+import React, {useState, useLayoutEffect} from 'react';
 import {Platform} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import AppWrapper from './AppWrapper';
 import {
-  MeetingInfoContextInterface,
-  MeetingInfoDefaultValue,
-  MeetingInfoProvider,
-} from './components/meeting-info/useMeetingInfo';
-import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
+  RoomInfoContextInterface,
+  RoomInfoDefaultValue,
+  RoomInfoProvider,
+} from './components/room-info/useRoomInfo';
+import {SetRoomInfoProvider} from './components/room-info/useSetRoomInfo';
 import {ShareLinkProvider} from './components/useShareLink';
 import AppRoutes from './AppRoutes';
+import {isWebInternal} from './utils/common';
 
 // hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
@@ -32,32 +33,88 @@ if (Platform.OS === 'ios') {
 
 //Extending the UI Kit Type defintion to add custom attribute to render interface
 declare module 'agora-rn-uikit' {
-  interface DefaultRenderInterface {
-    name: string;
-    screenUid: number;
-    offline: boolean;
-    lastMessageTimeStamp: number;
-  }
-  interface RtcPropsInterface {
-    screenShareUid: number;
-    screenShareToken?: string;
+  // interface DefaultContentInterface {
+  //   name: string;
+  //   screenUid: number;
+  //   offline: boolean;
+  //   lastMessageTimeStamp: number;
+  // }
+  // interface RtcPropsInterface {
+  //   screenShareUid: number;
+  //   screenShareToken?: string;
+  // }
+}
+
+declare global {
+  interface Navigator {
+    notifyReady?: () => boolean;
   }
 }
 
 const App: React.FC = () => {
-  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
-    MeetingInfoDefaultValue,
-  );
+  //commented for v1 release
+  //const CustomRoutes = useCustomization((data) => data?.customRoutes);
+  // const RenderCustomRoutes = () => {
+  //   try {
+  //     return (
+  //       CustomRoutes &&
+  //       Array.isArray(CustomRoutes) &&
+  //       CustomRoutes.length &&
+  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
+  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
+  //         return (
+  //           <RouteComponent
+  //             path={CUSTOM_ROUTES_PREFIX + item.path}
+  //             exact={item.exact}
+  //             key={i}
+  //             failureRedirectTo={
+  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
+  //             }
+  //             {...item.routeProps}>
+  //             <item.component {...item.componentProps} />
+  //           </RouteComponent>
+  //         );
+  //       })
+  //     );
+  //   } catch (error) {
+  //     console.error('Error on rendering the custom routes');
+  //     return null;
+  //   }
+  // };
+
+  const notifyReady = () => {
+    if (typeof window.navigator.notifyReady === 'function') {
+      console.log('recording-bot: notifyReady is available');
+      window.navigator.notifyReady();
+    } else {
+      console.log('recording-bot: notifyReady is un-available');
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (isWebInternal()) {
+      // Register only on web
+      window.addEventListener('load', notifyReady);
+    }
+    return () => {
+      if (isWebInternal()) {
+        window.removeEventListener('load', notifyReady);
+      }
+    };
+  }, []);
+
+  const [roomInfo, setRoomInfo] =
+    useState<RoomInfoContextInterface>(RoomInfoDefaultValue);
 
   return (
     <AppWrapper>
-      <SetMeetingInfoProvider value={{setMeetingInfo}}>
-        <MeetingInfoProvider value={{...meetingInfo}}>
+      <SetRoomInfoProvider value={{setRoomInfo}}>
+        <RoomInfoProvider value={{...roomInfo}}>
           <ShareLinkProvider>
             <AppRoutes />
           </ShareLinkProvider>
-        </MeetingInfoProvider>
-      </SetMeetingInfoProvider>
+        </RoomInfoProvider>
+      </SetRoomInfoProvider>
     </AppWrapper>
   );
 };