@originallyus/feedback-rn-sdk 4.0.0-beta.1 → 4.0.0-beta.11

package/src/component/Textarea.tsx

@@ -1,282 +0,0 @@
-import {useMemo, useState} from 'react'
-import {View, Text, StyleSheet, TextInput, type ViewStyle, type TextStyle} from 'react-native'
-import * as f from '@utils/common'
-import {
-	BG_DEFAULT,
-	BORDER_FOCUS,
-	BORDER_SECONDARY,
-	ERROR_COLOR,
-	TEXT_DARK,
-	TEXT_NOTE,
-	TEXT_PLACEHOLDER,
-} from '@utils/constants'
-import ErrorIcon from '@/assets/ErrorIcon'
-
-/**
- * Props for the multi-line `Textarea` component.
- *
- * Renders a label, multi-line input, optional note, error, and character counter.
- */
-export interface TextareaProps {
-	/**
-	 * Current text value.
-	 */
-	value: string
-	/**
-	 * Called when the text changes.
-	 */
-	onChangeText: (text: string) => void
-	/**
-	 * Placeholder text.
-	 *
-	 * @default 'Placeholder'
-	 */
-	placeholder?: string
-	/**
-	 * Label text rendered above the field.
-	 */
-	label?: string
-	/**
-	 * Helper text rendered below the field.
-	 */
-	note?: string
-	/**
-	 * Error message; when present, border and text are styled as error.
-	 */
-	error?: string
-	/**
-	 * Maximum number of characters allowed. When set, a counter is shown.
-	 */
-	maxLength?: number
-	/**
-	 * App width, used to compute internal padding.
-	 */
-	appWidth: number
-	/**
-	 * Minimum height of the textarea.
-	 *
-	 * @default 120
-	 */
-	minHeight?: number
-	// Style
-	/**
-	 * Background color when not focused.
-	 */
-	backgroundColor?: string
-	/**
-	 * Border color when not focused and not errored.
-	 */
-	borderColor?: string
-	/**
-	 * Background color when focused.
-	 */
-	focusBackgroundColor?: string
-	/**
-	 * Border color when focused.
-	 */
-	focusBorderColor?: string
-	/**
-	 * Border color when `error` is present.
-	 *
-	 * @default '#D32F2F'
-	 */
-	errorBorderColor?: string
-	/**
-	 * Font family for the text input.
-	 */
-	fontFamily?: string
-	/**
-	 * Font size for the text input.
-	 *
-	 * @default 16
-	 */
-	fontSize?: number
-	/**
-	 * Color used for the placeholder text.
-	 */
-	placeholderTextColor?: string
-	/**
-	 * Color used for the input text.
-	 */
-	textColor?: string
-	/**
-	 * Style for the label text.
-	 */
-	labelStyle?: TextStyle
-	/**
-	 * (Reserved) Style for a caption text, if used.
-	 */
-	captionStyle?: TextStyle
-	/**
-	 * Style for the note text.
-	 */
-	noteStyle?: TextStyle
-	/**
-	 * Style for the error text.
-	 */
-	errorStyle?: TextStyle
-	/**
-	 * Style for the character counter text.
-	 */
-	counterStyle?: TextStyle
-	/**
-	 * Style for the outer wrapper view.
-	 */
-	style?: ViewStyle
-}
-
-function Textarea({
-	value,
-	onChangeText,
-	placeholder = 'Placeholder',
-	label,
-	note,
-	error,
-	maxLength,
-	appWidth,
-	minHeight = 120,
-	backgroundColor = BG_DEFAULT,
-	borderColor = BORDER_SECONDARY,
-	focusBackgroundColor = BG_DEFAULT,
-	focusBorderColor = BORDER_FOCUS,
-	errorBorderColor = ERROR_COLOR,
-	fontFamily,
-	fontSize = 16,
-	placeholderTextColor = TEXT_PLACEHOLDER,
-	textColor = TEXT_DARK,
-	labelStyle,
-	noteStyle,
-	errorStyle,
-	counterStyle,
-	style,
-}: TextareaProps) {
-	const [focused, setFocused] = useState(false)
-	const length = value.length
-	const hasError = error != null && error !== ''
-
-	const effectiveBorderColor = useMemo(() => {
-		if (hasError) return errorBorderColor
-		if (focused) return focusBorderColor
-		return borderColor
-	}, [hasError, focused, errorBorderColor, focusBorderColor, borderColor])
-
-	const inputContainerStyle = useMemo(
-		() => [
-			styles.inputWrapper,
-			{
-				minHeight,
-				padding: f.w_p(appWidth, 8),
-				borderRadius: f.isTablet ? 6 : 4,
-				backgroundColor: focused ? focusBackgroundColor : backgroundColor,
-				borderColor: effectiveBorderColor,
-				borderWidth: 1,
-			},
-		],
-		[minHeight, appWidth, focused, focusBackgroundColor, backgroundColor, effectiveBorderColor],
-	)
-
-	const textInputStyle = useMemo(
-		() => [
-			styles.input,
-			{
-				fontFamily,
-				fontSize,
-				color: textColor,
-			},
-		],
-		[fontFamily, fontSize, textColor],
-	)
-
-	return (
-		<View style={[styles.wrapper, style]}>
-			{label != null && label !== '' && <Text style={[styles.label, labelStyle]}>{label}</Text>}
-			<View style={inputContainerStyle}>
-				<TextInput
-					placeholder={placeholder}
-					placeholderTextColor={placeholderTextColor}
-					style={textInputStyle}
-					multiline
-					value={value}
-					onChangeText={text => {
-						if (maxLength == null || text.length <= maxLength) {
-							onChangeText(text)
-						} else {
-							onChangeText(text.slice(0, maxLength))
-						}
-					}}
-					onFocus={() => setFocused(true)}
-					onBlur={() => setFocused(false)}
-					autoCorrect={false}
-				/>
-				{maxLength != null && (
-					<View style={styles.counterWrapper} pointerEvents="none">
-						<Text style={[styles.counter, {color: TEXT_PLACEHOLDER}, counterStyle]}>
-							{length}/{maxLength}
-						</Text>
-					</View>
-				)}
-			</View>
-			{note != null && note !== '' && <Text style={[styles.note, {color: TEXT_NOTE}, noteStyle]}>{note}</Text>}
-			{hasError && (
-				<View style={styles.errorWrap}>
-					<ErrorIcon size={20} color={ERROR_COLOR} />
-					<Text style={[styles.error, {color: ERROR_COLOR}, errorStyle]}>{error}</Text>
-				</View>
-			)}
-		</View>
-	)
-}
-
-export default Textarea
-
-const styles = StyleSheet.create({
-	wrapper: {
-		width: '100%',
-		alignSelf: 'stretch',
-	},
-	label: {
-		fontSize: 16,
-		fontWeight: '600',
-		color: '#000000',
-		marginBottom: 8,
-	},
-	inputWrapper: {
-		width: '100%',
-		position: 'relative',
-		flexShrink: 0,
-	},
-	note: {
-		fontSize: 12,
-		marginTop: 8,
-	},
-	input: {
-		flex: 1,
-		minHeight: 80,
-		textAlignVertical: 'top',
-		paddingBottom: 28,
-		width: '100%',
-		flexShrink: 0,
-	},
-	counterWrapper: {
-		position: 'absolute',
-		right: 12,
-		bottom: 8,
-	},
-	counter: {
-		fontSize: 12,
-	},
-
-	errorWrap: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginTop: 8,
-		gap: 6,
-	},
-
-	error: {
-		fontSize: 14,
-		lineHeight: 20,
-		flex: 1,
-		fontWeight: '400',
-	},
-})

