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

package/src/component/ButtonSubmit.tsx

@@ -1,335 +0,0 @@
-import * as f from '@utils/common'
-import type {ReactNode} from 'react'
-import {useMemo} from 'react'
-import {ActivityIndicator, Pressable, StyleSheet, Text, View, type TextStyle, type ViewStyle} from 'react-native'
-
-import {
-	BG_BUTTON_SECONDARY,
-	BG_DISABLED,
-	BG_DISABLED_SECONDARY,
-	ERROR_COLOR,
-	PRESSED_COLOR,
-	PRIMARY_COLOR,
-	TEXT_DISABLED,
-	TEXT_WHITE,
-} from '@utils/constants'
-
-/**
- * Visual style variant for `ButtonSubmit`.
- *
- * - `'primary'` – solid primary background with white text.
- * - `'secondary'` – light background with colored border and text.
- */
-export type ButtonSubmitVariant = 'primary' | 'secondary'
-
-/**
- * Props for the form submit button.
- *
- * This is a higher-level button component that supports loading state,
- * primary/secondary variants, full-width layout and basic theming.
- */
-export interface ButtonSubmitProps {
-	/**
-	 * Called when the button is pressed.
-	 */
-	onPress: () => void
-	/**
-	 * Button label.
-	 */
-	title: string
-	/**
-	 * Optional icon or character shown to the left of the title.
-	 * Accepts a string (e.g. `"+"`, `"✓"`) or a ReactNode (e.g. SVG icon component).
-	 */
-	leftIcon?: string | ReactNode
-	/**
-	 * Visual variant of the button.
-	 *
-	 * @default 'primary'
-	 */
-	variant?: ButtonSubmitVariant
-	/**
-	 * When true, the button stretches to full container width.
-	 *
-	 * @default true
-	 */
-	fullWidth?: boolean
-	/**
-	 * When true, disables the button.
-	 *
-	 * @default false
-	 */
-	disabled?: boolean
-	/**
-	 * When true, shows an `ActivityIndicator` and prevents presses.
-	 *
-	 * @default false
-	 */
-	loading?: boolean
-	/**
-	 * Screen width, used internally to compute top margin.
-	 */
-	appWidth: number
-	/**
-	 * On tablets, constrain width to 200 instead of full width.
-	 */
-	isTabletInstrusive?: boolean
-	/**
-	 * Custom font family for the label (and left icon text).
-	 */
-	fontFamily?: string
-	/**
-	 * Font size for the label.
-	 *
-	 * @default 16
-	 */
-	fontSize?: number
-	/**
-	 * Text color override for normal (non-disabled, non-pressed) state.
-	 */
-	textColor?: string
-	/**
-	 * Background color override for normal (non-disabled, non-pressed) state.
-	 */
-	backgroundColor?: string
-	/**
-	 * Background color when pressed.
-	 */
-	pressedColor?: string
-	/**
-	 * Background color when disabled.
-	 */
-	disabledBackgroundColor?: string
-	/**
-	 * Text color when disabled.
-	 */
-	disabledTextColor?: string
-	/**
-	 * Border color for secondary variant.
-	 */
-	borderColor?: string
-	/**
-	 * Style for the outer container wrapping the `Pressable`.
-	 */
-	containerStyle?: ViewStyle
-	/**
-	 * Style for the `Pressable` itself.
-	 */
-	style?: ViewStyle
-	/**
-	 * Style for the text label.
-	 */
-	textStyle?: TextStyle
-	/**
-	 * Maximum number of lines for the label.
-	 */
-	numberOfLines?: number
-}
-
-function ButtonSubmit({
-	onPress,
-	title,
-	leftIcon,
-	variant = 'primary',
-	fullWidth = true,
-	disabled = false,
-	loading = false,
-	appWidth,
-	isTabletInstrusive,
-	fontFamily,
-	fontSize = 16,
-	textColor: textColorProp,
-	backgroundColor: backgroundColorProp,
-	pressedColor: pressedColorProp,
-	disabledBackgroundColor: disabledBgProp,
-	disabledTextColor: disabledTextProp,
-	borderColor: borderColorProp,
-	containerStyle,
-	style,
-	textStyle,
-	numberOfLines = 1,
-}: ButtonSubmitProps) {
-	// const [pressed, setPressed] = useState(false)
-	const isPrimary = variant === 'primary'
-
-	const currentStyles = useMemo(() => {
-		const base = (() => {
-			if (isPrimary) {
-				return {
-					bg: PRIMARY_COLOR,
-					disabledBg: BG_DISABLED,
-					textColor: TEXT_WHITE,
-					border: undefined,
-					borderW: 0,
-					pressedBg: pressedColorProp ?? PRESSED_COLOR,
-					pressedText: TEXT_WHITE,
-					pressedBorder: undefined,
-				}
-			}
-			return {
-				bg: BG_BUTTON_SECONDARY,
-				disabledBg: BG_DISABLED_SECONDARY,
-				textColor: ERROR_COLOR,
-				border: borderColorProp ?? ERROR_COLOR,
-				borderW: 1.2,
-				pressedBg: BG_BUTTON_SECONDARY,
-				pressedText: pressedColorProp ?? PRESSED_COLOR,
-				pressedBorder: pressedColorProp ?? PRESSED_COLOR,
-			}
-		})()
-
-		if (disabled || loading) {
-			return {
-				bg: disabledBgProp ?? base.disabledBg,
-				text: disabledTextProp ?? TEXT_DISABLED,
-				border: isPrimary ? undefined : disabledTextProp ?? TEXT_DISABLED,
-				borderW: base.borderW,
-			}
-		}
-
-		// if (pressed) {
-		// 	return {
-		// 		bg: base.pressedBg,
-		// 		text: base.pressedText,
-		// 		border: base.pressedBorder,
-		// 		borderW: base.borderW,
-		// 	}
-		// }
-
-		return {
-			bg: backgroundColorProp ?? base.bg,
-			text: textColorProp ?? base.textColor,
-			border: base.border,
-			borderW: base.borderW,
-		}
-	}, [
-		isPrimary,
-		disabled,
-		loading,
-		pressedColorProp,
-		borderColorProp,
-		disabledBgProp,
-		disabledTextProp,
-		backgroundColorProp,
-		textColorProp,
-	])
-
-	const layout = useMemo(() => {
-		const widthStyle = (() => {
-			if (isTabletInstrusive) return {width: 200}
-			if (fullWidth) return {width: '100%' as const}
-			return {alignSelf: 'flex-start' as const}
-		})()
-
-		const loaderColor = (() => {
-			if (disabled) return TEXT_DISABLED
-			if (isPrimary) return TEXT_WHITE
-			return ERROR_COLOR
-		})()
-
-		return {
-			width: widthStyle,
-			loaderColor,
-			opacity: loading ? 0 : 1,
-			marginTop: f.w_p(appWidth, 10),
-		}
-	}, [isTabletInstrusive, fullWidth, disabled, isPrimary, loading, appWidth])
-
-	return (
-		<View
-			style={[
-				styles.container,
-				{
-					marginTop: layout.marginTop,
-				},
-				containerStyle,
-			]}
-		>
-			<Pressable
-				onPress={disabled || loading ? undefined : onPress}
-				// onPressIn={() => setPressed(true)}
-				// onPressOut={() => setPressed(false)}
-				disabled={disabled}
-				style={[
-					styles.button,
-					layout.width,
-					{
-						backgroundColor: currentStyles.bg,
-						borderWidth: currentStyles.borderW,
-						borderColor: currentStyles.border,
-					},
-					style,
-				]}
-			>
-				{loading && <ActivityIndicator style={styles.loader} color={layout.loaderColor} />}
-				<View style={styles.contentRow}>
-					{leftIcon != null && leftIcon !== '' && (
-						<Text
-							style={[
-								styles.text,
-								styles.leftIcon,
-								{
-									fontSize,
-									fontFamily,
-									color: currentStyles.text,
-									opacity: layout.opacity,
-								},
-								textStyle,
-							]}
-						>
-							{leftIcon}
-						</Text>
-					)}
-					<Text
-						style={[
-							styles.text,
-							{
-								fontSize,
-								fontFamily,
-								color: currentStyles.text,
-								opacity: layout.opacity,
-							},
-							textStyle,
-						]}
-						numberOfLines={numberOfLines}
-						ellipsizeMode="tail"
-					>
-						{title}
-					</Text>
-				</View>
-			</Pressable>
-		</View>
-	)
-}
-
-export default ButtonSubmit
-
-const styles = StyleSheet.create({
-	container: {
-		width: '100%',
-	},
-	button: {
-		borderRadius: 8,
-		paddingVertical: 14,
-		paddingHorizontal: 20,
-		justifyContent: 'center',
-		alignItems: 'center',
-		minHeight: 44,
-		maxWidth: '100%',
-	},
-	loader: {
-		position: 'absolute',
-	},
-	contentRow: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		gap: 6,
-	},
-	leftIcon: {
-		marginRight: 0,
-	},
-	text: {
-		fontWeight: '500',
-		flexShrink: 1,
-	},
-})

package/src/component/Input.tsx

@@ -1,288 +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 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',
-	},
-})