dhre-ui-kit 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge} from './index';
+import {Badge, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
@@ -17,7 +17,7 @@ const App = () => {
           textStyle={{color: 'black'}}
           iconStyle={{}}
         />
-
+        <Line />
         <CustomButton
           title="Yes"
           onPress={() => console.log('Yes Button Pressed')}

package/src/components/ContactModel/ContactModel.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  Modal,
+  Linking,
+  Platform,
+  Alert,
+} from 'react-native';
+import CustomText from '../customText';
+import Line from '../horizontalLine/Line';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+
+interface ContactModalProps {
+  phoneNumber: string;
+  visible: boolean;
+  onClose: () => void;
+  isMailOpen: boolean;
+}
+
+const ContactModal: React.FC<ContactModalProps> = ({
+  phoneNumber,
+  visible,
+  onClose,
+  isMailOpen,
+}) => {
+  const handleCall = () => {
+    if (Platform.OS === 'ios') {
+      Alert.alert('Phone calls are not supported on the iOS simulator.');
+    } else {
+      Linking.openURL(`tel:${phoneNumber}`);
+    }
+    onClose();
+  };
+
+  const handleOptionPress = (appName: string) => {
+    console.log(`Opening ${appName}`);
+    onClose();
+  };
+
+  const emailOptions = ['Mail', 'Gmail', 'Outlook'];
+  const renderEmailOptions = () => (
+    <>
+      <CustomText
+        style={styles.title}
+        text="Open email app"
+        variant="L2_REGULAR"
+      />
+      <CustomText
+        style={styles.subtitle}
+        text="Which app would you like to open?"
+        variant="L2_REGULAR"
+      />
+      {emailOptions.map(option => (
+        <React.Fragment key={option}>
+          <Line />
+          <Pressable
+            onPress={() => handleOptionPress(option)}
+            style={styles.optionButton}>
+            <CustomText
+              style={styles.optionText}
+              text={option}
+              variant="B3_BOLD"
+            />
+          </Pressable>
+        </React.Fragment>
+      ))}
+    </>
+  );
+
+  const renderContent = () => (
+    <>
+      <View style={styles.viewContainer}>
+        {isMailOpen ? (
+          renderEmailOptions()
+        ) : (
+          <Pressable onPress={handleCall} style={styles.optionButton}>
+            <CustomText
+              style={styles.optionText}
+              text={`Call ${phoneNumber}`}
+              variant="B3_BOLD"
+            />
+          </Pressable>
+        )}
+      </View>
+      <Pressable onPress={onClose} style={styles.cancelButton}>
+        <CustomText
+          style={styles.cancelText}
+          text="Cancel"
+          variant="B2_REGULAR"
+        />
+      </Pressable>
+    </>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Modal
+        animationType="slide"
+        transparent
+        visible={visible}
+        onRequestClose={onClose}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>{renderContent()}</View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, .7)',
+  },
+  modalContent: {
+    padding: 20,
+    width: '100%',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    borderRadius: 10,
+  },
+  viewContainer: {
+    width: '100%',
+    backgroundColor: '#1C1C1E',
+    borderRadius: 10,
+  },
+  cancelText: {
+    color: '#007AFF',
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 13,
+  },
+  subtitle: {
+    textAlign: 'center',
+    marginTop: 2,
+    marginBottom: 13,
+  },
+  optionButton: {
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: 16,
+    color: '#007AFF',
+  },
+  cancelButton: {
+    marginTop: 10,
+    paddingVertical: 15,
+    alignItems: 'center',
+    borderRadius: 8,
+    backgroundColor: '#1C1C1E',
+    width: '100%',
+  },
+});
+
+export default withThemeProvider(ContactModal);

package/src/components/ContactModel/index.ts

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

package/src/components/horizontalLine/Line.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+
+const HorizontalLine = ({style}: {style?: ViewStyle}) => {
+  const {theme} = useTheme();
+  return (
+    <View
+      style={[
+        styles.line,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  line: {
+    height: 1,
+    width: '100%',
+  },
+});
+
+export default withThemeProvider(HorizontalLine);

package/src/components/horizontalLine/index.ts

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

package/src/components/topic/Topic.tsx

@@ -0,0 +1,85 @@
+import React, {ReactElement} from 'react';
+import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {useTheme} from '../../theme/ThemeContext';
+import CustomText from '../customText';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+
+interface OurOfficesButtonProps {
+  rightIcon?: ReactElement<SvgProps>;
+  onPress: () => void;
+  title: string;
+  subTitle?: string;
+  containterStyle?: ViewStyle;
+}
+const Topic = ({
+  rightIcon,
+  onPress,
+  title,
+  subTitle,
+  containterStyle,
+}: OurOfficesButtonProps) => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        containterStyle,
+      ]}
+      onPress={onPress}>
+      {rightIcon && (
+        <View style={styles.rightIconContainer}>
+          {React.cloneElement(rightIcon)}
+        </View>
+      )}
+      <View style={styles.textContainer}>
+        {subTitle && (
+          <CustomText
+            text={subTitle}
+            variant="L3_REGULAR"
+            textColor="CONTENT_PRIMARY"
+          />
+        )}
+        <CustomText
+          text={title}
+          variant="L1_REGULAR"
+          textColor="CONTENT_PRIMARY"
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 75,
+    width: 158,
+    borderRadius: 10,
+    marginLeft: 12,
+    marginVertical: 14,
+  },
+  iconContainer: {
+    marginHorizontal: 16,
+  },
+  textContainer: {
+    flex: 1,
+    position: 'absolute',
+    padding: 10,
+    bottom: 0,
+    marginHorizontal: 8,
+    marginTop: 20,
+  },
+  titleText: {
+    marginBottom: 4,
+  },
+  rightIconContainer: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+  },
+});
+
+export default withThemeProvider(Topic);

package/src/components/topic/index.ts

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

package/src/index.ts

@@ -25,4 +25,8 @@ export {default as SwipableList} from './components/swipableList';
 export {default as CustomTypography} from './components/customTypography';
 export {default as CustomIcon} from './components/customIcon';
 export {default as CustomLoader} from './components/customLoader';
+export {default as Line} from './components/horizontalLine';
+export {default as Topic} from './components/topic';
+export {default as ContactModel} from './components/ContactModel';
+
 export * from './utils/stylehelper';