@widergy/mobile-ui 1.45.1 → 1.46.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.46.0](https://github.com/widergy/mobile-ui/compare/v1.45.1...v1.46.0) (2025-05-16)
+
+
+### Features
+
+* [UGEE-273] wizard component ([#431](https://github.com/widergy/mobile-ui/issues/431)) ([3883133](https://github.com/widergy/mobile-ui/commit/38831333979cd365cc0082feac2910f6b3db9651))
+
 ## [1.45.1](https://github.com/widergy/mobile-ui/compare/v1.45.0...v1.45.1) (2025-05-14)
 
 

package/lib/components/UTWizard/README.md

@@ -0,0 +1,48 @@
+# UTWizard
+
+Wizard component. Only into the UTWorkflowContainer.
+
+## Props
+Here's a new table for the additional props:
+
+| Name       | Type     | Default   | Description                                               |
+|------------|---------|------------|-----------------------------------------------------------|
+| colorTheme | string  | `dark`     | Defines the color theme for the main component.           |
+| variant    | string  |            | From it, the themes of the components are defined.        |
+| theme      |viewStyle|            | Component theme                                           |
+| steps      | array   |            | array of steps                                            |
+| images     | array   |            | Array of images to be displayed within each step.         |
+|workflowVersion|string|     `V0`   | workflow version to know about component bottom.          |
+
+
+### colorTheme
+
+The value of `colorTheme` must be one of the following:
+
+- `accent`
+- `negative`
+- `neutral`
+- `dark`
+
+### variant
+
+The value of `variant` must be one of the following:
+
+- `dark`
+- `information`
+- `light`
+
+### steps
+
+`steps` is an array of object, each object have:
+
+- `title`: wizard title
+- `subtitle`: wizard subtitle
+
+### images
+
+`images` is an array of images with the same order as the steps,
+  to place the correct image at the correct step
+
+### workflowVersion
+`workflowVersion` is a string to know the bottom of the component

package/lib/components/UTWizard/constants.js

@@ -0,0 +1,22 @@
+export const VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+
+export const DEFAULT_PROPS = {
+  variant: 'dark'
+};
+
+export const ACTIONS = {
+  NEXT: 'next',
+  PREVIOUS: 'previous',
+  RESET: 'reset'
+};
+
+export const COLOR_THEMES = {
+  ACCENT: 'accent',
+  NEGATIVE: 'negative',
+  NEUTRAL: 'neutral',
+  DARK: 'dark'
+};

package/lib/components/UTWizard/index.js

@@ -0,0 +1,136 @@
+import React, { useState, useReducer, useEffect } from 'react';
+import { View } from 'react-native';
+import PropTypes, { string, number, objectOf, arrayOf, shape } from 'prop-types';
+
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+import { withTheme } from '../../theming';
+import UTImage from '../UTImage';
+
+import { getLabelTheme, getButtonTheme, getButtonMinimizedTheme } from './utils';
+import { ACTIONS, COLOR_THEMES } from './constants';
+import stylesheet from './styles';
+
+const UTWizard = ({
+  images,
+  steps,
+  variant,
+  theme,
+  colorTheme = COLOR_THEMES.DARK,
+  workflowVersion = 'V0'
+}) => {
+  const hasSteps = steps.length > 1;
+  const [isOpen, setIsOpen] = useState(true);
+  const [isClosed, setIsClosed] = useState(false);
+
+  const [currentSubstep, updateSubstep] = useReducer((state, action) => {
+    switch (action) {
+      case ACTIONS.RESET:
+        return 0;
+      case ACTIONS.PREVIOUS:
+        return state - 1;
+      case ACTIONS.NEXT:
+        return state + 1;
+      default:
+        return state;
+    }
+  }, 0);
+  const { title, description } = steps[currentSubstep] || {};
+  useEffect(() => {
+    updateSubstep(ACTIONS.RESET);
+  }, [isOpen]);
+  const styles = stylesheet({ ...theme, workflowVersion });
+
+  return (
+    !isClosed &&
+    (isOpen ? (
+      <View style={styles.container(colorTheme)}>
+        <View style={styles.titleContainer}>
+          <UTLabel style={styles.grow} colorTheme={getButtonTheme(variant)} weight="medium" withMarkdown>
+            {title}
+          </UTLabel>
+          <View style={styles.buttons}>
+            <UTButton
+              colorTheme={getButtonTheme(variant)}
+              Icon="IconChevronDown"
+              onPress={() => setIsOpen(false)}
+              size="small"
+              variant="text"
+            />
+            <UTButton
+              colorTheme={getButtonTheme(variant)}
+              Icon="IconX"
+              onPress={setIsClosed}
+              size="small"
+              variant="text"
+            />
+          </View>
+        </View>
+        <View style={styles.content}>
+          <UTLabel variant="small" colorTheme={getLabelTheme(variant)} withMarkdown>
+            {description}
+          </UTLabel>
+        </View>
+        <UTImage source={images[currentSubstep]} style={styles.image} />
+        {hasSteps && (
+          <View style={styles.footer}>
+            <View style={styles.page}>
+              <UTLabel colorTheme={getLabelTheme(variant)} variant="small" withMarkdown>
+                {`${currentSubstep + 1} de ${steps.length}`}
+              </UTLabel>
+            </View>
+            <View style={styles.buttons}>
+              {currentSubstep > 0 && (
+                <UTButton
+                  colorTheme={getButtonTheme(variant)}
+                  onPress={() => updateSubstep(ACTIONS.PREVIOUS)}
+                  size="small"
+                  variant="text"
+                  weight="medium"
+                >
+                  Atras
+                </UTButton>
+              )}
+              {currentSubstep < steps.length - 1 && (
+                <UTButton
+                  colorTheme={getButtonTheme(variant)}
+                  onPress={() => updateSubstep(ACTIONS.NEXT)}
+                  size="small"
+                  variant="filled"
+                  weight="medium"
+                >
+                  Siguiente
+                </UTButton>
+              )}
+            </View>
+          </View>
+        )}
+      </View>
+    ) : (
+      <View style={styles.notOpen}>
+        <UTButton
+          style={styles.button}
+          onPress={() => setIsOpen(true)}
+          colorTheme={getButtonMinimizedTheme(variant)}
+          Icon="IconQuestionMark"
+        />
+      </View>
+    ))
+  );
+};
+
+UTWizard.propTypes = {
+  images: objectOf(number),
+  steps: arrayOf(
+    shape({
+      title: string,
+      description: string
+    })
+  ),
+  variant: string,
+  theme: PropTypes.object,
+  colorTheme: string,
+  workflowVersion: string
+};
+
+export default withTheme(UTWizard);

package/lib/components/UTWizard/styles.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+
+import { IS_ANDROID } from '../../utils/platformUtils/constants';
+
+import { COLOR_THEMES } from './constants';
+
+export default ({ Palette: { accent, neutral, negative, dark }, workflowVersion }) =>
+  StyleSheet.create({
+    container: colorTheme => ({
+      borderRadius: 4,
+      backgroundColor: {
+        [COLOR_THEMES.ACCENT]: accent['01'],
+        [COLOR_THEMES.NEUTRAL]: neutral['01'],
+        [COLOR_THEMES.NEGATIVE]: negative['01'],
+        [COLOR_THEMES.DARK]: dark['04']
+      }[colorTheme],
+      bottom: workflowVersion === 'V1' ? (IS_ANDROID ? 72 : 126) : 16,
+      display: 'flex',
+      width: 296,
+      padding: 16,
+      position: 'absolute',
+      right: 16
+    }),
+    grow: {
+      flexShrink: 1,
+      flexGrow: 1,
+      marginRight: 8
+    },
+    titleContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    },
+    buttons: {
+      flexDirection: 'row'
+    },
+
+    content: {
+      marginBottom: 8
+    },
+    image: {
+      borderRadius: 4,
+      width: 264,
+      height: 180
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: 8,
+      alignItems: 'flex-end'
+    },
+    page: {
+      alignItems: 'center'
+    },
+    notOpen: {
+      bottom: workflowVersion === 'V1' ? (IS_ANDROID ? 64 : 126) : 16,
+      height: 'auto',
+      padding: 16,
+      position: 'absolute',
+      right: 16
+    },
+    button: {
+      borderRadius: 100
+    }
+  });

package/lib/components/UTWizard/utils.js

@@ -0,0 +1,24 @@
+import { DEFAULT_PROPS, VARIANTS } from './constants';
+
+export const getVariant = variant => VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant];
+
+export const getLabelTheme = variant =>
+  ({
+    [VARIANTS.dark]: 'light',
+    [VARIANTS.information]: 'light',
+    [VARIANTS.light]: 'dark'
+  })[getVariant(variant)];
+
+export const getButtonTheme = variant =>
+  ({
+    [VARIANTS.dark]: 'negative',
+    [VARIANTS.information]: 'negative',
+    [VARIANTS.light]: 'dark'
+  })[getVariant(variant)];
+
+export const getButtonMinimizedTheme = variant =>
+  ({
+    [VARIANTS.dark]: 'secondary',
+    [VARIANTS.information]: 'secondary',
+    [VARIANTS.light]: 'negative'
+  })[getVariant(variant)];

package/lib/components/UTWorkflowContainer/versions/V0/index.js

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
-import { number, func, shape, bool, string, oneOf } from 'prop-types';
+import { number, func, shape, bool, string, oneOf, objectOf } from 'prop-types';
 import _ from 'lodash';
 
 import Label from '../../../Label';
 import { useTheme } from '../../../../theming';
+import UTWizard from '../../../UTWizard';
 
 import ownStyles from './styles';
 import Header from './components/Header';
@@ -26,7 +27,8 @@ const UTWorkflowContainer = ({
   stepCounter,
   bottomHandler,
   hideHeader = false,
-  useMarkdown
+  useMarkdown,
+  wizardConfig
 }) => {
   useEffect(() => () => onExit?.(), []);
   const theme = useTheme();
@@ -87,6 +89,7 @@ const UTWorkflowContainer = ({
           stepCounter={stepCounter}
         />
       )}
+      {wizardConfig?.enabled && <UTWizard {...wizardConfig} />}
     </View>
   );
 };
