agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/atoms/Popup.tsx

@@ -0,0 +1,147 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  ModalProps,
+  ViewStyle,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import IconButton from './IconButton';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {isMobileUA, useIsDesktop} from '../../src/utils/common';
+
+interface PopupProps extends ModalProps {
+  title?: string;
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  showCloseIcon?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+}
+const Popup = (props: PopupProps) => {
+  const {
+    title,
+    modalVisible,
+    setModalVisible,
+    children,
+    showCloseIcon,
+    ...otherProps
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(false);
+      }}
+      {...otherProps}>
+      <View
+        style={[
+          styles.centeredView,
+          isDesktop && {alignItems: 'center'},
+          props?.containerStyle,
+        ]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setModalVisible(false);
+          }}>
+          <View style={styles.backDrop} />
+        </TouchableWithoutFeedback>
+
+        <View style={[styles.modalView, props?.contentContainerStyle]}>
+          {title || showCloseIcon ? (
+            <View style={styles.header}>
+              <Text style={styles.title}>{title}</Text>
+              {showCloseIcon ? (
+                <View>
+                  <IconButton
+                    hoverEffect={true}
+                    hoverEffectStyle={{
+                      backgroundColor: $config.ICON_BG_COLOR,
+                      borderRadius: 20,
+                    }}
+                    iconProps={{
+                      iconType: 'plain',
+                      iconContainerStyle: {
+                        padding: isMobileUA() ? 0 : 5,
+                      },
+                      name: 'close',
+                      tintColor: $config.SECONDARY_ACTION_COLOR,
+                    }}
+                    onPress={() => {
+                      setModalVisible(false);
+                    }}
+                  />
+                </View>
+              ) : (
+                <></>
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default Popup;
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    padding: 32,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 650,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 32,
+  },
+  title: {
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 24,
+    lineHeight: 24,
+    fontWeight: '600',
+    flex: 0.9,
+  },
+});

package/template/src/atoms/PrimaryButton.tsx

@@ -9,51 +9,76 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
-  Pressable,
-  PressableProps,
-  StyleProp,
+  TouchableOpacityProps,
   StyleSheet,
   Text,
   TextStyle,
+  View,
+  ViewStyle,
+  TouchableOpacity,
 } from 'react-native';
+import ThemeConfig from '../theme';
 import {primaryButton, primaryButtonText} from '../../theme.json';
-import ColorContext from '../components/ColorContext';
+import {IconsInterface} from '../atoms/CustomIcon';
+import ImageIcon from '../atoms/ImageIcon';
 
-export interface PrimaryButtonProps extends PressableProps {
+export interface PrimaryButtonProps extends TouchableOpacityProps {
   text?: string;
+  iconName?: keyof IconsInterface;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
 }
 
 export default function PrimaryButton(props: PrimaryButtonProps) {
-  const {primaryColor} = useContext(ColorContext);
-  const {children, ...otherProps} = props;
+  const {children, iconName, textStyle, containerStyle, ...otherProps} = props;
   return (
-    <Pressable
+    <TouchableOpacity
       style={[
-        styles.primaryButton,
-        {backgroundColor: props.disabled ? primaryColor + '80' : primaryColor},
+        styles.container,
+        props?.disabled
+          ? {backgroundColor: $config.SEMANTIC_NEUTRAL}
+          : {backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR},
+        containerStyle ? containerStyle : {},
       ]}
       {...otherProps}>
-      <>
-        {props.text ? (
-          <Text
-            style={[
-              styles.primaryButtonText as StyleProp<TextStyle>,
-              {color: '#fff'},
-            ]}>
-            {props.text}
-          </Text>
-        ) : (
-          <></>
-        )}
-        {children}
-      </>
-    </Pressable>
+      {iconName && (
+        <View style={{marginRight: 8}}>
+          <ImageIcon
+            iconType="plain"
+            name={iconName}
+            tintColor={$config.PRIMARY_ACTION_TEXT_COLOR}
+          />
+        </View>
+      )}
+      {props.text && (
+        <Text style={[styles.text, textStyle ? textStyle : {}]}>
+          {props.text}
+        </Text>
+      )}
+    </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   primaryButton,
   primaryButtonText,
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 52,
+    paddingVertical: 18,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    minWidth: 250,
+  },
+  text: {
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.medium,
+    fontWeight: '700',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    //paddingLeft: 8,
+    textTransform: 'uppercase',
+  },
 });

package/template/src/atoms/RecordingInfo.tsx

@@ -0,0 +1,52 @@
+import {StyleSheet, Text, View} from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import React from 'react';
+import {isMobileUA} from '../utils/common';
+
+const RecordingInfo = ({recordingLabel = ''}) => {
+  return (
+    <View style={[styles.recordingView]}>
+      <View style={[styles.recordingStatus]} />
+      {recordingLabel ? (
+        <Text style={styles.recordingText}>{recordingLabel}</Text>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+};
+
+export default RecordingInfo;
+
+const styles = StyleSheet.create({
+  recordingView: {
+    padding: 12,
+    paddingVertical: isMobileUA() ? 5 : 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    backgroundColor: $config.ICON_BG_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
+  },
+  recordingText: {
+    fontSize: 12,
+    lineHeight: 12,
+    fontWeight: '600',
+    fontFamily: 'Source Sans Pro',
+    color: $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
+    marginLeft: 8,
+  },
+  recordingStatus: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: $config.SEMANTIC_ERROR,
+  },
+});

package/template/src/atoms/SecondaryButton.tsx

@@ -18,6 +18,7 @@ import {
   Text,
   TextStyle,
 } from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {secondaryBtn, secondaryButtonText} from '../../theme.json';
 // import ColorContext from '../components/ColorContext';
 
@@ -27,7 +28,7 @@ export interface SecondaryButtonProps extends TouchableOpacityProps {
 }
 
 export default function SecondaryButton(props: SecondaryButtonProps) {
-  // const primaryColor = $config.PRIMARY_FONT_COLOR; //useContext(ColorContext);
+  // const primaryColor = $config.FONT_COLOR; //useContext(ColorContext);
   const {children, ...otherProps} = props;
   return (
     <TouchableOpacity
@@ -35,8 +36,9 @@ export default function SecondaryButton(props: SecondaryButtonProps) {
         styles.secondaryBtn,
         {
           borderColor: props.disabled
-            ? $config.PRIMARY_COLOR + '80'
-            : $config.PRIMARY_COLOR,
+            ? $config.PRIMARY_ACTION_BRAND_COLOR +
+              hexadecimalTransparency['80%']
+            : $config.PRIMARY_ACTION_BRAND_COLOR,
         },
       ]}
       {...otherProps}>
@@ -46,8 +48,9 @@ export default function SecondaryButton(props: SecondaryButtonProps) {
             styles.secondaryButtonText as StyleProp<TextStyle>,
             {
               color: props.disabled
-                ? $config.PRIMARY_COLOR + '80'
-                : $config.PRIMARY_COLOR,
+                ? $config.PRIMARY_ACTION_BRAND_COLOR +
+                  hexadecimalTransparency['80%']
+                : $config.PRIMARY_ACTION_BRAND_COLOR,
             },
           ]}>
           {props.text}

package/template/src/atoms/Spacer.tsx

@@ -0,0 +1,22 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+
+interface SpacerProps {
+  size: number | string;
+  horizontal?: boolean;
+}
+
+const Spacer = ({size, horizontal = false}: SpacerProps) => {
+  return (
+    <View
+      style={{
+        width: horizontal ? size : 'auto',
+        height: !horizontal ? size : 'auto',
+      }}
+    />
+  );
+};
+
+export default Spacer;
+
+const styles = StyleSheet.create({});

package/template/src/atoms/TertiaryButton.tsx

@@ -0,0 +1,78 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import React, {useState} from 'react';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {isWebInternal} from '../utils/common';
+
+interface ButtonProps extends TouchableOpacityProps {
+  setRef?: (ref: any) => void;
+  text?: string;
+  children?: React.ReactNode;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const TertiaryButton = (props: ButtonProps) => {
+  const {text, ...rest} = props;
+  const [isHovered, setIsHovered] = useState();
+  return (
+    <PlatformWrapper setIsHovered={setIsHovered}>
+      <TouchableOpacity
+        ref={(ref) => props?.setRef && props.setRef(ref)}
+        style={[
+          styles.container,
+          isHovered
+            ? {
+                backgroundColor:
+                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+              }
+            : {},
+          props?.containerStyle,
+        ]}
+        {...rest}>
+        <Text style={[styles.text, props?.textStyle]}>{text}</Text>
+      </TouchableOpacity>
+    </PlatformWrapper>
+  );
+};
+const PlatformWrapper = ({children, setIsHovered}) => {
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+};
+export default TertiaryButton;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    borderWidth: 1,
+    borderColor: $config.SECONDARY_ACTION_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+  },
+});

package/template/src/atoms/TextInput.tsx

@@ -13,28 +13,26 @@ import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
 import {isWebInternal} from '../utils/common';
 import {textInput} from '../../theme.json';
-import ColorContext from '../components/ColorContext';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
-const PrimaryButton = (props: TextInputProps) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {style, ...otherProps} = props;
+interface TextInputCustomProps extends TextInputProps {
+  setRef?: (ref: any) => void;
+}
+
+const TextInputCustom = (props: TextInputCustomProps) => {
+  const {style, setRef, ...otherProps} = props;
   return (
     <TextInput
-      style={[
-        styles.textInput,
-        styles.textWrapFix,
-        style,
-        styles.noOutline,
-        {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR},
-      ]}
-      placeholderTextColor={$config.PRIMARY_FONT_COLOR + '70'}
-      {...otherProps}
+      ref={(ref) => props?.setRef && props.setRef(ref)}
+      style={[styles.textInput, styles.textWrapFix, styles.noOutline, style]}
+      placeholderTextColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
       autoCorrect={false}
+      {...otherProps}
     />
   );
 };
 
-export default PrimaryButton;
+export default TextInputCustom;
 
 const styles = StyleSheet.create({
   textInput,

package/template/src/atoms/Toggle.tsx

@@ -0,0 +1,47 @@
+import {StyleSheet, Text, View, Platform} from 'react-native';
+import React from 'react';
+import CustomSwitch from './CustomSwitch';
+
+interface SwitchProps {
+  isEnabled: boolean;
+  disabled?: boolean;
+  toggleSwitch: (isEnabled: boolean) => void;
+}
+
+const Toggle = (props: SwitchProps) => {
+  const {isEnabled, toggleSwitch, disabled = false} = props;
+  return (
+    <View>
+      <CustomSwitch
+        barHeight={20}
+        switchWidth={16}
+        switchHeight={16}
+        value={isEnabled}
+        onValueChange={toggleSwitch}
+        disabled={false}
+        backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
+        backgroundInactive={$config.SEMANTIC_NEUTRAL}
+        circleActiveColor={$config.CARD_LAYER_1_COLOR}
+        circleInActiveColor={$config.CARD_LAYER_1_COLOR}
+        // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
+        changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
+        innerCircleStyle={{
+          borderWidth: 0,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }} // style for inner animated circle for what you (may) be rendering inside the circle
+        outerCircleStyle={{}} // style for outer animated circle
+        renderActiveText={false}
+        renderInActiveText={false}
+        switchLeftPx={3} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
+        switchRightPx={3} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
+        switchWidthMultiplier={2} // multiplied by the `circleSize` prop to calculate total width of the Switch
+        switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
+      />
+    </View>
+  );
+};
+
+export default Toggle;
+
+const styles = StyleSheet.create({});

package/template/src/atoms/Toolbar.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useToolbar, ToolbarPosition} from '../utils/useToolbar';
+import {isWebInternal, useIsDesktop} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ToolbarProps {
+  children: React.ReactNode;
+}
+const Toolbar = (props: ToolbarProps) => {
+  const {position} = useToolbar();
+  const {children} = props;
+  const isDesktop = useIsDesktop();
+  const paddingHorizontal = isDesktop('toolbar') ? 32 : 10;
+
+  return (
+    <View
+      style={[
+        position === ToolbarPosition.left || position === ToolbarPosition.right
+          ? {
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              paddingVertical: paddingHorizontal,
+            }
+          : position === ToolbarPosition.top
+          ? isWebInternal()
+            ? toolBarStyles.topBarNonNativeStyle
+            : toolBarStyles.topBarNativeStyle
+          : position === ToolbarPosition.bottom
+          ? toolBarStyles.bottomBarStyle
+          : {},
+        position === ToolbarPosition.top || position === ToolbarPosition.bottom
+          ? {paddingHorizontal}
+          : {},
+      ]}>
+      {children}
+    </View>
+  );
+};
+
+export default Toolbar;
+
+const toolBarStyles = StyleSheet.create({
+  topBarNonNativeStyle: {
+    width: '100%',
+    zIndex: 999,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: $config.TOOLBAR_COLOR,
+  },
+  topBarNativeStyle: {
+    width: '100%',
+    zIndex: 999,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'relative',
+    height: '8%',
+    backgroundColor:
+      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
+  },
+  bottomBarStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: $config.TOOLBAR_COLOR,
+  },
+});

package/template/src/atoms/ToolbarItem.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {View, ViewProps, ViewStyle, StyleSheet} from 'react-native';
+import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
+import {isWebInternal} from '../utils/common';
+
+export interface ToolbarItemProps extends ViewProps {
+  style?: ViewStyle;
+  children: React.ReactNode;
+}
+const ToolbarItem = (props: ToolbarItemProps) => {
+  const {isHorizontal, position} = useToolbar();
+  //isHorizontal true -> top/bottom bar
+  //isHorizontal false -> left/right bar
+  // todo hari - first item shouldnot contain the margin right
+  // todo hari - last item shouldnot contain the margin right
+  return (
+    <View
+      {...props}
+      style={[
+        props?.style,
+        // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
+        position === ToolbarPosition.left
+          ? toolbarItemStyles.leftBarItemStyle
+          : position === ToolbarPosition.right
+          ? toolbarItemStyles.rightBarItemStyle
+          : position === ToolbarPosition.bottom
+          ? toolbarItemStyles.bottomBarItemStyle
+          : isWebInternal() && position === ToolbarPosition.top
+          ? toolbarItemStyles.topBarItemNonNativeStyle
+          : !isWebInternal() && position === ToolbarPosition.top
+          ? toolbarItemStyles.topBarItemNativeStyle
+          : {},
+      ]}>
+      {props?.children}
+    </View>
+  );
+};
+export default ToolbarItem;
+
+const toolbarItemStyles = StyleSheet.create({
+  topBarItemNativeStyle: {},
+  topBarItemNonNativeStyle: {
+    marginTop: 8,
+    marginBottom: 10,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
+  bottomBarItemStyle: {
+    marginTop: 10,
+    marginBottom: 16,
+    marginHorizontal: 10,
+  },
+  leftBarItemStyle: {
+    marginLeft: 16,
+    marginRight: 10,
+    marginVertical: 10,
+  },
+  rightBarItemStyle: {
+    marginRight: 16,
+    marginLeft: 10,
+    marginVertical: 10,
+  },
+});