react-native-my-survey-sdk 2.0.5 → 2.0.7

package/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
+};

package/package.json

@@ -1,19 +1,27 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.0.5",
-  "description": "Survey SDK for xebo.ai",
-  "main": "index.js",
+  "version": "2.0.7",
+  "description": "Xebo survey collection SDK for React Native",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "sheetal",
+  "author": "Xebo",
   "license": "ISC",
-  "dependencies": {
-    "react-native-webview": "^13.16.0"
-  },
+  "dependencies": {},
   "peerDependencies": {
-    "@react-navigation/native": ">=6.0.0",
-    "react": ">=18.2.0 <19.0.0",
-    "react-native": ">=0.71.0 <0.78.0"
+    "react": ">=18.2.0",
+    "react-native": ">=0.71.0",
+    "@react-native-async-storage/async-storage": ">=1.0.0",
+    "@react-native-community/netinfo": ">=11.0.0",
+    "react-native-modal": ">=13.0.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "^7.29.2",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.3.0"
   }
 }

package/src/components/XeboDropdownView.tsx

@@ -0,0 +1,197 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer, XeboChoice } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+export const XeboDropdownView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const [selectedChoice, setSelectedChoice] = useState<XeboChoice | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [error, setError] = useState('');
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+
+  const shake = () => {
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 6, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 60, useNativeDriver: true }),
+    ]).start();
+  };
+
+  const handleSelect = (choice: XeboChoice) => {
+    setSelectedChoice(choice);
+    setIsOpen(false);
+    setError('');
+  };
+
+  const handleNext = () => {
+    if (question.isRequired && !selectedChoice) {
+      setError('Please select an option.');
+      shake();
+      return;
+    }
+    onAnswer({
+      questionId: question.id,
+      value: selectedChoice ? [{ rowId: selectedChoice.id, text: selectedChoice.text }] : [],
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+        {question.title}
+      </Text>
+      {!!question.subtitle && (
+        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.subtitle}
+        </Text>
+      )}
+
+      {/* Dropdown trigger */}
+      <TouchableOpacity
+        style={[styles.trigger, { borderColor: isOpen ? theme.primaryColor : '#E5E7EB', borderRadius: theme.cornerRadius }]}
+        onPress={() => setIsOpen(prev => !prev)}
+        activeOpacity={0.8}
+      >
+        <Text
+          style={[
+            styles.triggerText,
+            { color: selectedChoice ? theme.textColor : '#9CA3AF', fontFamily: theme.fontFamily },
+          ]}
+        >
+          {selectedChoice ? selectedChoice.text : (question.placeholder || 'Select an option')}
+        </Text>
+        <Text style={[styles.chevron, { color: theme.textColor }]}>{isOpen ? '▲' : '▼'}</Text>
+      </TouchableOpacity>
+
+      {/* Options list */}
+      {isOpen && (
+        <View style={[styles.optionsList, { borderColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}>
+          <ScrollView nestedScrollEnabled style={styles.optionsScroll} showsVerticalScrollIndicator={false}>
+            {(question.options ?? []).map(choice => (
+              <TouchableOpacity
+                key={choice.id}
+                style={[
+                  styles.optionRow,
+                  selectedChoice?.id === choice.id && { backgroundColor: `${theme.primaryColor}15` },
+                ]}
+                onPress={() => handleSelect(choice)}
+                activeOpacity={0.7}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    {
+                      color: selectedChoice?.id === choice.id ? theme.primaryColor : theme.textColor,
+                      fontFamily: theme.fontFamily,
+                      fontWeight: selectedChoice?.id === choice.id ? '600' : '400',
+                    },
+                  ]}
+                >
+                  {choice.text}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+      {selectedChoice && (
+        <Animated.View style={[styles.buttonWrap, { transform: [{ translateX: shakeAnim }] }]}>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+            onPress={handleNext}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+              {isLastQuestion ? 'Submit' : 'Next'}
+            </Text>
+          </TouchableOpacity>
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 24,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 14,
+    opacity: 0.6,
+    marginBottom: 16,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    padding: 14,
+    marginBottom: 4,
+  },
+  triggerText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  chevron: {
+    fontSize: 12,
+  },
+  optionsList: {
+    borderWidth: 1.5,
+    maxHeight: 220,
+    marginBottom: 12,
+  },
+  optionsScroll: {
+    flexGrow: 0,
+  },
+  optionRow: {
+    padding: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  optionText: {
+    fontSize: 15,
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 13,
+    marginBottom: 8,
+  },
+  buttonWrap: {
+    marginTop: 'auto',
+  },
+  button: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/XeboIntroView.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { XeboSurveyPage } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  introPage: XeboSurveyPage;
+  onStart: () => void;
+}
+
+export const XeboIntroView: React.FC<Props> = ({ introPage, onStart }) => {
+  const theme = getTheme();
+
+  return (
+    <View style={styles.container}>
+      {!!introPage.content && (
+        <Text style={[styles.content, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {introPage.content}
+        </Text>
+      )}
+
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+        onPress={onStart}
+        activeOpacity={0.8}
+      >
+        <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+          {introPage.buttonText || "Let's get started"}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 24,
+    alignItems: 'stretch',
+  },
+  content: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginBottom: 32,
+  },
+  button: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 'auto',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/XeboMultiNPSView.tsx

@@ -0,0 +1,166 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+const DETRACTOR_COLOR = '#F24236';
+const PASSIVE_COLOR   = '#FFC208';
+const PROMOTER_COLOR  = '#2ECC70';
+
+function npsColor(score: number, npsLabels?: XeboQuestion['npsLabels']): string {
+  if (score <= 6) return npsLabels?.detractorColor ?? DETRACTOR_COLOR;
+  if (score <= 8) return npsLabels?.passiveColor   ?? PASSIVE_COLOR;
+  return              npsLabels?.promoterColor      ?? PROMOTER_COLOR;
+}
+
+function isColorDark(hex: string): boolean {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!m) return false;
+  const r = parseInt(m[1], 16) / 255;
+  const g = parseInt(m[2], 16) / 255;
+  const b = parseInt(m[3], 16) / 255;
+  return 0.299 * r + 0.587 * g + 0.114 * b < 0.5;
+}
+
+export const XeboMultiNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const rows = question.options ?? [];
+  const [scores, setScores] = useState<Record<string, number>>({});
+  const [error, setError] = useState('');
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+
+  const shake = () => {
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 6, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 60, useNativeDriver: true }),
+    ]).start();
+  };
+
+  const setScore = (rowId: string, score: number) => {
+    setScores(prev => ({ ...prev, [rowId]: score }));
+    setError('');
+  };
+
+  const handleNext = () => {
+    if (question.isRequired && rows.some(r => scores[r.id] === undefined)) {
+      setError('Please rate all items.');
+      shake();
+      return;
+    }
+
+    onAnswer({
+      questionId: question.id,
+      value: rows
+        .filter(r => scores[r.id] !== undefined)
+        .map(r => ({
+          rowId: r.id,
+          colId: (question.columns?.[scores[r.id]]?.id ?? scores[r.id].toString()),
+        })),
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+        {question.title}
+      </Text>
+      {!!question.subtitle && (
+        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.subtitle}
+        </Text>
+      )}
+
+      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
+        {rows.map(row => (
+          <View key={row.id} style={styles.rowWrap}>
+            <Text style={[styles.rowLabel, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {row.text}
+            </Text>
+            {/* Single-row NPS scale with always-visible category colors */}
+            <View style={styles.scaleRow}>
+              {Array.from({ length: 11 }, (_, i) => {
+                const selected = scores[row.id] === i;
+                const color = npsColor(i, question.npsLabels);
+                return (
+                  <TouchableOpacity
+                    key={i}
+                    style={[
+                      styles.scoreButton,
+                      {
+                        backgroundColor: color,
+                        borderColor: selected ? '#000000' : color,
+                        borderWidth: selected ? 2.5 : 1.5,
+                      },
+                    ]}
+                    onPress={() => setScore(row.id, i)}
+                    activeOpacity={0.8}
+                  >
+                    <Text style={[
+                      styles.scoreText,
+                      { color: isColorDark(color) ? '#FFFFFF' : selected ? '#111111' : '#444444' },
+                    ]}>
+                      {i}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+      <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+          onPress={handleNext}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+            {isLastQuestion ? 'Submit' : 'Next'}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
+  subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
+  scroll: { flex: 1, marginBottom: 12 },
+  rowWrap: { marginBottom: 20 },
+  rowLabel: { fontSize: 15, fontWeight: '500', marginBottom: 8 },
+  scaleRow: {
+    flexDirection: 'row',
+    gap: 3,
+  },
+  scoreButton: {
+    flex: 1,
+    height: 30,
+    borderRadius: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scoreText: { fontSize: 11, fontWeight: '700' },
+  errorText: { color: '#EF4444', fontSize: 13, marginBottom: 8 },
+  button: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});

package/src/components/XeboMultiRatingView.tsx

@@ -0,0 +1,165 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+export const XeboMultiRatingView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const rows = question.options ?? [];
+  const totalSteps = question.columns?.length ?? 5;
+  const ratingColor = question.ratingColor ?? theme.primaryColor;
+  const ratingStyle = question.ratingStyle ?? 'star';
+
+  const [ratings, setRatings] = useState<Record<string, number>>({});
+  const [error, setError] = useState('');
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+
+  const shake = () => {
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 6, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 60, useNativeDriver: true }),
+    ]).start();
+  };
+
+  const setRating = (rowId: string, index: number) => {
+    setRatings(prev => ({ ...prev, [rowId]: index }));
+    setError('');
+  };
+
+  const isCumulative = ratingStyle === 'star' || ratingStyle === 'heart';
+
+  const handleNext = () => {
+    if (question.isRequired && rows.some(r => ratings[r.id] === undefined)) {
+      setError('Please rate all items.');
+      shake();
+      return;
+    }
+
+    onAnswer({
+      questionId: question.id,
+      value: rows
+        .filter(r => ratings[r.id] !== undefined)
+        .map(r => ({
+          rowId: r.id,
+          colId: question.columns?.[ratings[r.id]]?.id ?? ratings[r.id].toString(),
+        })),
+    });
+  };
+
+  const starIcon = (filled: boolean) =>
+    ratingStyle === 'heart' ? (filled ? '♥' : '♡') : filled ? '★' : '☆';
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+        {question.title}
+      </Text>
+      {!!question.subtitle && (
+        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.subtitle}
+        </Text>
+      )}
+
+      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
+        {rows.map(row => (
+          <View key={row.id} style={styles.rowWrap}>
+            <Text style={[styles.rowLabel, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {row.text}
+            </Text>
+            <View style={styles.iconsRow}>
+              {Array.from({ length: totalSteps }, (_, i) => {
+                const isFilled = isCumulative
+                  ? ratings[row.id] !== undefined && i <= ratings[row.id]
+                  : i === ratings[row.id];
+                return (
+                  <TouchableOpacity
+                    key={i}
+                    onPress={() => setRating(row.id, i)}
+                    activeOpacity={0.7}
+                    style={styles.iconButton}
+                  >
+                    {ratingStyle === 'circle' ? (
+                      <View
+                        style={[
+                          styles.circle,
+                          { backgroundColor: isFilled ? ratingColor : '#E5E7EB' },
+                        ]}
+                      />
+                    ) : ratingStyle === 'tile' ? (
+                      <View
+                        style={[
+                          styles.tile,
+                          { backgroundColor: isFilled ? ratingColor : '#E5E7EB' },
+                        ]}
+                      >
+                        <Text style={[styles.tileText, { color: isFilled ? '#FFF' : '#6B7280' }]}>
+                          {i + 1}
+                        </Text>
+                      </View>
+                    ) : (
+                      <Text style={{ fontSize: 24, color: isFilled ? ratingColor : '#E5E7EB' }}>
+                        {starIcon(isFilled)}
+                      </Text>
+                    )}
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+      <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+          onPress={handleNext}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+            {isLastQuestion ? 'Submit' : 'Next'}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
+  subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
+  scroll: { flex: 1, marginBottom: 12 },
+  rowWrap: { marginBottom: 20 },
+  rowLabel: { fontSize: 15, fontWeight: '500', marginBottom: 8 },
+  iconsRow: { flexDirection: 'row', flexWrap: 'wrap' },
+  iconButton: { marginRight: 6, marginBottom: 6 },
+  circle: { width: 28, height: 28, borderRadius: 14 },
+  tile: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileText: { fontSize: 12, fontWeight: '700' },
+  errorText: { color: '#EF4444', fontSize: 13, marginBottom: 8 },
+  button: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});