package/src/component/YesNoButtons.tsx

@@ -1,236 +0,0 @@
-import {useMemo} from 'react'
-import {View, Text, StyleSheet, type TextStyle, type ViewStyle} from 'react-native'
-import ButtonSubmit from '@component/ButtonSubmit'
-import {
-	BG_DEFAULT,
-	BG_SECONDARY,
-	BORDER_DEFAULT,
-	BORDER_SELECTED,
-	ERROR_COLOR,
-	PRESSED_COLOR,
-	PRIMARY_COLOR,
-	TEXT_DARK,
-	TEXT_WHITE,
-} from '@utils/constants'
-
-/**
- * Value type for `YesNoButtons`.
- *
- * - `'yes'` – Yes selected.
- * - `'no'` – No selected.
- * - `null` – no selection.
- */
-export type YesNoValue = 'yes' | 'no' | null
-
-/**
- * Visual variant for the selected state of `YesNoButtons`.
- *
- * - `'primary'` – solid primary background with white text.
- * - `'secondary'` – light background with border and dark text.
- */
-export type YesNoSelectedVariant = 'primary' | 'secondary'
-
-/**
- * Props for the `YesNoButtons` component.
- *
- * Renders a question label and two `ButtonSubmit` instances for Yes/No selection.
- */
-export interface YesNoButtonsProps {
-	/**
-	 * Question text displayed above the buttons.
-	 */
-	question: string
-	/**
-	 * Current selection value.
-	 */
-	value: YesNoValue
-	/**
-	 * Called when user selects Yes or No.
-	 */
-	onSelect: (value: 'yes' | 'no') => void
-	/**
-	 * Visual variant for the selected button.
-	 *
-	 * @default 'primary'
-	 */
-	selectedVariant?: YesNoSelectedVariant
-	/**
-	 * Label for the Yes button.
-	 *
-	 * @default 'Yes'
-	 */
-	yesLabel?: string
-	/**
-	 * Label for the No button.
-	 *
-	 * @default 'No'
-	 */
-	noLabel?: string
-	/**
-	 * Error message; when present, shown below the buttons with an "!" icon.
-	 */
-	error?: string
-	/**
-	 * App width, passed to the underlying `ButtonSubmit` components.
-	 */
-	appWidth: number
-	/**
-	 * Override background color when an option is selected (secondary variant).
-	 */
-	selectedBackgroundColor?: string
-	/**
-	 * Override border color when an option is selected (secondary variant).
-	 */
-	selectedBorderColor?: string
-	/**
-	 * Override text color when an option is selected (secondary variant).
-	 */
-	selectedTextColor?: string
-	/**
-	 * Style for the question text.
-	 */
-	questionStyle?: TextStyle
-	/**
-	 * Style for the error text.
-	 */
-	errorStyle?: TextStyle
-	/**
-	 * Color for the error text and "!" icon.
-	 *
-	 * @default red (`ERROR_COLOR`)
-	 */
-	errorColor?: string
-	/**
-	 * Style for the outer wrapper view.
-	 */
-	style?: ViewStyle
-}
-
-function YesNoButtons({
-	question,
-	value,
-	onSelect,
-	selectedVariant = 'primary',
-	yesLabel = 'Yes',
-	noLabel = 'No',
-	error,
-	appWidth,
-	selectedBackgroundColor,
-	selectedBorderColor,
-	selectedTextColor,
-	questionStyle,
-	errorStyle,
-	errorColor = ERROR_COLOR,
-	style,
-}: YesNoButtonsProps) {
-	const hasError = error != null && error !== ''
-
-	const isPrimarySelected = selectedVariant === 'primary'
-	const variantStyles = useMemo(
-		() =>
-			({
-				primary: {
-					selectedBg: PRIMARY_COLOR,
-					selectedBorder: undefined,
-					selectedText: TEXT_WHITE,
-				},
-				secondary: {
-					selectedBg: selectedBackgroundColor ?? BG_SECONDARY,
-					selectedBorder: selectedBorderColor ?? BORDER_SELECTED,
-					selectedText: selectedTextColor ?? TEXT_DARK,
-				},
-			}[selectedVariant]),
-		[selectedVariant, selectedBackgroundColor, selectedBorderColor, selectedTextColor],
-	)
-
-	const {selectedBg, selectedBorder, selectedText} = variantStyles
-
-	const buttonStyles = useMemo(() => {
-		const getStyles = (option: 'yes' | 'no') => {
-			const isSelected = value === option
-			return {
-				variant: isSelected && isPrimarySelected ? 'primary' : 'secondary',
-				backgroundColor: isSelected ? selectedBg : BG_DEFAULT,
-				textColor: isSelected ? selectedText : hasError ? errorColor : TEXT_DARK,
-				borderColor: isSelected ? selectedBorder : hasError ? errorColor : BORDER_DEFAULT,
-			}
-		}
-
-		return {
-			yes: getStyles('yes'),
-			no: getStyles('no'),
-		}
-	}, [value, isPrimarySelected, selectedBg, selectedText, hasError, errorColor, selectedBorder])
-
-	const renderButton = (option: 'yes' | 'no') => {
-		const stylesBtn = buttonStyles[option]
-		const label = option === 'yes' ? yesLabel : noLabel
-		return (
-			<ButtonSubmit
-				appWidth={appWidth}
-				title={label}
-				onPress={() => onSelect(option)}
-				variant={stylesBtn.variant as any}
-				fullWidth
-				backgroundColor={stylesBtn.backgroundColor}
-				textColor={stylesBtn.textColor}
-				borderColor={stylesBtn.borderColor}
-				pressedColor={PRESSED_COLOR}
-				containerStyle={styles.buttonContainer}
-			/>
-		)
-	}
-
-	return (
-		<View style={[styles.wrapper, style]}>
-			{question != null && question !== '' && <Text style={[styles.question, questionStyle]}>{question}</Text>}
-			<View style={styles.row}>
-				<View style={styles.buttonSlot}>{renderButton('yes')}</View>
-				<View style={styles.buttonSlot}>{renderButton('no')}</View>
-			</View>
-			{hasError && (
-				<View style={styles.errorRow}>
-					<Text style={[styles.errorIcon, {color: errorColor}]}>!</Text>
-					<Text style={[styles.errorText, {color: errorColor}, errorStyle]}>{error}</Text>
-				</View>
-			)}
-		</View>
-	)
-}
-
-export default YesNoButtons
-
-const styles = StyleSheet.create({
-	wrapper: {
-		width: '100%',
-	},
-	question: {
-		fontSize: 16,
-		fontWeight: '600',
-		color: '#000000',
-		marginBottom: 12,
-	},
-	row: {
-		flexDirection: 'row',
-		gap: 12,
-	},
-	buttonSlot: {
-		flex: 1,
-	},
-	buttonContainer: {
-		marginTop: 0,
-	},
-	errorRow: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginTop: 8,
-		gap: 6,
-	},
-	errorIcon: {
-		fontSize: 14,
-		fontWeight: '700',
-	},
-	errorText: {
-		fontSize: 12,
-	},
-})

