@originallyus/feedback-rn-sdk 4.0.0-beta.6 → 4.0.0-beta.7

package/src/component/Rating.tsx

@@ -1,248 +0,0 @@
-import {memo, useMemo, useRef} from 'react'
-import {View, Text, StyleSheet, TouchableOpacity, Animated, type TextStyle, type ViewStyle} from 'react-native'
-import * as Haptics from 'expo-haptics'
-import * as f from '@utils/common'
-import {COLOR_STAR_NORMAL, COLOR_STAR_SELECTED, ERROR_COLOR, TEXT_DARK} from '@utils/constants'
-import StarIcon from '@/assets/StarIcon'
-import ErrorIcon from '@/assets/ErrorIcon'
-
-let pressRatingTimestamp: number | null = null
-
-interface ButtonStarProps {
-	disabled: boolean
-	onRate: () => void
-	active?: boolean
-	normalStarColor: string
-	selectedStarColor: string
-}
-
-/**
- * Props for the star rating component.
- *
- * Renders a title, question and a row of tappable stars with optional error text.
- */
-export interface RatingProps {
-	/**
-	 * Main title shown above the question.
-	 *
-	 * @default 'Help us get better'
-	 */
-	title?: string
-	/**
-	 * Question or subtitle shown above the stars.
-	 *
-	 * @default 'How was your experience today?'
-	 */
-	question?: string
-	/**
-	 * Current star value (1..`rating_max`).
-	 */
-	value: number
-	/**
-	 * Called when a star is selected.
-	 *
-	 * @param rating Selected value.
-	 */
-	onRate: (rating: number) => void
-	/**
-	 * Minimum star value.
-	 *
-	 * @default 1
-	 */
-	rating_min?: number
-	/**
-	 * Maximum star value.
-	 *
-	 * @default 5
-	 */
-	rating_max?: number
-	/**
-	 * When true, disables all star presses.
-	 *
-	 * @default false
-	 */
-	disabled?: boolean
-	/**
-	 * Error message; when present, shown below the stars.
-	 */
-	error?: string
-	/**
-	 * Color for unselected stars.
-	 *
-	 * @default '#D0D0D0'
-	 */
-	normalStarColor?: string
-	/**
-	 * Color for selected stars.
-	 *
-	 * @default '#F7C926'
-	 */
-	selectedStarColor?: string
-	/**
-	 * Style for the title text.
-	 */
-	titleStyle?: TextStyle
-	/**
-	 * Style for the question text.
-	 */
-	questionStyle?: TextStyle
-	/**
-	 * Style for the error text.
-	 */
-	errorStyle?: TextStyle
-	/**
-	 * Style for the outer wrapper.
-	 */
-	style?: ViewStyle
-}
-
-const ButtonStar = memo((props: ButtonStarProps) => {
-	const {disabled, onRate, active = false, normalStarColor, selectedStarColor} = props
-
-	const springAnimated = useRef(new Animated.Value(0)).current
-
-	const onPressStar = () => {
-		const nowTimestamp = Date.now()
-		if (pressRatingTimestamp && nowTimestamp - pressRatingTimestamp < 200) {
-			return
-		}
-		pressRatingTimestamp = nowTimestamp
-
-		Animated.sequence([
-			Animated.timing(springAnimated, {
-				toValue: 1,
-				duration: 80,
-				useNativeDriver: true,
-			}),
-			Animated.timing(springAnimated, {
-				toValue: 0,
-				duration: 80,
-				useNativeDriver: true,
-			}),
-		]).start()
-		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-		onRate()
-	}
-
-	const scaleStar = useMemo(
-		() =>
-			springAnimated.interpolate({
-				inputRange: [0, 1],
-				outputRange: [1, 1.5],
-			}),
-		[springAnimated],
-	)
-
-	const starColor = active ? selectedStarColor : normalStarColor
-	const size = f.isTablet ? 42 : 34
-	const marginH = f.isTablet ? 12 : 8
-
-	const starWrapStyle = useMemo(
-		() => [
-			styles.starWrap,
-			{
-				transform: [{scale: scaleStar}],
-				marginHorizontal: marginH,
-			},
-		],
-		[scaleStar, marginH],
-	)
-
-	return (
-		<Animated.View style={starWrapStyle}>
-			<TouchableOpacity disabled={disabled} onPress={onPressStar} activeOpacity={0.8}>
-				<StarIcon size={size} color={starColor} />
-			</TouchableOpacity>
-		</Animated.View>
-	)
-})
-
-function Rating({
-	title = 'Help us get better',
-	question = 'How was your experience today?',
-	value,
-	onRate,
-	rating_min = 1,
-	rating_max = 5,
-	disabled = false,
-	error,
-	normalStarColor = COLOR_STAR_NORMAL,
-	selectedStarColor = COLOR_STAR_SELECTED,
-	titleStyle,
-	questionStyle,
-	errorStyle,
-	style,
-}: RatingProps) {
-	const hasError = useMemo(() => error != null && error !== '', [error])
-
-	const stars = useMemo(() => {
-		const listStar = []
-		for (let i = rating_min; i <= rating_max; i++) {
-			listStar.push(
-				<ButtonStar
-					key={`ButtonStar-${i}`}
-					normalStarColor={normalStarColor}
-					selectedStarColor={selectedStarColor}
-					disabled={disabled || value === i}
-					onRate={() => onRate(i)}
-					active={i <= value}
-				/>,
-			)
-		}
-		return listStar
-	}, [rating_min, rating_max, disabled, value, normalStarColor, selectedStarColor, onRate])
-
-	const titleCombinedStyle = useMemo(() => [styles.title, {color: TEXT_DARK}, titleStyle], [titleStyle])
-	const questionCombinedStyle = useMemo(() => [styles.question, {color: TEXT_DARK}, questionStyle], [questionStyle])
-	const errorTextStyle = useMemo(() => [styles.error, {color: ERROR_COLOR}, errorStyle], [errorStyle])
-
-	return (
-		<View style={[styles.wrapper, style]}>
-			{title != null && title !== '' && <Text style={titleCombinedStyle}>{title}</Text>}
-			{question != null && question !== '' && <Text style={questionCombinedStyle}>{question}</Text>}
-			<View style={styles.starsWrap}>{stars}</View>
-			{hasError && (
-				<View style={styles.errorWrap}>
-					<ErrorIcon size={20} color={ERROR_COLOR} />
-					<Text style={errorTextStyle}>{error}</Text>
-				</View>
-			)}
-		</View>
-	)
-}
-
-export default Rating
-
-const styles = StyleSheet.create({
-	wrapper: {
-		width: '100%',
-	},
-	title: {
-		fontSize: 18,
-		fontWeight: '700',
-		marginBottom: 8,
-	},
-	question: {
-		fontSize: 16,
-		marginBottom: 16,
-	},
-	starsWrap: {
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
-		width: '100%',
-	},
-	errorWrap: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginTop: 8,
-		gap: 6,
-	},
-	error: {
-		fontSize: 14,
-		lineHeight: 20,
-		flex: 1,
-		fontWeight: '400',
-	},
-	starWrap: {},
-})

