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

package/src/component/Input.tsx

@@ -0,0 +1,288 @@
+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 single-line `Input` component.
+ *
+ * Renders a label, single-line text input, optional note, error,
+ * and an optional character counter.
+ */
+export interface InputProps {
+	/**
+	 * 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.
+	 */
+	maxLength?: number
+	/**
+	 * Whether to show the 0/maxLength counter when `maxLength` is set.
+	 *
+	 * @default true
+	 */
+	showCounter?: boolean
+	/**
+	 * App width, used to compute internal padding.
+	 */
+	appWidth: 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
+	/**
+	 * 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
+}
+
+const DEFAULT_BG = BG_DEFAULT
+const DEFAULT_BORDER = BORDER_SECONDARY
+const DEFAULT_FOCUS_BORDER = BORDER_FOCUS
+const DEFAULT_TEXT = TEXT_DARK
+const DEFAULT_PLACEHOLDER = TEXT_PLACEHOLDER
+const DEFAULT_COUNTER = TEXT_PLACEHOLDER
+const DEFAULT_NOTE = TEXT_NOTE
+const DEFAULT_ERROR = ERROR_COLOR
+
+function Input({
+	value,
+	onChangeText,
+	placeholder = 'Placeholder',
+	label,
+	note,
+	error,
+	maxLength,
+	showCounter = true,
+	appWidth,
+	backgroundColor = DEFAULT_BG,
+	borderColor = DEFAULT_BORDER,
+	focusBackgroundColor = DEFAULT_BG,
+	focusBorderColor = DEFAULT_FOCUS_BORDER,
+	errorBorderColor = DEFAULT_ERROR,
+	fontFamily,
+	fontSize = 16,
+	placeholderTextColor = DEFAULT_PLACEHOLDER,
+	textColor = DEFAULT_TEXT,
+	labelStyle,
+	noteStyle,
+	errorStyle,
+	counterStyle,
+	style,
+}: InputProps) {
+	const [focused, setFocused] = useState(false)
+	const length = value.length
+	const hasError = useMemo(() => error != null && error !== '', [error])
+	const showCounterEl = useMemo(() => maxLength != null && showCounter, [maxLength, showCounter])
+
+	const effectiveBorderColor = useMemo(() => {
+		if (hasError) return errorBorderColor
+		if (focused) return focusBorderColor
+		return borderColor
+	}, [hasError, focused, errorBorderColor, focusBorderColor, borderColor])
+
+	const inputContainerStyle = useMemo(
+		() => [
+			styles.inputWrapper,
+			{
+				paddingHorizontal: f.w_p(appWidth, 8),
+				paddingVertical: 10,
+				borderRadius: f.isTablet ? 6 : 4,
+				backgroundColor: focused ? focusBackgroundColor : backgroundColor,
+				borderColor: effectiveBorderColor,
+				borderWidth: 1,
+			},
+		],
+		[appWidth, focused, focusBackgroundColor, backgroundColor, effectiveBorderColor],
+	)
+
+	const textInputStyle = useMemo(
+		() => [
+			styles.input,
+			{
+				fontFamily,
+				fontSize,
+				color: textColor,
+				paddingRight: showCounterEl ? 48 : 0,
+			},
+		],
+		[fontFamily, fontSize, textColor, showCounterEl],
+	)
+
+	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}
+					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}
+				/>
+				{showCounterEl && (
+					<View style={styles.counterWrapper} pointerEvents="none">
+						<Text style={[styles.counter, {color: DEFAULT_COUNTER}, counterStyle]}>
+							{length}/{maxLength}
+						</Text>
+					</View>
+				)}
+			</View>
+			{note != null && note !== '' && <Text style={[styles.note, {color: DEFAULT_NOTE}, noteStyle]}>{note}</Text>}
+
+			{hasError && (
+				<View style={styles.errorWrap}>
+					<ErrorIcon size={20} color={ERROR_COLOR} />
+					<Text style={[styles.error, {color: DEFAULT_ERROR}, errorStyle]}>{error}</Text>
+				</View>
+			)}
+		</View>
+	)
+}
+
+export default Input
+
+const styles = StyleSheet.create({
+	wrapper: {
+		width: '100%',
+	},
+	label: {
+		fontSize: 16,
+		fontWeight: '600',
+		color: '#000000',
+		marginBottom: 8,
+	},
+	inputWrapper: {
+		width: '100%',
+		position: 'relative',
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+	input: {
+		flex: 1,
+		padding: 0,
+		minHeight: 20,
+	},
+	counterWrapper: {
+		position: 'absolute',
+		right: 12,
+		top: 0,
+		bottom: 0,
+		justifyContent: 'center',
+	},
+	counter: {
+		fontSize: 12,
+	},
+	note: {
+		fontSize: 12,
+		marginTop: 8,
+	},
+	errorWrap: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginTop: 8,
+		gap: 6,
+	},
+
+	error: {
+		fontSize: 14,
+		lineHeight: 20,
+		flex: 1,
+		fontWeight: '400',
+	},
+})

package/src/component/MultiSelectButtons.tsx

@@ -0,0 +1,272 @@
+import {useMemo} from 'react'
+import {View, Text, StyleSheet, type TextStyle, type ViewStyle} from 'react-native'
+import * as f from '@utils/common'
+import ButtonSubmit from '@component/ButtonSubmit'
+import CheckIcon from '@/assets/CheckIcon'
+import PlusIcon from '@/assets/PlusIcon'
+import {
+	BG_DEFAULT,
+	BG_SECONDARY,
+	BORDER_DEFAULT,
+	BORDER_SELECTED,
+	ERROR_COLOR,
+	PRIMARY_COLOR,
+	TEXT_DARK,
+	TEXT_DEFAULT,
+	TEXT_WHITE,
+} from '@utils/constants'
+import * as Haptics from 'expo-haptics'
+
+/**
+ * Visual variant for selected tags in `MultiSelectButtons`.
+ *
+ * - `'primary'` – solid primary background with white text.
+ * - `'secondary'` – light background with colored border and dark text.
+ */
+export type MultiSelectSelectedVariant = 'primary' | 'secondary'
+
+/**
+ * Single option for `MultiSelectButtons`.
+ */
+export interface MultiSelectOption {
+	/**
+	 * Value emitted in `value` and `onSelect`.
+	 */
+	value: string
+	/**
+	 * Label shown on the tag button.
+	 */
+	label: string
+}
+
+/**
+ * Props for the `MultiSelectButtons` component.
+ *
+ * Renders a question and a wrap layout of tag-like buttons allowing multiple selections.
+ */
+export interface MultiSelectButtonsProps {
+	/**
+	 * Question text displayed above the options.
+	 */
+	question: string
+	/**
+	 * List of options to render.
+	 */
+	options: MultiSelectOption[]
+	/**
+	 * Array of currently selected option values.
+	 */
+	value: string[]
+	/**
+	 * Called when the selection changes (toggle behavior).
+	 *
+	 * @param selected The new list of selected values.
+	 */
+	onSelect: (selected: string[]) => void
+	/**
+	 * App width, passed to underlying `ButtonSubmit` components.
+	 */
+	appWidth: number
+	/**
+	 * Visual variant for the selected tags.
+	 *
+	 * @default 'secondary'
+	 */
+	selectedVariant?: MultiSelectSelectedVariant
+	/**
+	 * Error message; when present, shown below the options.
+	 */
+	error?: string
+	/**
+	 * Override background color when an option is selected.
+	 */
+	selectedBackgroundColor?: string
+	/**
+	 * Override border color when an option is selected.
+	 */
+	selectedBorderColor?: string
+	/**
+	 * Override text color when an option is selected.
+	 */
+	selectedTextColor?: string
+	/**
+	 * Style for the question text.
+	 */
+	questionStyle?: TextStyle
+	/**
+	 * Style for the error text.
+	 */
+	errorStyle?: TextStyle
+	/**
+	 * Color for the error text and "!" icon.
+	 */
+	errorColor?: string
+	/**
+	 * Size of the plus/check icons (px).
+	 *
+	 * @default 16
+	 */
+	iconSize?: number
+	/**
+	 * Maximum number of lines for Each option label.
+	 *
+	 * @default 2
+	 */
+	optionNumberOfLines?: number
+	/**
+	 * Style for the outer wrapper view.
+	 */
+	style?: ViewStyle
+}
+
+function MultiSelectButtons({
+	question,
+	options,
+	value,
+	onSelect,
+	appWidth,
+	selectedVariant = 'secondary',
+	error,
+	selectedBackgroundColor,
+	selectedBorderColor,
+	selectedTextColor,
+	questionStyle,
+	errorStyle,
+	errorColor = ERROR_COLOR,
+	iconSize = 16,
+	optionNumberOfLines = 1,
+	style,
+}: MultiSelectButtonsProps) {
+	const hasError = useMemo(() => error != null && error !== '', [error])
+	const selectedSet = useMemo(() => new Set(value), [value])
+
+	const isPrimary = selectedVariant === 'primary'
+
+	const selectedBg = useMemo(
+		() => selectedBackgroundColor ?? (isPrimary ? PRIMARY_COLOR : BG_SECONDARY),
+		[selectedBackgroundColor, isPrimary],
+	)
+
+	const selectedBorder = useMemo(
+		() => (isPrimary ? selectedBg : selectedBorderColor ?? BORDER_SELECTED),
+		[isPrimary, selectedBg, selectedBorderColor],
+	)
+
+	const selectedText = useMemo(
+		() => selectedTextColor ?? (isPrimary ? TEXT_WHITE : TEXT_DEFAULT),
+		[selectedTextColor, isPrimary],
+	)
+
+	const toggle = (optionValue: string) => {
+		if (selectedSet.has(optionValue)) {
+			onSelect(value.filter(v => v !== optionValue))
+		} else {
+			onSelect([...value, optionValue])
+		}
+		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+	}
+
+	const marginTop = useMemo(() => [styles.optionsRow, {marginTop: f.w_p(appWidth, 10)}], [appWidth])
+
+	return (
+		<View style={[styles.wrapper, style]}>
+			{question != null && question !== '' && <Text style={[styles.question, questionStyle]}>{question}</Text>}
+			<View style={marginTop}>
+				{options.map(opt => {
+					const isSelected = selectedSet.has(opt.value)
+
+					const buttonStyles = (() => {
+						if (isSelected) {
+							return {
+								bg: selectedBg,
+								text: selectedText,
+								border: selectedBorder,
+							}
+						}
+						if (hasError) {
+							return {bg: BG_DEFAULT, text: errorColor, border: errorColor}
+						}
+						return {
+							bg: BG_DEFAULT,
+							text: TEXT_DARK,
+							border: BORDER_DEFAULT,
+						}
+					})()
+
+					return (
+						<View key={opt.value} style={styles.optionSlot}>
+							<ButtonSubmit
+								appWidth={appWidth}
+								title={opt.label}
+								leftIcon={
+									isSelected ? (
+										<CheckIcon size={iconSize} color={buttonStyles.text} />
+									) : (
+										<PlusIcon size={iconSize} color={buttonStyles.text} />
+									)
+								}
+								onPress={() => toggle(opt.value)}
+								variant="secondary"
+								fullWidth={false}
+								backgroundColor={buttonStyles.bg}
+								textColor={buttonStyles.text}
+								borderColor={buttonStyles.border}
+								containerStyle={styles.tagContainer}
+								numberOfLines={optionNumberOfLines}
+								style={styles.tagButton}
+							/>
+						</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 MultiSelectButtons
+
+const styles = StyleSheet.create({
+	wrapper: {
+		width: '100%',
+	},
+	question: {
+		fontSize: 16,
+		fontWeight: '600',
+		color: '#000000',
+		marginBottom: 4,
+	},
+	optionsRow: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: 10,
+	},
+	optionSlot: {
+		alignSelf: 'flex-start',
+	},
+	tagContainer: {
+		marginTop: 0,
+	},
+	tagButton: {
+		paddingVertical: 8,
+		paddingHorizontal: 12,
+	},
+	errorRow: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginTop: 8,
+		gap: 6,
+	},
+	errorIcon: {
+		fontSize: 14,
+		fontWeight: '700',
+	},
+	errorText: {
+		fontSize: 12,
+	},
+})