@widergy/mobile-ui 1.31.2 → 1.32.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.32.0](https://github.com/widergy/mobile-ui/compare/v1.31.3...v1.32.0) (2024-11-06)
+
+
+### Features
+
+* [UGC-924] animations ut tracker ([#386](https://github.com/widergy/mobile-ui/issues/386)) ([8032b66](https://github.com/widergy/mobile-ui/commit/8032b66d2c3712672cc7bd5391f4aac81a9a3aca))
+
+## [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/components/UTTracker/components/Step/components/BarMask/index.js

@@ -0,0 +1,54 @@
+import { bool, number, string } from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+
+import { useTheme } from '../../../../../../theming';
+import { mergeMultipleStyles } from '../../../../../../utils/styleUtils';
+import { BAR_HEIGHT_DELAY, BAR_HEIGHT_DURATION } from '../../constants';
+
+import styles, { getVariantStyles } from './styles';
+
+const BarMask = ({ stepCompleted, height, variant }) => {
+  const theme = useTheme();
+  const ownStyles = mergeMultipleStyles(styles, getVariantStyles(theme)[variant]);
+
+  const heightAnim = useRef(new Animated.Value(0)).current;
+  const [inverted, setInverted] = useState(false);
+
+  const animateCompleted = () => {
+    Animated.sequence([
+      Animated.delay(BAR_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: height,
+        duration: BAR_HEIGHT_DURATION / 2,
+        useNativeDriver: false
+      }),
+      Animated.timing(heightAnim, {
+        toValue: 0,
+        duration: BAR_HEIGHT_DURATION / 2,
+        useNativeDriver: false
+      })
+    ]).start();
+    setTimeout(() => setInverted(true), BAR_HEIGHT_DELAY + BAR_HEIGHT_DURATION / 2);
+  };
+
+  useEffect(() => {
+    if (stepCompleted) animateCompleted();
+    else setInverted(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  return (
+    <View style={ownStyles.container(height)}>
+      <Animated.View style={[ownStyles.barMask, inverted && ownStyles.inverted, { height: heightAnim }]} />
+    </View>
+  );
+};
+
+BarMask.propTypes = {
+  stepCompleted: bool,
+  height: number,
+  variant: string
+};
+
+export default BarMask;

package/lib/components/UTTracker/components/Step/components/BarMask/styles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../../../styles';
+import { ERROR, STANDARD } from '../../../../constants';
+
+export default StyleSheet.create({
+  container: height => ({
+    height,
+    width: OVAL_SIZE,
+    top: 20,
+    position: 'absolute',
+    flex: 1,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    zIndex: 10
+  }),
+  barMask: {
+    width: 2,
+    alignSelf: 'flex-start'
+  },
+  inverted: { alignSelf: 'flex-end' }
+});
+
+export const getVariantStyles = theme => ({
+  [ERROR]: {
+    barMask: { backgroundColor: theme.Palette.error['04'] }
+  },
+  [STANDARD]: {
+    barMask: { backgroundColor: theme.Palette.accent['04'] }
+  }
+});

package/lib/components/UTTracker/components/Step/components/StepMask/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated } from 'react-native';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { bool, string } from 'prop-types';
+
+import { mergeMultipleStyles } from '../../../../../../utils/styleUtils';
+import { useTheme } from '../../../../../../theming';
+import {
+  ACTIVE_STEP_HEIGHT_DELAY,
+  ACTIVE_STEP_HEIGHT_DURATION,
+  COMPLETED_STEP_HEIGHT_DELAY,
+  COMPLETED_STEP_HEIGHT_DURATION
+} from '../../constants';
+
+import styles, { getVariantStyles, MASK_SIZE } from './styles';
+
+const StepMask = ({ stepCompleted, stepActive, variant }) => {
+  const theme = useTheme();
+  const ownStyles = mergeMultipleStyles(styles, getVariantStyles(theme)[variant]);
+
+  const heightAnim = useRef(new Animated.Value(MASK_SIZE)).current;
+
+  const handleCompleted = () => {
+    heightAnim.setValue(MASK_SIZE);
+    Animated.sequence([
+      Animated.delay(COMPLETED_STEP_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: 0,
+        duration: COMPLETED_STEP_HEIGHT_DURATION,
+        useNativeDriver: false
+      })
+    ]).start();
+  };
+
+  const handleActive = () => {
+    heightAnim.setValue(0);
+    Animated.sequence([
+      Animated.delay(ACTIVE_STEP_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: MASK_SIZE,
+        duration: ACTIVE_STEP_HEIGHT_DURATION,
+        useNativeDriver: false
+      })
+    ]).start();
+  };
+
+  useEffect(() => {
+    if (stepCompleted) handleCompleted();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  useEffect(() => {
+    if (stepActive) handleActive();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepActive]);
+
+  return (
+    <View style={ownStyles.container}>
+      <MaskedView
+        style={ownStyles.maskContainer}
+        maskElement={
+          <View style={ownStyles.mask}>
+            <View style={ownStyles.maskElement} />
+          </View>
+        }
+      >
+        {/* Shows behind the mask */}
+        {(stepCompleted || stepActive) && (
+          <Animated.View
+            style={[ownStyles.maskBackground, stepActive && ownStyles.maskActive, { height: heightAnim }]}
+          />
+        )}
+      </MaskedView>
+    </View>
+  );
+};
+
+StepMask.propTypes = {
+  stepCompleted: bool,
+  stepActive: bool,
+  variant: string
+};
+
+export default StepMask;

package/lib/components/UTTracker/components/Step/components/StepMask/styles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+import { ERROR, STANDARD } from '../../../../constants';
+
+export const MASK_SIZE = 20;
+
+export default StyleSheet.create({
+  container: {
+    height: MASK_SIZE,
+    width: MASK_SIZE,
+    position: 'absolute',
+    zIndex: 1
+  },
+  mask: {
+    // Transparent background because mask is based off alpha channel.
+    backgroundColor: 'transparent',
+    flex: 1
+  },
+  maskElement: {
+    height: MASK_SIZE,
+    width: MASK_SIZE,
+    borderColor: 'black',
+    borderWidth: 2,
+    borderRadius: MASK_SIZE / 2
+  },
+  maskBackground: { flex: 1, alignSelf: 'flex-end' },
+  maskContainer: { flex: 1, flexDirection: 'row', height: '100%' },
+  maskActive: { alignSelf: 'flex-start' }
+});
+
+export const getVariantStyles = theme => ({
+  [ERROR]: {
+    maskBackground: { backgroundColor: theme.Palette.error['04'] }
+  },
+  [STANDARD]: {
+    maskBackground: { backgroundColor: theme.Palette.accent['04'] }
+  }
+});

package/lib/components/UTTracker/components/Step/constants.js

@@ -0,0 +1,10 @@
+export const COMPLETED_STEP_OPACITY_DURATION = 300;
+export const COMPLETED_STEP_HEIGHT_DELAY = 800;
+export const COMPLETED_STEP_HEIGHT_DURATION = 300;
+
+export const ACTIVE_STEP_DELAY = 1800;
+export const ACTIVE_STEP_HEIGHT_DELAY = 1100;
+export const ACTIVE_STEP_HEIGHT_DURATION = 300;
+
+export const BAR_HEIGHT_DELAY = 800;
+export const BAR_HEIGHT_DURATION = 600;

package/lib/components/UTTracker/components/Step/index.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
-import { bool, func, number } from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Animated } from 'react-native';
+import { array, bool, func, number } from 'prop-types';
 import merge from 'lodash/merge';
 
 import { StepPropTypes, VariantPropTypes } from '../../propTypes';
@@ -8,12 +8,26 @@ import UTIcon from '../../../UTIcon';
 import UTLabel from '../../../UTLabel';
 import { ERROR } from '../../constants';
 import { useTheme } from '../../../../theming';
+import { OVAL_SIZE } from '../../styles';
 
 import { getVariantStyles, getStepStyles } from './styles';
+import StepMask from './components/StepMask';
+import BarMask from './components/BarMask';
+import { ACTIVE_STEP_DELAY, COMPLETED_STEP_OPACITY_DURATION } from './constants';
 
 const ERROR_ICON_SIZE = 16;
 
-const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, style = {}, variant }) => {
+const Step = ({
+  first,
+  index,
+  isActive,
+  isCompleted,
+  stepsPositions,
+  setStepsPositions,
+  step,
+  style = {},
+  variant
+}) => {
   const stepCompleted = isCompleted(step.id);
   const stepActive = isActive(step.id);
 
@@ -23,6 +37,25 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
   const [stepIconOffset, setStepIconOffset] = useState(0);
   const [currentPosition, setCurrentPosition] = useState(0);
 
+  const opacityAnim = useRef(new Animated.Value(1)).current;
+  const animateCompleted = () => {
+    Animated.timing(opacityAnim, {
+      toValue: 0.5,
+      duration: COMPLETED_STEP_OPACITY_DURATION,
+      useNativeDriver: true
+    }).start();
+  };
+
+  const [delayedStepActive, setDelayedStepActive] = useState(false);
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (stepActive) {
+      const timer = setTimeout(() => setDelayedStepActive(true), index === 0 ? 0 : ACTIVE_STEP_DELAY);
+      return () => clearTimeout(timer);
+    }
+    setDelayedStepActive(false);
+  }, [index, stepActive]);
+
   useEffect(() => {
     setStepsPositions(prev => {
       const newPrev = [...prev];
@@ -31,43 +64,54 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
     });
   }, [stepIconOffset, currentPosition, setCurrentPosition, index, setStepsPositions]);
 
+  useEffect(() => {
+    if (stepCompleted) animateCompleted();
+    else opacityAnim.setValue(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  const barHeight = Math.max((stepsPositions[index + 1] ?? 0) - (stepsPositions[index] ?? 0) - OVAL_SIZE, 24);
+
   return (
     <View
       onLayout={e => setCurrentPosition(e.nativeEvent.layout.y)}
       style={[
         themedStyles.outerContainer,
         stepCompleted && themedStyles.completedOuterContainer,
-        stepActive && themedStyles.activeOuterContainer,
+        delayedStepActive && themedStyles.activeOuterContainer,
         !first && ownStyles.stepMargin
       ]}
     >
-      <View
+      <StepMask stepCompleted={stepCompleted} stepActive={stepActive} variant={variant} />
+      <BarMask stepCompleted={stepCompleted} height={barHeight} variant={variant} />
+      <Animated.View
         onLayout={e => setStepIconOffset(e.nativeEvent.layout.y)}
         style={[
           themedStyles.container,
           stepCompleted && themedStyles.completedContainer,
-          stepActive && themedStyles.activeContainer
+          { opacity: opacityAnim },
+          delayedStepActive && themedStyles.activeContainer
         ]}
       >
         <View
           style={[
             themedStyles.innerContainer,
             stepCompleted && themedStyles.completedInnerContainer,
-            stepActive && themedStyles.activeInnerContainer
+            delayedStepActive && themedStyles.activeInnerContainer
           ]}
         >
-          {stepActive && variant === ERROR && (
+          {delayedStepActive && variant === ERROR && (
             <UTIcon name="IconX" colorTheme="negative" size={ERROR_ICON_SIZE} style={themedStyles.icon} />
           )}
         </View>
-      </View>
-      <View style={themedStyles.textContainer}>
+      </Animated.View>
+      <Animated.View style={[themedStyles.textContainer, { opacity: opacityAnim }]}>
         {step.title && (
           <UTLabel
             variant="small"
             weight="medium"
             colorTheme={
-              stepCompleted ? 'gray' : stepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
+              stepCompleted ? 'gray' : delayedStepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
             }
           >
             {step.title}
@@ -80,7 +124,7 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
             </UTLabel>
           </View>
         )}
-      </View>
+      </Animated.View>
     </View>
   );
 };
@@ -91,6 +135,7 @@ Step.propTypes = {
   isActive: func,
   isCompleted: func,
   setStepsPositions: func,
+  stepsPositions: array,
   step: StepPropTypes,
   variant: VariantPropTypes
 };

package/lib/components/UTTracker/components/Step/styles.js

@@ -17,9 +17,6 @@ export const getVariantStyles = theme => ({
     },
     completedInnerContainer: {
       backgroundColor: theme.Palette.error['04']
-    },
-    completedOuterContainer: {
-      opacity: 0.5
     }
   },
   [STANDARD]: {
@@ -34,9 +31,6 @@ export const getVariantStyles = theme => ({
     },
     completedInnerContainer: {
       backgroundColor: theme.Palette.accent['04']
-    },
-    completedOuterContainer: {
-      opacity: 0.5
     }
   }
 });

package/lib/components/UTTracker/index.js

@@ -84,6 +84,7 @@ const UTTracker = ({
                     index,
                     isActive,
                     isCompleted,
+                    stepsPositions,
                     setStepsPositions,
                     step,
                     variant

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.32.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -35,6 +35,7 @@
     "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-navigation/native": "^6.1.9",
     "@tabler/icons-react-native": "^3.3.0",
     "@widergy/web-utils": "^2.0.0",