agora-appbuilder-core 3.0.9 → 3.0.10

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,49 @@
+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]} />
+      <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,
+    marginLeft: 8,
+    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%'],
+  },
+  recordingStatus: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    marginRight: 8,
+  },
+});

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/Tooltip.native.tsx

@@ -0,0 +1,65 @@
+import RNTooltip from 'react-native-walkthrough-tooltip';
+import React, {useState} from 'react';
+import {Pressable, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {placement = 'top'} = props;
+  return (
+    <RNTooltip
+      arrowSize={{width: 25, height: 15}}
+      contentStyle={{
+        borderRadius: 8,
+        padding: 12,
+        backgroundColor: $config.CARD_LAYER_3_COLOR,
+      }}
+      tooltipStyle={{
+        shadowColor: $config.HARD_CODED_BLACK_COLOR,
+        shadowOffset: {
+          height: 4,
+          width: 0,
+        },
+        shadowOpacity: 0.1,
+        elevation: 5,
+        shadowRadius: 2,
+      }}
+      backgroundColor={'transparent'}
+      isVisible={isToolTipVisible}
+      content={
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : <></>}
+          <Text
+            style={{
+              color: $config.FONT_COLOR,
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontSize: 16,
+              fontWeight: '400',
+            }}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      }
+      placement={placement}
+      onClose={() => setToolTipVisible(false)}>
+      <Pressable
+        style={isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle}
+        onPress={() => setToolTipVisible(true)}>
+        {props.renderContent(isToolTipVisible, setToolTipVisible)}
+      </Pressable>
+    </RNTooltip>
+  );
+};
+export default Tooltip;

package/template/src/atoms/Tooltip.tsx

@@ -0,0 +1,94 @@
+import ReactTooltip from 'react-tooltip';
+import React, {useState} from 'react';
+import {Text, View, ViewStyle} from 'react-native';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  isClickable?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  onPress?: () => void;
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {isClickable = false, placement = 'top'} = props;
+  const css = `
+  .custom-tool-tip{
+    padding:12px;
+    border-radius: 8px;
+  }
+  .custom-tool-tip div{
+    font-family: "Source Sans Pro";
+    font-weight: 400;
+    font-size: 16px;
+  }
+  .__react_component_tooltip.show{
+    opacity:1;
+  }
+  .custom-tool-tip::after {
+    width: 20px !important;
+    height: 20px !important;
+    border-top-right-radius: 5px !important;
+    bottom: -10px !important;
+    margin-left: -10px !important;
+  }`;
+  const randomString = (
+    length = 5,
+    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  ) => {
+    var result = '';
+    for (var i = length; i > 0; --i)
+      result += chars[Math.floor(Math.random() * chars.length)];
+    return result;
+  };
+
+  const toolTipId = randomString();
+
+  return (
+    <>
+      <div
+        style={{cursor: isClickable ? 'pointer' : 'auto'}}
+        data-tip
+        data-event={isClickable ? 'click focus' : 'mouseenter'}
+        data-event-off={isClickable ? '' : 'mouseleave'}
+        data-for={toolTipId}
+        onMouseEnter={() => setToolTipVisible(true)}
+        onMouseLeave={() => {
+          setToolTipVisible(false);
+        }}>
+        <View
+          style={
+            isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle
+          }>
+          {props.renderContent(isToolTipVisible, setToolTipVisible)}
+        </View>
+      </div>
+      <ReactTooltip
+        afterShow={() => {
+          isClickable && props?.onPress && props.onPress();
+        }}
+        globalEventOff="click"
+        id={toolTipId}
+        backgroundColor={$config.CARD_LAYER_3_COLOR}
+        className="custom-tool-tip"
+        place={'top'}
+        type="dark"
+        effect="solid">
+        <style type="text/css">{css}</style>
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : null}
+          <Text style={{color: $config.FONT_COLOR}}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      </ReactTooltip>
+    </>
+  );
+};
+export default Tooltip;