package/src/index.tsx

@@ -1,33 +0,0 @@
-export {Button} from '@component/Button'
-export type {ButtonProps} from '@component/Button'
-
-export {default as RatingNumber} from '@component/RatingNumber'
-export type {RatingNumberProps, RatingNumberSize} from '@component/RatingNumber'
-
-export {default as Rating} from '@component/Rating'
-export type {RatingProps} from '@component/Rating'
-
-export {default as Textarea} from '@component/Textarea'
-export type {TextareaProps} from '@component/Textarea'
-
-export {default as Input} from '@component/Input'
-export type {InputProps} from '@component/Input'
-
-export {default as ButtonSubmit} from '@component/ButtonSubmit'
-export type {ButtonSubmitProps, ButtonSubmitVariant} from '@component/ButtonSubmit'
-
-export {default as YesNoButtons} from '@component/YesNoButtons'
-export type {YesNoButtonsProps, YesNoValue, YesNoSelectedVariant} from '@component/YesNoButtons'
-
-export {default as MultiSelectButtons} from '@component/MultiSelectButtons'
-export type {
-	MultiSelectButtonsProps,
-	MultiSelectOption,
-	MultiSelectSelectedVariant,
-} from '@component/MultiSelectButtons'
-
-export {default as AIAFeedback} from './AIAFeedback'
-export type {AIAFeedbackProps, AIAFeedbackRef} from './AIAFeedback'
-
-export {default as AIAContentUsefulness} from './AIAContentUsefulness'
-export type {AIAContentUsefulnessProps} from './AIAContentUsefulness'

package/src/service/feedbackService.ts

@@ -1,108 +0,0 @@
-import {customFetch} from '@/utils/networking'
-import {type InitOptions} from '@/utils/constants'
-
-export interface SubmitFormData {
-	slug: string
-	debug: boolean
-	event_tag: string
-	metadata: any
-	request_id: string
-	rating: number
-	selected_options: string
-	free_text: string
-}
-
-export interface SubmitSelectionData {
-	slug: string
-	debug: boolean
-	event_tag: string
-	metadata: any
-	rating: number
-	request_id: string
-}
-
-export interface ShowOptions {
-	forceModal?: boolean
-	initialData?: any
-}
-
-type ShowListener = (slug: string, options?: ShowOptions) => boolean
-
-const showListeners: ShowListener[] = []
-
-export const feedbackService = {
-	onShow: (callback: ShowListener) => {
-		showListeners.push(callback)
-		return () => {
-			const index = showListeners.indexOf(callback)
-			if (index > -1) showListeners.splice(index, 1)
-		}
-	},
-
-	emitShow: (slug: string, options?: ShowOptions): boolean => {
-		let handled = false
-		for (const listener of showListeners) {
-			if (listener(slug, options)) handled = true
-		}
-		return handled
-	},
-
-	requestForm: (options: InitOptions, callback: (response: any) => void) => {
-		customFetch({
-			_shouldRetry: true,
-			_url: '8vs2qwFD1rlSFWIa13Wc',
-			_data: {
-				slug: options.formSlug,
-				debug: options.debug,
-				event_tag: options.eventTag,
-				metadata: options.metadata,
-			},
-			_callback: callback,
-			options: options,
-		})
-	},
-
-	submitForm: async (formData: SubmitFormData, options: InitOptions): Promise<any> => {
-		return new Promise((resolve, reject) => {
-			customFetch({
-				_shouldRetry: true,
-				_url: 'LXvcFSTTOqxxmJX9qQar',
-				_data: formData,
-				_callback: (res: any) => {
-					if (!res) {
-						reject(new Error('Empty response'))
-						return
-					}
-					if (res.error) {
-						reject(new Error(res.error))
-						return
-					}
-					resolve(res)
-				},
-				options: options,
-			})
-		})
-	},
-
-	submitSelection: async (selectionData: SubmitSelectionData, options: InitOptions): Promise<any> => {
-		return new Promise((resolve, reject) => {
-			customFetch({
-				_shouldRetry: true,
-				_url: 'LXvcFSTTOqxxmJX9qQar',
-				_data: selectionData,
-				_callback: (res: any) => {
-					if (!res) {
-						reject(new Error('Empty response'))
-						return
-					}
-					if (res.error) {
-						reject(new Error(res.error))
-						return
-					}
-					resolve(res)
-				},
-				options: options,
-			})
-		})
-	},
-}