@widergy/mobile-ui 1.31.1 → 1.31.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* [EVE-4331] UTStatusMessage ([#383](https://github.com/widergy/mobile-ui/issues/383)) ([8e35027](https://github.com/widergy/mobile-ui/commit/8e350272bb402c2a80ed649a66d6654c52dc35d8))
+
 ## [1.31.1](https://github.com/widergy/mobile-ui/compare/v1.31.0...v1.31.1) (2024-11-04)
 
 

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/UTStatusMessage/README.md

@@ -0,0 +1,46 @@
+# UTStatusMessage
+
+The purpose of this component, as its name indicates, is to communicate a message about the status of the view or component in which it is contextually situated.
+
+## Props
+
+| Name                  | Type      | Default | Description                                                                                               |
+| --------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| children              | element   |         | The content to be rendered inside the component.                                                          |
+| style                 | object    |         | Custom styles for styling the component.                                                             |
+| colorTheme            | string    | default | Defines the color theme for the component.                                                                |
+| description           | string    |         | Description text providing additional context or information.                                             |
+| descriptionProps      | object    |         | Props to be applied to the description UTLabel.                                                           |
+| helpText              | string    |         | Help text displayed to guide the user.                                                                    |
+| helpTextProps         | object    |         | Props to be applied to the help text UTLabel.                                                             |
+| icon                  | string    |         | Icon to be displayed in the header.                                                                       |
+| iconProps             | object    |         | Props to be applied to the UTIcon                                                                          |
+| image                 | string    |         | URL of an image to be displayed in the header, replacing the icon.                                        |
+| loading               | bool      | false   | Indicates whether the component is in a loading state. Replaces the header.                               |
+| primaryAction         | func      |         | Callback function for the primary action.                                                                 |
+| primaryActionProps    | object    |         | Props to be applied to the primary action UTButton.                                                       |
+| primaryActionText     | string    |         | Text for the primary action UTButton.                                                                     |
+| secondaryAction       | func      |         | Callback function for the secondary action.                                                               |
+| secondaryActionProps  | object    |         | Props to be applied to the secondary action UTButton.                                                     |
+| secondaryActionText   | string    |         | Text for the secondary action UTButton.                                                                   |
+| showHeader            | bool      | true    | Indicates whether to display the header section of the component.                                         |
+| title                 | string    |         | Title for the component, providing context to the user.                                                   |
+| titleProps            | object    |         | Props to be applied to the title  UTLabel.                                                                |
+
+### colorTheme
+
+The value of `colorTheme` must be one of the following:
+
+- `accent`
+- `default`
+- `error`
+- `gradient`
+- `gray`
+- `identity1`
+- `identity2`
+- `identity3`
+- `identity4`
+- `info`
+- `negative`
+- `success`
+- `warning`

package/lib/components/UTStatusMessage/constants.js

@@ -0,0 +1,31 @@
+export const COLOR_THEMES = {
+  ACCENT: 'accent',
+  DEFAULT: 'default',
+  ERROR: 'error',
+  GRADIENT: 'gradient',
+  GRAY: 'gray',
+  IDENTITY_1: 'identity1',
+  IDENTITY_2: 'identity2',
+  IDENTITY_3: 'identity3',
+  IDENTITY_4: 'identity4',
+  INFO: 'info',
+  NEGATIVE: 'negative',
+  SUCCESS: 'success',
+  WARNING: 'warning'
+};
+
+export const ICON_COLOR_THEMES = {
+  [COLOR_THEMES.ACCENT]: 'accent',
+  [COLOR_THEMES.DEFAULT]: 'dark',
+  [COLOR_THEMES.ERROR]: 'error',
+  [COLOR_THEMES.GRADIENT]: 'light',
+  [COLOR_THEMES.GRAY]: 'gray',
+  [COLOR_THEMES.IDENTITY_1]: 'light',
+  [COLOR_THEMES.IDENTITY_2]: 'light',
+  [COLOR_THEMES.IDENTITY_3]: 'light',
+  [COLOR_THEMES.IDENTITY_4]: 'light',
+  [COLOR_THEMES.INFO]: 'information',
+  [COLOR_THEMES.NEGATIVE]: 'dark',
+  [COLOR_THEMES.SUCCESS]: 'success',
+  [COLOR_THEMES.WARNING]: 'warning'
+};

package/lib/components/UTStatusMessage/index.js

@@ -0,0 +1,133 @@
+import { bool, element, func, object, string } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+import { LinearGradient } from 'react-native-linear-gradient';
+
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import UTLoading from '../UTLoading';
+import UTImage from '../UTImage';
+import { withTheme } from '../../theming';
+
+import { ICON_COLOR_THEMES, COLOR_THEMES } from './constants';
+import ownStyles from './styles';
+
+const UTStatusMessage = ({
+  children,
+  colorTheme = COLOR_THEMES.DEFAULT,
+  description,
+  descriptionProps,
+  helpText,
+  helpTextProps,
+  icon = 'IconInfoCircle',
+  iconProps = {},
+  image,
+  loading,
+  primaryAction,
+  primaryActionProps,
+  primaryActionText,
+  secondaryAction,
+  secondaryActionProps,
+  secondaryActionText,
+  showBanner = true,
+  showHeader = true,
+  style = {},
+  theme,
+  title,
+  titleProps
+}) => {
+  const Banner = colorTheme === COLOR_THEMES.GRADIENT && showBanner ? LinearGradient : View;
+  const IconContainer = colorTheme === COLOR_THEMES.GRADIENT && !showBanner ? LinearGradient : View;
+  return (
+    <View style={[ownStyles.container, style.container]}>
+      {loading ? (
+        <UTLoading loading text={null} />
+      ) : showHeader ? (
+        <Banner
+          angle={45}
+          colors={[theme.Palette?.identityGradient?.['01'], theme.Palette?.identityGradient?.['02']]}
+          end={{ x: 1, y: 0.5 }}
+          start={{ x: 0, y: 0.5 }}
+          style={[ownStyles.banner(theme, colorTheme, showBanner), style.banner]}
+          useAngle
+        >
+          {image ? (
+            <UTImage source={image} style={{ ...style.image }} />
+          ) : (
+            <IconContainer
+              angle={45}
+              colors={[theme.Palette?.identityGradient?.['01'], theme.Palette?.identityGradient?.['02']]}
+              end={{ x: 1, y: 0.5 }}
+              start={{ x: 0, y: 0.5 }}
+              style={ownStyles.iconContainer(theme, colorTheme)}
+              useAngle
+            >
+              <UTIcon colorTheme={ICON_COLOR_THEMES[colorTheme]} name={icon} {...iconProps} />
+            </IconContainer>
+          )}
+        </Banner>
+      ) : null}
+      {(title || description || helpText) && (
+        <View style={ownStyles.section}>
+          {title && (
+            <UTLabel style={ownStyles.label} variant="title3" weight="medium" {...titleProps}>
+              {title}
+            </UTLabel>
+          )}
+          {description && (
+            <UTLabel style={ownStyles.label} colorTheme="gray" variant="body" {...descriptionProps}>
+              {description}
+            </UTLabel>
+          )}
+          {helpText && (
+            <UTLabel style={ownStyles.label} colorTheme="gray" variant="small" {...helpTextProps}>
+              {helpText}
+            </UTLabel>
+          )}
+        </View>
+      )}
+      {children}
+      {(primaryAction || secondaryAction) && (
+        <View style={ownStyles.section}>
+          {primaryAction && (
+            <UTButton onClick={primaryAction} {...primaryActionProps}>
+              {primaryActionText}
+            </UTButton>
+          )}
+          {secondaryAction && (
+            <UTButton onClick={secondaryAction} variant="text" {...secondaryActionProps}>
+              {secondaryActionText}
+            </UTButton>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+UTStatusMessage.propTypes = {
+  children: element,
+  colorTheme: string,
+  description: string,
+  descriptionProps: object,
+  helpText: string,
+  helpTextProps: object,
+  icon: string,
+  iconProps: object,
+  image: string,
+  loading: bool,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  showBanner: bool,
+  showHeader: bool,
+  style: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTStatusMessage);

package/lib/components/UTStatusMessage/styles.js

@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+
+import { COLOR_THEMES } from './constants';
+
+const getIconBackgroundColor = (colorTheme, theme) =>
+  ({
+    [COLOR_THEMES.ACCENT]: theme.Palette?.accent['01'],
+    [COLOR_THEMES.DEFAULT]: theme.Palette?.light['03'],
+    [COLOR_THEMES.ERROR]: theme.Palette?.error['01'],
+    [COLOR_THEMES.GRADIENT]: 'light',
+    [COLOR_THEMES.GRAY]: theme.Palette?.light['03'],
+    [COLOR_THEMES.IDENTITY_1]: theme.Palette?.identitySolid?.['01'],
+    [COLOR_THEMES.IDENTITY_2]: theme.Palette?.identitySolid?.['02'],
+    [COLOR_THEMES.IDENTITY_3]: theme.Palette?.identitySolid?.['03'],
+    [COLOR_THEMES.IDENTITY_4]: theme.Palette?.identitySolid?.['04'],
+    [COLOR_THEMES.INFO]: theme.Palette?.information['01'],
+    [COLOR_THEMES.NEGATIVE]: theme.Palette?.light['01'],
+    [COLOR_THEMES.SUCCESS]: theme.Palette?.success['01'],
+    [COLOR_THEMES.WARNING]: theme.Palette?.warning['01']
+  })[colorTheme];
+
+const getBannerBackgroundColor = (colorTheme, theme) =>
+  ({
+    [COLOR_THEMES.ACCENT]: theme.Palette?.accent['03'],
+    [COLOR_THEMES.DEFAULT]: theme.Palette?.gray['05'],
+    [COLOR_THEMES.ERROR]: theme.Palette?.error['03'],
+    [COLOR_THEMES.GRADIENT]: null,
+    [COLOR_THEMES.GRAY]: theme.Palette?.gray['03'],
+    [COLOR_THEMES.IDENTITY_1]: theme.Palette?.identitySolid?.['01'],
+    [COLOR_THEMES.IDENTITY_2]: theme.Palette?.identitySolid?.['02'],
+    [COLOR_THEMES.IDENTITY_3]: theme.Palette?.identitySolid?.['03'],
+    [COLOR_THEMES.IDENTITY_4]: theme.Palette?.identitySolid?.['04'],
+    [COLOR_THEMES.INFO]: theme.Palette?.information['03'],
+    [COLOR_THEMES.NEGATIVE]: theme.Palette?.light['01'],
+    [COLOR_THEMES.SUCCESS]: theme.Palette?.success['03'],
+    [COLOR_THEMES.WARNING]: theme.Palette?.warning['03']
+  })[colorTheme];
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 24,
+    width: '100%'
+  },
+  section: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8
+  },
+  iconContainer: (theme, colorTheme) => ({
+    alignItems: 'center',
+    backgroundColor: getIconBackgroundColor(colorTheme, theme),
+    borderRadius: 100,
+    display: 'flex',
+    height: 56,
+    justifyContent: 'center',
+    width: 56
+  }),
+  banner: (theme, colorTheme, showBanner) => ({
+    alignItems: 'center',
+    backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 12,
+    width: '100%'
+  })
+});

package/lib/index.js

@@ -38,6 +38,7 @@ export { default as TransitionView } from './components/TransitionView';
 export { default as UTActionCard } from './components/UTActionCard';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTBadge } from './components/UTBadge';
+export { default as UTBanner } from './components/UTBanner';
 export { default as UTBottomSheet } from './components/UTBottomSheet';
 export { default as UTButton } from './components/UTButton';
 export { default as UTButtonGroup } from './components/UTButtonGroup';
@@ -56,10 +57,12 @@ 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';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTSwitch } from './components/UTSwitch';
 export { default as UTTextArea } from './components/UTTextArea';
@@ -68,7 +71,6 @@ export { default as UTTooltip } from './components/UTTooltip';
 export { default as UTTracker } from './components/UTTracker';
 export { default as UTValidation } from './components/UTValidation';
 export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
-export { default as UTBanner } from './components/UTBanner';
 
 // Theming
 export * from './theming';

package/lib/theming/DefaultTheme.js

@@ -216,6 +216,17 @@ const DefaultTheme = {
       '03': colors.actionNegative03,
       '04': colors.actionNegative04,
       '05': colors.actionNegative05
+    },
+    identitySolid: {
+      '01': '#5E3BEB',
+      '02': '#20BBFC',
+      '03': '#25E0A6',
+      '04': '#A9FA5C',
+      '05': '#285AFF'
+    },
+    identityGradient: {
+      '01': '#25E0A6',
+      '02': '#20BBFC'
     }
   }
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.31.1",
+  "version": "1.31.3",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -29,6 +29,7 @@
     "react-native": "*",
     "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.0",
     "react-native-svg": "^13.0.0",
     "react-native-vector-icons": "^10.0.0"
@@ -43,11 +44,12 @@
     "numeral": "^2.0.6",
     "pdf-lib": "^1.17.1",
     "react-native-collapsible": "^1.6.1",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
     "react-native-pager-view": "^6.2.1",
-    "react-native-svg": "^13.13.0",
-    "react-native-safe-area-context": "^4.5.0"
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-svg": "^13.13.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",