package/src/component/RatingNumber.tsx

@@ -1,421 +0,0 @@
-import ErrorIcon from '@/assets/ErrorIcon'
-import * as f from '@utils/common'
-import * as Haptics from 'expo-haptics'
-import {BG_DEFAULT, BG_SELECTED, BORDER_DEFAULT, BORDER_SELECTED, ERROR_COLOR, TEXT_DARK} from '@utils/constants'
-import {useEffect, useMemo, useRef} from 'react'
-import {Animated, StyleSheet, Text, TouchableOpacity, View, type TextStyle} from 'react-native'
-
-const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity)
-
-const DEFAULT_SELECTED_COLOR = BG_SELECTED
-const DEFAULT_SELECTED_BORDER_COLOR = BORDER_SELECTED
-
-const DEFAULT_ERROR_COLOR = ERROR_COLOR
-
-/**
- * Preset sizes for `RatingNumber` buttons.
- *
- * - `'small'` – compact height, small radius.
- * - `'medium'` – default size.
- * - `'large'` – larger height and radius.
- */
-export type RatingNumberSize = 'small' | 'medium' | 'large'
-
-const SIZE_PRESETS: Record<RatingNumberSize, {height: number; borderRadius: number; borderWidth: number; gap: number}> =
-	{
-		small: {height: 44, borderRadius: 6, borderWidth: 1, gap: 3},
-		medium: {height: 48, borderRadius: 8, borderWidth: 1, gap: 4},
-		large: {height: 60, borderRadius: 10, borderWidth: 1, gap: 5},
-	}
-
-/**
- * Props for the numeric rating scale component.
- *
- * Renders a row of numbered buttons from `rating_min` to `rating_max`
- * with optional left/right scale labels and error text.
- */
-export interface RatingNumberProps {
-	/**
-	 * Text color for the left and right scale labels.
-	 */
-	scale_label_color: string
-	/**
-	 * Optional text for the left label (e.g. "Strongly disagree").
-	 *
-	 * @default 'Strongly disagree'
-	 */
-	scale_label_left?: string
-	/**
-	 * Optional text for the right label (e.g. "Strongly agree").
-	 *
-	 * @default 'Strongly agree'
-	 */
-	scale_label_right?: string
-	/**
-	 * Font family for the scale labels.
-	 */
-	scale_label_font?: string
-	/**
-	 * Font size for the scale labels.
-	 */
-	scale_label_fontsize?: number
-	/**
-	 * Called when a number is pressed.
-	 *
-	 * @param rating Selected value.
-	 */
-	handlePressRating: (rating: number) => void
-	/**
-	 * Currently selected value.
-	 */
-	numStar: number
-	/**
-	 * Minimum value of the scale (inclusive).
-	 */
-	rating_min: number
-	/**
-	 * Maximum value of the scale (inclusive).
-	 */
-	rating_max: number
-	/**
-	 * App width, used for layout spacing.
-	 */
-	appWidth: number
-	/**
-	 * Preset for height, radius and gap between numbers.
-	 *
-	 * @default 'medium'
-	 */
-	size?: RatingNumberSize
-	/**
-	 * When true, all numbers from min up to and including the selected value are shown as active.
-	 * E.g. selecting 6 highlights 0–6. When false, only the selected number is active.
-	 *
-	 * @default true
-	 */
-	activeRange?: boolean
-	/**
-	 * Whether to remove gaps between buttons (segmented control style).
-	 *
-	 * @default true
-	 */
-	compact?: boolean
-	/**
-	 * Error message shown below the component.
-	 */
-	error?: string
-	/**
-	 * Border color when an error is present.
-	 *
-	 * @default '#D40C74'
-	 */
-	errorBorderColor?: string
-	/**
-	 * Font family for the number labels.
-	 */
-	rating_number_font?: string
-	/**
-	 * Font size for the number labels.
-	 */
-	rating_number_fontsize?: number
-	/**
-	 * Background color when a number is not selected.
-	 */
-	rating_number_bg_color?: string
-	/**
-	 * Border color when a number is not selected.
-	 */
-	rating_number_border_color?: string
-	/**
-	 * Background color when a number is selected.
-	 */
-	rating_number_selected_bg_color?: string
-	/**
-	 * Border color when a number is selected.
-	 */
-	rating_number_selected_border_color?: string
-	/**
-	 * Text color when a number is selected.
-	 */
-	rating_number_selected_text_color?: string
-	/**
-	 * Text color when a number is not selected.
-	 */
-	rating_number_text_color?: string
-	/**
-	 * Style override for the error text.
-	 */
-	errorStyle?: TextStyle
-
-	/**
-	 * Label for the component.
-	 */
-	label?: string
-}
-
-interface ButtonNumberProps extends RatingNumberProps {
-	handlePressRating: () => void
-	number: number
-	active: boolean
-	isStart: boolean
-	isEnd: boolean
-	/** Last button in the active range (needs right border in compact mode). */
-	isLastActive?: boolean
-	/** First inactive button after active block (hide left border to avoid double line). */
-	isFirstInactive?: boolean
-	hasError?: boolean
-	errorBorderColor?: string
-}
-
-function RatingNumber(props: RatingNumberProps) {
-	const {
-		scale_label_color,
-		scale_label_left,
-		scale_label_right,
-		scale_label_font,
-		scale_label_fontsize,
-		handlePressRating,
-		numStar,
-		rating_min,
-		rating_max,
-		appWidth,
-		label,
-	} = props
-
-	const activeRange = props.activeRange !== false
-	const compact = props.compact !== false
-	const sizePreset = props.size ?? 'medium'
-	const preset = useMemo(() => SIZE_PRESETS[sizePreset], [sizePreset])
-	const gap = useMemo(() => (compact ? 0 : preset.gap), [compact, preset])
-	const hasError = useMemo(() => props.error != null && props.error !== '', [props.error])
-	const errorBorderColor = useMemo(() => props.errorBorderColor ?? DEFAULT_ERROR_COLOR, [props.errorBorderColor])
-
-	const renderRating = () => {
-		const listStar = []
-		for (let i = rating_min; i <= rating_max; i++) {
-			const active = activeRange ? i <= numStar : numStar === i
-			const nextActive = activeRange && i < rating_max && i + 1 <= numStar
-			const prevActive = activeRange && i > rating_min && i - 1 <= numStar
-			listStar.push(
-				<ButtonNumber
-					key={`rating-number-${i}`}
-					{...props}
-					hasError={hasError}
-					errorBorderColor={errorBorderColor}
-					handlePressRating={() => {
-						Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-						handlePressRating(i)
-					}}
-					number={i}
-					active={active}
-					isStart={i === rating_min}
-					isEnd={i === rating_max}
-					isLastActive={active && !nextActive}
-					isFirstInactive={!active && prevActive}
-				/>,
-			)
-		}
-		return listStar
-	}
-
-	const rowStyle = useMemo(() => ({width: '100%' as const}), [])
-
-	const containerStyle = useMemo(
-		() => [styles.ratingContainer, !compact && {gap}, rowStyle],
-		[compact, gap, rowStyle],
-	)
-
-	const labelContainerStyle = useMemo(
-		() => [styles.ratingLabelContainer, rowStyle, {marginTop: f.w_p(appWidth, 12)}],
-		[rowStyle, appWidth],
-	)
-
-	const leftLabelStyle = useMemo(
-		() => ({
-			color: scale_label_color,
-			fontSize: scale_label_fontsize,
-			fontFamily: scale_label_font,
-		}),
-		[scale_label_color, scale_label_fontsize, scale_label_font],
-	)
-
-	const rightLabelStyle = useMemo(
-		() => ({
-			color: scale_label_color,
-			fontSize: scale_label_fontsize,
-			fontFamily: scale_label_font,
-		}),
-		[scale_label_color, scale_label_fontsize, scale_label_font],
-	)
-
-	const errorTextStyle = useMemo(
-		() => [styles.error, {color: errorBorderColor}, props.errorStyle],
-		[errorBorderColor, props.errorStyle],
-	)
-
-	return (
-		<View style={styles.wrapper}>
-			<Text style={styles.question}>{label}</Text>
-			<View style={containerStyle}>{renderRating()}</View>
-			<View style={labelContainerStyle}>
-				<Text style={leftLabelStyle}>{scale_label_left || 'Strongly disagree'}</Text>
-				<Text style={rightLabelStyle}>{scale_label_right || 'Strongly agree'}</Text>
-			</View>
-			{hasError && (
-				<View style={styles.errorWrap}>
-					<ErrorIcon size={20} color={ERROR_COLOR} />
-					<Text style={errorTextStyle}>{props.error}</Text>
-				</View>
-			)}
-		</View>
-	)
-}
-
-function ButtonNumber({
-	handlePressRating,
-	active,
-	isStart,
-	isEnd,
-	isLastActive = false,
-	isFirstInactive = false,
-	number,
-	size = 'medium',
-	compact = true,
-	hasError = false,
-	errorBorderColor,
-	rating_number_font,
-	rating_number_fontsize,
-	rating_number_bg_color,
-	rating_number_border_color,
-	rating_number_selected_bg_color,
-	rating_number_selected_border_color,
-	rating_number_selected_text_color,
-	rating_number_text_color,
-}: ButtonNumberProps) {
-	const springAnimated = useRef(new Animated.Value(0)).current
-	const preset = useMemo(() => SIZE_PRESETS[size], [size])
-
-	const h = preset.height
-	const radius = preset.borderRadius
-	const borderW = preset.borderWidth
-	const selectedColor = rating_number_selected_bg_color ?? DEFAULT_SELECTED_COLOR
-	const selectedBorderColor = rating_number_selected_border_color ?? DEFAULT_SELECTED_BORDER_COLOR
-	const selectedTextColor = rating_number_selected_text_color ?? TEXT_DARK
-	const inactiveBorderColor = useMemo(
-		() => (hasError && errorBorderColor ? errorBorderColor : rating_number_border_color ?? BORDER_DEFAULT),
-		[hasError, errorBorderColor, rating_number_border_color],
-	)
-
-	useEffect(() => {
-		if (active) {
-			Animated.timing(springAnimated, {
-				toValue: 1,
-				useNativeDriver: false,
-			}).start()
-		} else {
-			Animated.timing(springAnimated, {
-				toValue: 0,
-				useNativeDriver: false,
-			}).start()
-		}
-	}, [active, springAnimated])
-
-	const backgroundColorAni = useMemo(
-		() =>
-			springAnimated.interpolate({
-				inputRange: [0, 1],
-				outputRange: [rating_number_bg_color ?? BG_DEFAULT, selectedColor],
-			}),
-		[springAnimated, rating_number_bg_color, selectedColor],
-	)
-
-	const compactStyle = useMemo(
-		() =>
-			compact
-				? {
-						borderRightWidth: isEnd || isLastActive ? borderW : 0,
-						borderLeftWidth: isFirstInactive ? 0 : undefined,
-						borderTopLeftRadius: isStart ? radius : 0,
-						borderBottomLeftRadius: isStart ? radius : 0,
-						borderTopRightRadius: isEnd ? radius : 0,
-						borderBottomRightRadius: isEnd ? radius : 0,
-				  }
-				: {
-						borderRadius: radius,
-				  },
-		[compact, isEnd, isLastActive, isFirstInactive, borderW, isStart, radius],
-	)
-
-	const buttonStyle = useMemo(
-		() => [
-			styles.buttonNumberContainer,
-			{
-				flex: 1,
-				height: h,
-				borderWidth: borderW,
-				borderColor: active ? selectedBorderColor : inactiveBorderColor,
-				backgroundColor: backgroundColorAni,
-				opacity: 1,
-				...compactStyle,
-			},
-		],
-		[h, borderW, active, selectedBorderColor, inactiveBorderColor, backgroundColorAni, compactStyle],
-	)
-
-	const labelStyle = useMemo(
-		() => ({
-			color: active ? selectedTextColor : rating_number_text_color,
-			fontSize: rating_number_fontsize,
-			fontFamily: rating_number_font,
-		}),
-		[active, selectedTextColor, rating_number_text_color, rating_number_fontsize, rating_number_font],
-	)
-
-	return (
-		<AnimatedTouchable style={buttonStyle} onPress={handlePressRating} activeOpacity={1}>
-			<Text style={labelStyle}>{number}</Text>
-		</AnimatedTouchable>
-	)
-}
-
-export default RatingNumber
-
-const styles = StyleSheet.create({
-	wrapper: {
-		flex: 1,
-		width: '100%',
-	},
-	question: {
-		fontSize: 16,
-		fontWeight: '600',
-		color: '#14181C',
-		marginBottom: 8,
-	},
-	ratingContainer: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		width: '100%',
-	},
-	ratingLabelContainer: {
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		alignItems: 'center',
-		width: '100%',
-	},
-	errorWrap: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginTop: 8,
-		gap: 6,
-	},
-	error: {
-		fontSize: 14,
-		lineHeight: 20,
-		flex: 1,
-		fontWeight: '400',
-	},
-	buttonNumberContainer: {
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-})