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

package/src/component/MultiSelectButtons.tsx

@@ -1,272 +0,0 @@
-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,
-	},
-})

package/src/component/README.md

@@ -1,215 +0,0 @@
-# Components – Props reference
-
-Documentation for all components and their props in `@originallyus/feedback-rn-sdk`. Tables: **Prop** | **Type** | **Default** | **Description**.
-
----
-
-## Button
-
-Basic pressable button (Pressable + Text).
-
-| Prop        | Type         | Default | Description                             |
-| ----------- | ------------ | ------- | --------------------------------------- |
-| `title`     | `string`     | —       | **Required.** Text shown on the button. |
-| `onPress`   | `() => void` | —       | **Required.** Callback when pressed.    |
-| `disabled`  | `boolean`    | `false` | Disables the button.                    |
-| `style`     | `ViewStyle`  | —       | Style for the button container.         |
-| `textStyle` | `TextStyle`  | —       | Style for the label text.               |
-
----
-
-## ButtonSubmit
-
-Submit button for forms: primary (red background) or secondary (red border + red text, light pink background). Supports loading state, left icon, and full width or content-based width.
-
-| Prop                      | Type                       | Default     | Description                                                             |
-| ------------------------- | -------------------------- | ----------- | ----------------------------------------------------------------------- |
-| `onPress`                 | `() => void`               | —           | **Required.** Callback when pressed.                                    |
-| `title`                   | `string`                   | —           | **Required.** Button label.                                             |
-| `leftIcon`                | `string`                   | —           | Character shown to the left of the title (e.g. `"+"`, `"✓"`).           |
-| `variant`                 | `'primary' \| 'secondary'` | `'primary'` | primary = red background; secondary = red border + text, light pink bg. |
-| `fullWidth`               | `boolean`                  | `true`      | `true` = full width, `false` = width by content.                        |
-| `disabled`                | `boolean`                  | `false`     | Disables the button.                                                    |
-| `loading`                 | `boolean`                  | `false`     | Shows ActivityIndicator and blocks press.                               |
-| `appWidth`                | `number`                   | —           | **Required.** Screen width (used for margin).                           |
-| `isTabletInstrusive`      | `boolean`                  | —           | On tablet: fixed 200px width instead of full width.                     |
-| `fontFamily`              | `string`                   | —           | Font family.                                                            |
-| `fontSize`                | `number`                   | `16`        | Font size.                                                              |
-| `textColor`               | `string`                   | —           | Text color (primary = white, secondary = red).                          |
-| `backgroundColor`         | `string`                   | —           | Background color.                                                       |
-| `pressedColor`            | `string`                   | —           | Color when pressed.                                                     |
-| `disabledBackgroundColor` | `string`                   | —           | Background color when disabled.                                         |
-| `disabledTextColor`       | `string`                   | —           | Text color when disabled.                                               |
-| `borderColor`             | `string`                   | —           | Border color (secondary variant).                                       |
-| `containerStyle`          | `ViewStyle`                | —           | Style for the wrapper view.                                             |
-| `style`                   | `ViewStyle`                | —           | Style for the Pressable.                                                |
-| `textStyle`               | `TextStyle`                | —           | Style for the text.                                                     |
-
----
-
-## RatingNumber
-
-Numeric rating scale: a row of buttons from `rating_min` to `rating_max` with optional left/right labels. Buttons are full width per device; supports size presets and compact mode.
-
-| Prop                                  | Type                             | Default     | Description                                             |
-| ------------------------------------- | -------------------------------- | ----------- | ------------------------------------------------------- |
-| `scale_label_color`                   | `string`                         | —           | **Required.** Text color for left/right labels.         |
-| `scale_label_left`                    | `string`                         | —           | Left label (e.g. "Strongly disagree").                  |
-| `scale_label_right`                   | `string`                         | —           | Right label (e.g. "Strongly agree").                    |
-| `scale_label_font`                    | `string`                         | —           | Font for labels.                                        |
-| `scale_label_fontsize`                | `number`                         | —           | Font size for labels.                                   |
-| `handlePressRating`                   | `(rating: number) => void`       | —           | **Required.** Callback when a number is selected.       |
-| `numStar`                             | `number`                         | —           | **Required.** Currently selected value.                 |
-| `rating_min`                          | `number`                         | —           | **Required.** Minimum value.                            |
-| `rating_max`                          | `number`                         | —           | **Required.** Maximum value.                            |
-| `appWidth`                            | `number`                         | —           | **Required.** App width (for layout).                   |
-| `size`                                | `'small' \| 'medium' \| 'large'` | `'medium'`  | Preset for height and spacing.                          |
-| `compact`                             | `boolean`                        | `true`      | `true` = no gap between buttons; `false` = gap between. |
-| `error`                               | `string`                         | —           | Error message; red border on buttons and text below.    |
-| `errorBorderColor`                    | `string`                         | `'#D32F2F'` | Border color when error is set.                         |
-| `rating_number_font`                  | `string`                         | —           | Font for the number inside each button.                 |
-| `rating_number_fontsize`              | `number`                         | —           | Font size for the number.                               |
-| `rating_number_bg_color`              | `string`                         | —           | Background color when not selected.                     |
-| `rating_number_border_color`          | `string`                         | —           | Border color when not selected.                         |
-| `rating_number_selected_bg_color`     | `string`                         | —           | Background color when selected (default #082065).       |
-| `rating_number_selected_border_color` | `string`                         | —           | Border color when selected.                             |
-| `rating_number_selected_text_color`   | `string`                         | —           | Text color when selected.                               |
-| `rating_number_text_color`            | `string`                         | —           | Text color when not selected.                           |
-| `errorStyle`                          | `TextStyle`                      | —           | Style for the error text.                               |
-
----
-
-## Rating
-
-Star rating block: title, question/subtitle, and a row of tappable stars (1–5 by default). Uses `RatingStar` internally. Selected stars are filled (e.g. golden), unselected are grey. Optional error message below.
-
-| Prop                | Type                       | Default                            | Description                                       |
-| ------------------- | -------------------------- | ---------------------------------- | ------------------------------------------------- |
-| `title`             | `string`                   | `'Help us get better'`             | Main heading above the question.                  |
-| `question`          | `string`                   | `'How was your experience today?'` | Subtitle or question text.                        |
-| `value`             | `number`                   | —                                  | **Required.** Current star value (1..rating_max). |
-| `onRate`            | `(rating: number) => void` | —                                  | **Required.** Callback when user selects a star.  |
-| `rating_min`        | `number`                   | `1`                                | Minimum star value.                               |
-| `rating_max`        | `number`                   | `5`                                | Maximum star value.                               |
-| `disabled`          | `boolean`                  | `false`                            | Disables star taps.                               |
-| `error`             | `string`                   | —                                  | Error message; shown below the stars.             |
-| `normalStarColor`   | `string`                   | `'#D0D0D0'`                        | Color for unselected stars.                       |
-| `selectedStarColor` | `string`                   | `'#FFC107'`                        | Color for selected stars (e.g. golden).           |
-| `titleStyle`        | `TextStyle`                | —                                  | Style for the title.                              |
-| `questionStyle`     | `TextStyle`                | —                                  | Style for the question.                           |
-| `errorStyle`        | `TextStyle`                | —                                  | Style for the error text.                         |
-| `style`             | `ViewStyle`                | —                                  | Style for the wrapper.                            |
-
----
-
-## Textarea
-
-Multi-line text input: label on top, note below, placeholder, and optional character count (maxLength). Supports focus and error states.
-
-| Prop                   | Type                     | Default         | Description                                           |
-| ---------------------- | ------------------------ | --------------- | ----------------------------------------------------- |
-| `value`                | `string`                 | —               | **Required.** Current value.                          |
-| `onChangeText`         | `(text: string) => void` | —               | **Required.** Callback when text changes.             |
-| `placeholder`          | `string`                 | `'Placeholder'` | Placeholder text.                                     |
-| `label`                | `string`                 | —               | Label above the field.                                |
-| `note`                 | `string`                 | —               | Helper text below the field.                          |
-| `error`                | `string`                 | —               | Error message; red border and text below.             |
-| `maxLength`            | `number`                 | —               | Max characters; shows count 0/maxLength bottom-right. |
-| `appWidth`             | `number`                 | —               | **Required.** App width (for padding).                |
-| `minHeight`            | `number`                 | `120`           | Minimum height of the input area.                     |
-| `backgroundColor`      | `string`                 | —               | Background color of the field.                        |
-| `borderColor`          | `string`                 | —               | Border color (unfocused).                             |
-| `focusBackgroundColor` | `string`                 | —               | Background color when focused.                        |
-| `focusBorderColor`     | `string`                 | —               | Border color when focused.                            |
-| `errorBorderColor`     | `string`                 | `'#D32F2F'`     | Border color when error is set.                       |
-| `fontFamily`           | `string`                 | —               | Font family.                                          |
-| `fontSize`             | `number`                 | `16`            | Font size.                                            |
-| `placeholderTextColor` | `string`                 | —               | Placeholder text color.                               |
-| `textColor`            | `string`                 | —               | Text color.                                           |
-| `labelStyle`           | `TextStyle`              | —               | Style for the label.                                  |
-| `captionStyle`         | `TextStyle`              | —               | Style for caption.                                    |
-| `noteStyle`            | `TextStyle`              | —               | Style for the note.                                   |
-| `errorStyle`           | `TextStyle`              | —               | Style for the error text.                             |
-| `counterStyle`         | `TextStyle`              | —               | Style for the character counter.                      |
-| `style`                | `ViewStyle`              | —               | Style for the wrapper.                                |
-
----
-
-## Input
-
-Single-line text input: same structure as Textarea (label, note, error), with optional character counter when `maxLength` is set.
-
-| Prop                   | Type                     | Default         | Description                                              |
-| ---------------------- | ------------------------ | --------------- | -------------------------------------------------------- |
-| `value`                | `string`                 | —               | **Required.** Current value.                             |
-| `onChangeText`         | `(text: string) => void` | —               | **Required.** Callback when text changes.                |
-| `placeholder`          | `string`                 | `'Placeholder'` | Placeholder text.                                        |
-| `label`                | `string`                 | —               | Label above the field.                                   |
-| `note`                 | `string`                 | —               | Helper text below the field.                             |
-| `error`                | `string`                 | —               | Error message; red border and text below.                |
-| `maxLength`            | `number`                 | —               | Max characters.                                          |
-| `showCounter`          | `boolean`                | `true`          | Show 0/maxLength when maxLength is set; `false` to hide. |
-| `appWidth`             | `number`                 | —               | **Required.** App width (for padding).                   |
-| `backgroundColor`      | `string`                 | —               | Background color.                                        |
-| `borderColor`          | `string`                 | —               | Border color.                                            |
-| `focusBackgroundColor` | `string`                 | —               | Background color when focused.                           |
-| `focusBorderColor`     | `string`                 | —               | Border color when focused.                               |
-| `errorBorderColor`     | `string`                 | `'#D32F2F'`     | Border color when error is set.                          |
-| `fontFamily`           | `string`                 | —               | Font family.                                             |
-| `fontSize`             | `number`                 | `16`            | Font size.                                               |
-| `placeholderTextColor` | `string`                 | —               | Placeholder text color.                                  |
-| `textColor`            | `string`                 | —               | Text color.                                              |
-| `labelStyle`           | `TextStyle`              | —               | Style for the label.                                     |
-| `noteStyle`            | `TextStyle`              | —               | Style for the note.                                      |
-| `errorStyle`           | `TextStyle`              | —               | Style for the error text.                                |
-| `counterStyle`         | `TextStyle`              | —               | Style for the counter.                                   |
-| `style`                | `ViewStyle`              | —               | Style for the wrapper.                                   |
-
----
-
-## YesNoButtons
-
-Two Yes / No buttons built with ButtonSubmit. Single selection; selected style can be primary (red background) or secondary (light background + bold border).
-
-| Prop                      | Type                             | Default     | Description                                                       |
-| ------------------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
-| `question`                | `string`                         | —           | **Required.** Question text above the buttons.                    |
-| `value`                   | `'yes' \| 'no' \| null`          | —           | **Required.** Current selection.                                  |
-| `onSelect`                | `(value: 'yes' \| 'no') => void` | —           | **Required.** Callback when an option is selected.                |
-| `selectedVariant`         | `'primary' \| 'secondary'`       | `'primary'` | primary = red bg, white text; secondary = light bg + bold border. |
-| `yesLabel`                | `string`                         | `'Yes'`     | Label for the Yes button.                                         |
-| `noLabel`                 | `string`                         | `'No'`      | Label for the No button.                                          |
-| `error`                   | `string`                         | —           | Error message; shown below the two buttons with "!".              |
-| `appWidth`                | `number`                         | —           | **Required.** App width (for ButtonSubmit).                       |
-| `selectedBackgroundColor` | `string`                         | —           | Override background when selected (secondary).                    |
-| `selectedBorderColor`     | `string`                         | —           | Override border when selected (secondary).                        |
-| `selectedTextColor`       | `string`                         | —           | Override text color when selected (secondary).                    |
-| `questionStyle`           | `TextStyle`                      | —           | Style for the question.                                           |
-| `errorStyle`              | `TextStyle`                      | —           | Style for the error text.                                         |
-| `errorColor`              | `string`                         | —           | Error text color (default red).                                   |
-| `style`                   | `ViewStyle`                      | —           | Style for the wrapper.                                            |
-
----
-
-## MultiSelectButtons
-
-Multiple choice (tag) buttons: select several options, wrap layout. Uses ButtonSubmit with "+" / "✓" icon on the left. Selected variant: primary (red background) or secondary (light background + bold border, black text).
-
-| Prop                      | Type                           | Default       | Description                                                                   |
-| ------------------------- | ------------------------------ | ------------- | ----------------------------------------------------------------------------- |
-| `question`                | `string`                       | —             | **Required.** Question text above the options.                                |
-| `options`                 | `MultiSelectOption[]`          | —             | **Required.** List of options. Each: `{ value: string, label: string }`.      |
-| `value`                   | `string[]`                     | —             | **Required.** Array of selected values.                                       |
-| `onSelect`                | `(selected: string[]) => void` | —             | **Required.** Callback when selection changes (toggles per option).           |
-| `appWidth`                | `number`                       | —             | **Required.** App width.                                                      |
-| `selectedVariant`         | `'primary' \| 'secondary'`     | `'secondary'` | primary = red bg, white text; secondary = light bg + blue border, black text. |
-| `error`                   | `string`                       | —             | Error message; shown below the buttons.                                       |
-| `selectedBackgroundColor` | `string`                       | —             | Override background when selected.                                            |
-| `selectedBorderColor`     | `string`                       | —             | Override border when selected.                                                |
-| `selectedTextColor`       | `string`                       | —             | Override text color when selected.                                            |
-| `questionStyle`           | `TextStyle`                    | —             | Style for the question.                                                       |
-| `errorStyle`              | `TextStyle`                    | —             | Style for the error text.                                                     |
-| `errorColor`              | `string`                       | —             | Error text color.                                                             |
-| `style`                   | `ViewStyle`                    | —             | Style for the wrapper.                                                        |
-
-**MultiSelectOption:** `{ value: string; label: string }`