agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/fpe-api/install.ts

@@ -0,0 +1,128 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import {FpeApiInterface} from './typeDefinition';
+import ReactIs from 'react-is';
+/**
+ *
+ * @param config FPE options to override the UI components and customize the application
+ * @returns config options
+ */
+
+function isString(data: any) {
+  if (data && typeof data === 'string') {
+    return true;
+  }
+  return false;
+}
+
+function isFunction(data: any) {
+  if (data && typeof data === 'function') {
+    return true;
+  }
+  return false;
+}
+
+function isObject(data: any) {
+  if (data && typeof data === 'object') {
+    return true;
+  }
+  return false;
+}
+
+function isComponent(data: any) {
+  if (data && ReactIs.isValidElementType(data)) {
+    return true;
+  }
+  return false;
+}
+
+function validateComponents(components: any) {
+  for (const key in components) {
+    let comp = components[key];
+    if (comp) {
+      if (isComponent(comp) || isObject(comp)) {
+        if (isObject(comp)) {
+          validateComponents(comp);
+        }
+      } else {
+        console.error(
+          `InstallFPE:Error ${key} should be a react component or object`,
+        );
+      }
+    }
+  }
+}
+
+function validateLifecycle(data: any) {
+  for (const key in data) {
+    const callback = data[key];
+    if (callback && !isFunction(callback)) {
+      console.error(
+        `InstallFPE:Error ${key} should be a function that return async function`,
+      );
+    }
+  }
+}
+
+function validateCustomRoutes(routes: any) {
+  if (routes && !Array.isArray(routes)) {
+    console.error(`InstallFPE:Error customRoutes should be an array`);
+  }
+}
+
+function validateAppRoot(data: any) {
+  if (data && !isComponent(data)) {
+    console.error(`InstallFPE:Error appRoot should be a react component`);
+  }
+}
+
+function validatei18n(data: any) {
+  if (data) {
+    if (!Array.isArray(data)) {
+      console.error(`InstallFPE:Error i18n should be an array`);
+    } else {
+      data.map((item) => {
+        const langData = item.data;
+        for (const key in langData) {
+          const value = langData[key];
+          if (value) {
+            if (!(isString(value) || isFunction(value))) {
+              console.error(
+                `InstallFPE:Error ${item.locale} ${key} should be a string or function`,
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+}
+export const installFPE = (config: FpeApiInterface) => {
+  //validating the components
+  config?.components && validateComponents(config.components);
+
+  //validating the custom routes
+  //commented for v1 release
+  //config?.customRoutes && validateCustomRoutes(config.customRoutes);
+
+  //validating the app root
+  config?.appRoot && validateAppRoot(config.appRoot);
+
+  //validating the i18n
+  config?.i18n && validatei18n(config.i18n);
+
+  //validating the lifecycle
+  //commented for v1 release
+  //config?.lifecycle && validateLifecycle(config?.lifecycle);
+
+  return config;
+};

package/template/fpe-api/typeDefinition.ts

@@ -0,0 +1,143 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import React from 'react';
+export type {ChatBubbleProps} from '../src/components/ChatContext';
+import {ChatBubbleProps} from '../src/components/ChatContext';
+import {
+  RenderInterface,
+  RenderStateInterface,
+  UidType,
+} from '../agora-rn-uikit';
+import {i18nInterface} from '../src/language/i18nTypes';
+import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
+export type {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../src/subComponents/ChatInput';
+import {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../src/subComponents/ChatInput';
+
+export const CUSTOM_ROUTES_PREFIX = '/r/';
+
+interface BeforeAndAfterInterface {
+  // commented for v1 release
+  // before?: React.ComponentType;
+  // after?: React.ComponentType;
+}
+
+export interface PreCallInterface extends BeforeAndAfterInterface {
+  preview?: React.ComponentType;
+  audioMute?: React.ComponentType;
+  videoMute?: React.ComponentType;
+  meetingName?: React.ComponentType;
+  deviceSelect?: React.ComponentType;
+  joinButton?: React.ComponentType;
+  textBox?: React.ComponentType;
+}
+export interface ChatCmpInterface extends BeforeAndAfterInterface {
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSentButton?: React.ComponentType<ChatSendButtonProps>;
+}
+
+export interface renderComponentInterface {
+  user: RenderInterface;
+}
+
+export interface renderComponentObjectInterface {
+  [key: string]: React.ComponentType<renderComponentInterface>;
+}
+
+export type layoutComponent = React.ComponentType<{
+  renderData: RenderStateInterface['renderPosition'];
+}>;
+
+export interface layoutObjectBase {
+  name: string;
+  label: string;
+  component: layoutComponent;
+}
+
+export interface layoutObjectWithIcon extends layoutObjectBase {
+  icon: string;
+  iconName?: never;
+}
+export interface layoutObjectWithIconName extends layoutObjectBase {
+  icon?: never;
+  iconName: keyof IconsInterface;
+}
+export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
+
+export interface VideoCallInterface extends BeforeAndAfterInterface {
+  // commented for v1 release
+  //topBar?: React.ComponentType;
+  //settingsPanel?: React.ComponentType;
+  participantsPanel?: React.ComponentType;
+  bottomBar?: React.ComponentType;
+  // commented for v1 release
+  //chat?: ChatCmpInterface;
+  customContent?: renderComponentObjectInterface;
+  customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
+}
+
+export type ComponentsInterface = {
+  // commented for v1 release
+  //precall?: PreCallInterface | React.ComponentType;
+  //create?: React.ComponentType;
+  //share?: React.ComponentType;
+  //join?: React.ComponentType;
+  videoCall?: VideoCallInterface | React.ComponentType;
+};
+
+export interface CustomRoutesInterface {
+  path: string;
+  component: React.ComponentType;
+  exact?: boolean;
+  componentProps?: object;
+  isPrivateRoute?: boolean;
+  routeProps?: object;
+  failureRedirectTo?: string;
+}
+
+export type CustomHookType = () => () => Promise<void>;
+
+export interface FpeApiInterface {
+  /**
+   * components used to replace whole screen or subcomponents
+   */
+  components?: ComponentsInterface;
+  /**
+   * custom routes used to add new page/routes
+   */
+  // commented for v1 release
+  //customRoutes?: CustomRoutesInterface[];
+  /**
+   * Custom context/api provider wrapped in root level
+   */
+  appRoot?: React.ComponentType;
+  /**
+   * Internationlization
+   */
+  i18n?: i18nInterface[];
+  /**
+   * Life cycle events
+   */
+  // commented for v1 release
+  // lifecycle?: {
+  //   useBeforeJoin?: CustomHookType;
+  //   useBeforeCreate?: CustomHookType;
+  // };
+  // commented for v1 release
+  //customUserContext?: () => any;
+}

package/template/fpe-api/useFpe.tsx

@@ -0,0 +1,35 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import React from 'react';
+import fpeConfig from 'test-fpe';
+import {FpeApiInterface} from './typeDefinition';
+import {createHook} from 'fpe-implementation';
+
+const FpeContext: React.Context<FpeApiInterface> =
+  React.createContext(fpeConfig);
+
+export interface FpeProviderInterface {
+  children: React.ReactNode;
+  value: FpeApiInterface;
+}
+
+const FpeProvider = (props: FpeProviderInterface) => {
+  return (
+    <FpeContext.Provider value={props.value}>
+      {props.children}
+    </FpeContext.Provider>
+  );
+};
+
+const useFpe = createHook(FpeContext);
+
+export {useFpe, FpeProvider};

package/template/fpe-api/utils.ts

@@ -0,0 +1,62 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+// commented for v1 release
+//export {default as useIsScreenShare} from '../src/utils/isScreenShareUser';
+export {default as useIsHost} from '../src/utils/isHostUser';
+export {default as useIsAttendee} from '../src/utils/IsAttendeeUser';
+export {default as useIsPSTN} from '../src/utils/isPSTNUser';
+export {default as useUserList} from '../src/utils/useUserList';
+// commented for v1 release
+//export {default as useGroupMessages} from '../src/utils/useGroupMessages';
+//export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
+export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
+export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
+export {default as useSetName} from '../src/utils/useSetName';
+export {default as useGetName} from '../src/utils/useGetName';
+// commented for v1 release
+//export {useSidePanel} from '../src/utils/useSidePanel';
+// commented for v1 release
+// export {
+//   default as useUnreadMessageCount,
+//   UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useUnreadMessageCount';
+// export {
+//   default as useSetUnreadMessageCount,
+//   SET_UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useSetUnreadMessageCount';
+export {default as useNavigateTo} from '../src/utils/useNavigateTo';
+export {default as useNavParams} from '../src/utils/useNavParams';
+export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
+export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
+// commented for v1 release
+// export {
+//   default as useSendMessage,
+//   MESSAGE_TYPE,
+// } from '../src/utils/useSendMessage';
+// export {controlMessageEnum} from '../src/components/ChatContext';
+// export {
+//   default as useSendControlMessage,
+//   CONTROL_MESSAGE_TYPE,
+// } from '../src/utils/useSendControlMessage';
+export {
+  MUTE_LOCAL_TYPE,
+  default as useMuteToggleLocal,
+} from '../src/utils/useMuteToggleLocal';
+export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
+export {
+  default as useRemoteMute,
+  MUTE_REMOTE_TYPE,
+} from '../src/utils/useRemoteMute';
+export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
+
+//export common function
+export * from '../src/utils/common';

package/template/fpe-implementation/createHook.ts

@@ -0,0 +1,33 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import React, { useContext } from 'react';
+/**
+ * 
+ * @param context - any context data which we want to extract the data.
+ * @returns useContextWithSelector in which we can pass selector function to extract data from the context that we passed.
+ */
+function createHook<T>(context: React.Context<T>) {
+
+  function useContextWithSelector<U>(contextSelector: (data: T) => U): U;
+  function useContextWithSelector(): T;
+  /**
+   * 
+   * @param contextSelector is used to pass callback function used to select data from the context data
+   * @returns the data selected from the context
+   */
+  function useContextWithSelector<U>(contextSelector?: (data: T) => U): U | T {
+    const data = useContext(context);
+    return contextSelector ? contextSelector(data) : data
+  }
+  return useContextWithSelector;
+}
+export default createHook;

package/template/fpe-implementation/dummyFpe.ts

@@ -0,0 +1,17 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import { installFPE } from "fpe-api/install";
+/**
+ * Dummy FPE used to load when project doesn't have the FPE.
+ */
+const data = installFPE({});
+export default data;

package/template/fpe-implementation/index.ts

@@ -0,0 +1 @@
+export { default as createHook } from './createHook';

package/template/fpe-todo.txt

@@ -0,0 +1,14 @@
+1. test-fpe name should be changed 
+  - template/_gitignore
+  - babel.config.js
+  - webpack.config.js
+  - fpe.config.js
+  - fpe-api index.ts
+  - fpe-api useFPE
+2. What if user called custom context without wrapping provider
+  - useContext will return the default vaule. so we can't identify whether is wrapped with the provider or not.
+3. CustomUserContext 
+4. Add sibling into view without overriding
+5. Translation labels
+  - some of keys
+6.Layout dropdown implementation

package/template/fpe.config.js

@@ -0,0 +1,25 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+
+/*
+getFpePath - will return test-fpe if exists otherwise it will return the dummy fpe path
+*/
+const fs = require("fs");
+const FpePath = './test-fpe/index.ts'
+const FpeDummyPath = './fpe-implementation/dummyFpe.ts'
+const getFpePath = () => {
+  if (fs.existsSync(FpePath)) {
+    return FpePath    
+  }
+  return FpeDummyPath
+}
+module.exports = getFpePath

package/template/global.d.ts

@@ -77,3 +77,7 @@ interface ConfigInterface {
   LOG_ENABLED: boolean;
 }
 declare var $config: ConfigInterface;
+declare module 'test-fpe'{
+  const data:{}
+  export default data;
+}

package/template/index.rsdk.tsx

@@ -0,0 +1,27 @@
+/*
+********************************************
+ 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.
+*********************************************
+*/
+/**
+ * @format
+ */
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import React from 'react';
+export * from 'fpe-api';
+
+interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
+  View: React.FC;
+}
+
+const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
+    ...AppBuilderSdkApi,
+    View: SDKAppWrapper,
+  }
+export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -0,0 +1,27 @@
+import {AppRegistry} from 'react-native';
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+export * from 'fpe-api';
+
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
+}
+
+const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
+
+// init code
+class AppBuilder extends HTMLElement {
+  connectedCallback() {
+    this.style.height = '100%';
+    this.style.width = '100%';
+    this.style.display = 'flex';
+    this.style.flex = '1';
+    AppRegistry.registerComponent('App', () => SDKAppWrapper);
+    AppRegistry.runApplication('App', {
+      // initialProps: {passphrase: this.getAttribute('passphrase')},
+      rootTag: this,
+    });
+  }
+}
+
+customElements.define('app-builder', AppBuilder);
+
+export default AppBuilderWebSdkApi;