@@ -103,6 +106,16 @@ UTWorkflowContainer.propTypes = {
   styles: shape(ViewPropTypes?.style),
   subtitle: string,
   title: string,
-  useMarkdown: bool
+  useMarkdown: bool,
+  wizardConfig: shape({
+    variant: string,
+    steps: objectOf(
+      shape({
+        title: string,
+        description: string
+      })
+    ),
+    images: objectOf(number)
+  })
 };
 export default UTWorkflowContainer;

package/lib/components/UTWorkflowContainer/versions/V1/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View, KeyboardAvoidingView, Keyboard } from 'react-native';
-import { number, func, shape, bool, string, element, oneOfType, any } from 'prop-types';
+import { number, func, shape, bool, string, element, oneOfType, any, objectOf } from 'prop-types';
 import { merge } from 'lodash';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -10,6 +10,7 @@ import UTTopbar from '../../../UTTopbar';
 import { StagesPropTypes } from '../../../UTStepper/types';
 import { TopbarPropTypes } from '../../../UTTopbar/types';
 import { IS_IOS } from '../../../../utils/platformUtils/constants';
+import UTWizard from '../../../UTWizard';
 
 import ownStyles from './styles';
 import BottomActions from './components/BottomActions';
@@ -37,7 +38,8 @@ const UTWorkflowContainer = ({
   tagline,
   title,
   topbar,
-  useMarkdown
+  useMarkdown,
+  wizardConfig
 }) => {
   const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,6 +102,7 @@ const UTWorkflowContainer = ({
           />
         )}
       </View>
+      {wizardConfig?.enabled && <UTWizard {...wizardConfig} />}
     </KeyboardAvoidingView>
   );
 };
@@ -126,6 +129,16 @@ UTWorkflowContainer.propTypes = {
   tagline: string,
   title: oneOfType([string, element]),
   topbar: TopbarPropTypes,
-  useMarkdown: bool
+  useMarkdown: bool,
+  wizardConfig: shape({
+    variant: string,
+    steps: objectOf(
+      shape({
+        title: string,
+        description: string
+      })
+    ),
+    images: objectOf(number)
+  })
 };
 export default UTWorkflowContainer;

package/package.json

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