@widergy/mobile-ui 1.31.2 → 1.31.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.31.3](https://github.com/widergy/mobile-ui/compare/v1.31.2...v1.31.3) (2024-11-05)
+
+
+### Bug Fixes
+
+* [EVE-4328] UTRating ([#384](https://github.com/widergy/mobile-ui/issues/384)) ([6485384](https://github.com/widergy/mobile-ui/commit/6485384e2fed5cef0c2c68b88b1cbf8e45d4f3c7))
+
 ## [1.31.2](https://github.com/widergy/mobile-ui/compare/v1.31.1...v1.31.2) (2024-11-05)
 
 

package/lib/components/UTRating/README.md

@@ -0,0 +1,44 @@
+# UTRating
+
+## Description
+
+`UTRating` is a configurable rating input component that enables users to easily provide feedback through visual indicators.
+
+## Props
+
+| Name                | Type      | Default | Description                                                                                               |
+| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| classNames          | object    |         | Custom CSS class names for styling the component.                                                         |
+| dataTestId          | string    |         | Unique identifier for testing purposes.                                                                   |
+| disabled            | bool      |           | Indicates whether the input is disabled and cannot be interacted with.                                    |
+| error               | string    |         | Error message to display when validation fails or an issue occurs.                                        |
+| helpTextEnd         | string    |         | Additional help text displayed at the end of the input for user guidance.                                 |
+| helpTextStart       | string    |         | Additional help text displayed at the beginning of the input for user guidance.                           |
+| onChange            | func      |         | Callback function invoked when the input value changes.                                                   |
+| options             | array     |         | Array of options available for selection.                                                                 |
+| required            | bool      |          | Indicates whether the input is mandatory for form submission.                                             |
+| title               | string    |         | Title for the input, providing context to the user.                                                       |
+| validations         | array     |         | Array of validation rules to be applied to the input value.                                               |
+| value               | string    |         | The current value of the input.                                                                           |
+| variant             | string    | `star`  | Defines the visual style component.                                                                       |
+
+
+### options
+
+`options` is an array of objects with a `value` and a `name` key. The values should be in the range of 0-10, except for the `faces` variant. In desktop view, all options are displayed in one row; in responsive view, they are broken into 2 rows if there are more than 5 options.
+
+### variant
+
+The value of `variant` must be one of the following:
+
+- `faces`: the options are represented as face icons. Option values should exclusively be between 1 and 5, values outside this range are not supported.
+- `star`: the options are represented as star icons.
+- `text`: the options are represented as the option's `text`.
+
+### Structure of Validations
+
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
+
+### Handling Errors
+
+Errors can be displayed below the text input using either the `error` prop or the `validations` prop.

package/lib/components/UTRating/components/Option/index.js

@@ -0,0 +1,32 @@
+import { bool, func, object, string } from 'prop-types';
+import React from 'react';
+
+import { RATING_VARIANTS } from '../../constants';
+import UTButton from '../../../UTButton';
+
+import { getIcon, getVariant } from './utils';
+
+const Option = ({ disabled, isSelected, name, onChange, value, variant, wrapperStyle }) => (
+  <UTButton
+    colorTheme={isSelected ? 'primary' : 'secondary'}
+    disabled={disabled}
+    Icon={getIcon(variant, value, isSelected)}
+    onPress={() => onChange(value)}
+    style={{ root: wrapperStyle }}
+    variant={getVariant(variant, isSelected)}
+  >
+    {RATING_VARIANTS.TEXT === variant ? name : null}
+  </UTButton>
+);
+
+Option.propTypes = {
+  disabled: bool,
+  isSelected: bool,
+  name: string,
+  onChange: func,
+  value: string,
+  variant: string,
+  wrapperStyle: object
+};
+
+export default Option;

package/lib/components/UTRating/components/Option/utils.js

@@ -0,0 +1,17 @@
+import { RATING_VARIANTS } from '../../constants';
+
+export const getIcon = (variant, value, isSelected) =>
+  ({
+    [RATING_VARIANTS.TEXT]: null,
+    [RATING_VARIANTS.FACES]: {
+      1: 'IconMoodSad',
+      2: 'IconMoodConfuzed',
+      3: 'IconMoodEmpty',
+      4: 'IconMoodSmile',
+      5: 'IconMoodHappy'
+    }[value],
+    [RATING_VARIANTS.STAR]: isSelected ? 'IconStarFilled' : 'IconStar'
+  })[variant];
+
+export const getVariant = (variant, isSelected) =>
+  !isSelected || variant === RATING_VARIANTS.STAR ? 'shadow' : 'outlined';

package/lib/components/UTRating/constants.js

@@ -0,0 +1,5 @@
+export const RATING_VARIANTS = {
+  FACES: 'faces',
+  STAR: 'star',
+  TEXT: 'text'
+};

package/lib/components/UTRating/index.js

@@ -0,0 +1,101 @@
+import { func, string, bool, object, array } from 'prop-types';
+import { View } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { formatErrorToValidation } from '../UTValidation/utils';
+import { withTheme } from '../../theming';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+
+import { RATING_VARIANTS } from './constants';
+import Option from './components/Option';
+import styles from './styles';
+
+const UTRating = ({
+  classNames = {},
+  dataTestId,
+  disabled,
+  error,
+  helpTextEnd,
+  helpTextStart,
+  onChange,
+  options = [],
+  required,
+  theme,
+  title,
+  validations,
+  value,
+  variant = RATING_VARIANTS.STAR
+}) => {
+  const validationData = useMemo(
+    () => validations || (error && formatErrorToValidation(error)),
+    [error, validations]
+  );
+
+  const valueIndex = options.map(({ value: optionValue }) => optionValue).indexOf(value);
+  const isSelected = index =>
+    valueIndex !== -1 && variant === RATING_VARIANTS.STAR ? index <= valueIndex : index === valueIndex;
+
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const onLayout = useCallback(event => {
+    const { width } = event.nativeEvent.layout;
+    setContainerWidth(width);
+  }, []);
+
+  return (
+    <View style={[styles.container, classNames.container]} data-testid={dataTestId}>
+      {title && (
+        <UTFieldLabel colorTheme="dark" required={required}>
+          {title}
+        </UTFieldLabel>
+      )}
+      <View style={styles.optionsContainer} onLayout={onLayout}>
+        {options.map((option, index) => (
+          <Option
+            {...option}
+            disabled={disabled}
+            error={error}
+            isSelected={isSelected(index)}
+            key={option.value}
+            onChange={onChange}
+            variant={variant}
+            wrapperStyle={styles.option(containerWidth, error, options, theme)}
+          />
+        ))}
+      </View>
+      {helpTextStart && (
+        <View style={styles.helpTextContainer}>
+          <UTLabel colorTheme="gray" variant="small">
+            {helpTextStart}
+          </UTLabel>
+          {helpTextEnd && (
+            <UTLabel colorTheme="gray" variant="small">
+              {helpTextEnd}
+            </UTLabel>
+          )}
+        </View>
+      )}
+      {validationData && <UTValidation validationData={validationData} />}
+    </View>
+  );
+};
+
+UTRating.propTypes = {
+  classNames: object,
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  helpTextEnd: string,
+  helpTextStart: string,
+  onChange: func,
+  options: array,
+  required: bool,
+  title: string,
+  validations: array,
+  value: string,
+  variant: string
+};
+
+export default withTheme(UTRating);

package/lib/components/UTRating/styles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    width: '100%'
+  },
+  optionsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+    justifyContent: 'center',
+    width: '100%'
+  },
+  helpTextContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  option: (containerWidth, error, options, theme) => {
+    const topItems = Math.ceil(options.length / 2);
+    const breakOptions = options.length > 5;
+    return {
+      alignContent: 'center',
+      display: 'flex',
+      flexBasis: breakOptions ? (containerWidth - (topItems - 1) * 4) / topItems : 0,
+      flexDirection: 'row',
+      flexGrow: breakOptions ? 0 : 1,
+      flexShrink: 0,
+      height: 48,
+      justifyContent: 'center',
+      ...(error ? { borderColor: theme.Palette.error['05'], borderWidth: 2 } : {})
+    };
+  }
+});

package/lib/index.js

@@ -57,6 +57,7 @@ export { default as UTPasswordField } from './components/UTPasswordField';
 export { default as UTPhoneInput } from './components/UTPhoneInput';
 export { default as UTProductItem } from './components/UTProductItem';
 export { default as UTProgressBar } from './components/UTProgressBar';
+export { default as UTRating } from './components/UTRating';
 export { default as UTRoundView } from './components/UTRoundView';
 export { default as UTSearchField } from './components/UTSearchField';
 export { default as UTSelect } from './components/UTSelect';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.31.2",
+  "version": "1.31.3",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [