@widergy/mobile-ui 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.2.0](https://github.com/widergy/mobile-ui/compare/v2.1.4...v2.2.0) (2025-11-28)
+
+
+### Features
+
+* [EVEP-52] onboarding component ([#467](https://github.com/widergy/mobile-ui/issues/467)) ([277ff19](https://github.com/widergy/mobile-ui/commit/277ff194b397ca08001d151a9dd52ec17a4e63df))
+
 ## [2.1.4](https://github.com/widergy/mobile-ui/compare/v2.1.3...v2.1.4) (2025-11-19)
 
 

package/lib/components/UTTabs/index.js

@@ -140,7 +140,7 @@ const UTTabs = ({
           onScroll={handleScroll}
           scrollEventThrottle={16}
         >
-          {tabs.map(({ badge, label, icon }, index) => {
+          {tabs.map(({ badge, label, icon, walkthrough }, index) => {
             const selected = selectedTab === index;
             const colorThemeToUse = selected ? colorTheme : 'gray';
             return (
@@ -150,6 +150,7 @@ const UTTabs = ({
                 key={`tab-${label || icon}`}
                 onPress={() => setSelectedTab(index)}
                 style={styles.scrollableTab}
+                {...walkthrough}
               >
                 {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
                 <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...labelProps}>
@@ -162,7 +163,7 @@ const UTTabs = ({
         </ScrollView>
       ) : (
         <View style={styles.container}>
-          {tabs.map(({ badge, label, icon }, index) => {
+          {tabs.map(({ badge, label, icon, walkthrough, walkthroughStyle }, index) => {
             const selected = selectedTab === index;
             const colorThemeToUse = selected ? colorTheme : 'gray';
             return (
@@ -170,7 +171,8 @@ const UTTabs = ({
                 disabled={selected}
                 key={`tab-${label || icon}`}
                 onPress={() => setSelectedTab(index)}
-                style={styles.tabContainer(tabs.length, index)}
+                style={() => [styles.tabContainer(tabs.length, index)(), ...(walkthroughStyle || [])]}
+                {...walkthrough}
               >
                 <View style={styles.tabContent(selected)}>
                   {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}

package/lib/components/UTTabs/styles.js

@@ -123,6 +123,7 @@ export default StyleSheet.create(({ Palette: { accent, neutral, negative, light
     const distribution = getTabDistribution(tabs);
     const width = distribution.widths[index] || 'auto';
     return {
+      paddingBottom: 4,
       width,
       zIndex: 3
     };

package/lib/components/UTWalkthroughStep/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View } from 'react-native';
+import { func, object, array } from 'prop-types';
+
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+
+import ownStyles from './styles';
+
+const UTWalkthroughStep = ({
+  buttonTexts,
+  containerStyle,
+  colors,
+  handleFinishWalkthrough,
+  next,
+  previous,
+  step,
+  stepsConfig,
+  walkthroughStepTestIds
+}) => {
+  const styles = ownStyles(colors);
+  const stepNumber = stepsConfig.findIndex(s => s.identifier === step.identifier) + 1;
+
+  const currentStep = stepsConfig.find(stepConfig => stepConfig.identifier === step.identifier);
+  const isFirstStep = currentStep.identifier === stepsConfig[0].identifier;
+  const isLastStep = currentStep.identifier === stepsConfig[stepsConfig.length - 1].identifier;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.titleContainer}>
+        <UTLabel
+          colorTheme="light"
+          dataTestId={walkthroughStepTestIds.title}
+          style={styles.grow}
+          weight="medium"
+          withMarkdown
+        >
+          {currentStep.title}
+        </UTLabel>
+        <View style={styles.buttons}>
+          <UTButton
+            colorTheme="negative"
+            dataTestId={walkthroughStepTestIds.closeButton}
+            Icon="IconX"
+            onPress={handleFinishWalkthrough}
+            size="small"
+            variant="text"
+          />
+        </View>
+      </View>
+      <View style={styles.content}>
+        <UTLabel
+          colorTheme="light"
+          dataTestId={walkthroughStepTestIds.description}
+          variant="small"
+          withMarkdown
+        >
+          {currentStep.description}
+        </UTLabel>
+      </View>
+      <View style={styles.footer}>
+        <View style={styles.page}>
+          <UTLabel colorTheme="light" variant="small" withMarkdown>
+            {`${stepNumber} de ${stepsConfig.length}`}
+          </UTLabel>
+        </View>
+        <View style={styles.buttons}>
+          {!isFirstStep && (
+            <UTButton
+              colorTheme="negative"
+              dataTestId={walkthroughStepTestIds.previousButton}
+              onPress={previous}
+              size="small"
+              variant="text"
+              weight="medium"
+            >
+              {buttonTexts.previous}
+            </UTButton>
+          )}
+          <UTButton
+            colorTheme="negative"
+            dataTestId={walkthroughStepTestIds.nextButton}
+            onPress={isLastStep ? handleFinishWalkthrough : next}
+            size="small"
+            variant="filled"
+            weight="medium"
+          >
+            {isLastStep ? buttonTexts.finish : isFirstStep ? buttonTexts.start : buttonTexts.next}
+          </UTButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+UTWalkthroughStep.propTypes = {
+  buttonTexts: object,
+  colors: object,
+  containerStyle: object,
+  handleFinishWalkthrough: func,
+  next: func,
+  previous: func,
+  step: object,
+  stepsConfig: array,
+  walkthroughStepTestIds: object
+};
+
+export default UTWalkthroughStep;

package/lib/components/UTWalkthroughStep/styles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create(colors => {
+  return {
+    container: {
+      borderRadius: 4,
+      backgroundColor: colors.dark04,
+      display: 'flex',
+      width: 296,
+      padding: 16,
+      position: 'absolute'
+    },
+    titleContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    },
+    grow: {
+      flexShrink: 1,
+      flexGrow: 1,
+      marginRight: 8
+    },
+    buttons: {
+      flexDirection: 'row',
+      gap: 8
+    },
+
+    content: {
+      marginBottom: 8
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: 8,
+      alignItems: 'flex-end'
+    },
+    page: {
+      alignItems: 'center'
+    }
+  };
+});

package/lib/index.js

@@ -77,6 +77,7 @@ 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 UTWalkthroughStep } from './components/UTWalkthroughStep';
 
 // Theming
 export * from './theming';

package/package.json

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