@widergy/mobile-ui 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.8.1](https://github.com/widergy/mobile-ui/compare/v1.8.0...v1.8.1) (2024-05-09)
+
+
+### Bug Fixes
+
+* safeareaview for utworkflowcontainer ([#283](https://github.com/widergy/mobile-ui/issues/283)) ([f3bcac4](https://github.com/widergy/mobile-ui/commit/f3bcac45899d6859800264ce7e24c4f09d65ebea))
+
+# [1.8.0](https://github.com/widergy/mobile-ui/compare/v1.7.0...v1.8.0) (2024-05-07)
+
+
+### Features
+
+* new component uttracker ([#280](https://github.com/widergy/mobile-ui/issues/280)) ([3560bee](https://github.com/widergy/mobile-ui/commit/3560bee47485bfd448198380396c4630b1549f40))
+
 # [1.7.0](https://github.com/widergy/mobile-ui/compare/v1.6.0...v1.7.0) (2024-05-06)
 
 

package/lib/components/UTTopbar/index.js

@@ -24,6 +24,7 @@ const UTTopbar = ({
 
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
+  // If you are trying to render this in the example of mobile-ui, comment this useFocusEffect block or it will crash
   useFocusEffect(
     useCallback(() => {
       const onBackPress = () => {
@@ -36,6 +37,7 @@ const UTTopbar = ({
       return () => subscription.remove();
     }, [goBack])
   );
+  // up to here
 
   return (
     <View>

package/lib/components/UTTracker/README.md

@@ -0,0 +1,24 @@
+# UTTracker
+
+### Description
+
+This component displays a vertical stepper intended to track progress
+
+## Props
+
+| Name        | Type              | Default  | Description                                                                                                                                                           |
+| ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title       | string            |          | Displays the title above the tracker.                                                                                                                                 |
+| mode        | card \| flat      | card     | Defines whether the component should display as a card or as the bare components without any background.                                                              |
+| variant     | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step.                                                                                        |
+| steps       | stepsType         |          | Displays a step with a rounded icon on the left for each object received.                                                                                             |
+| currentStep | number            |          | Defines which step will be active, previous ones will be marked as completed while following ones will not. Use 1 for the first step                                  |
+| detailsTab  | detailsType       |          | Defines whether the detailsTab is enabled or not, if it is, it will show the subSteps of each step. The title property shows a message along the tab (card mode only) |
+
+### Custom Types
+
+| Type         | Shape                                                                          |
+| ------------ | ------------------------------------------------------------------------------ |
+| stepsType    | `{ id: number, title: string, subtitle: string, subSteps: [...subStepsType] }` |
+| subStepsType | `{ id: number, title: string, subtitle: string }`                              |
+| detailsType  | `{ enabled: bool, title: string }`                                             |

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { number } from 'prop-types';
+import merge from 'lodash/merge';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import ownStyles from './styles';
+
+const Connectors = ({ firstStepPosition, lastStepPosition, stepperHeight, style }) => {
+  const themedStyles = merge({}, ownStyles, style);
+
+  return (
+    <View style={themedStyles.wrapper(firstStepPosition, lastStepPosition, stepperHeight)}>
+      <View style={themedStyles.connectors} />
+    </View>
+  );
+};
+
+Connectors.propTypes = {
+  firstStepPosition: number,
+  lastStepPosition: number,
+  stepperHeight: number,
+  style: ViewPropTypes.style
+};
+
+export default Connectors;

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

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export default StyleSheet.create({
+  connectors: {
+    borderColor: 'gray',
+    borderLeftWidth: 2,
+    borderStyle: 'dashed',
+    flexGrow: 1
+  },
+  wrapper: (firstStepPosition, lastStepHeight, stepperHeight) => ({
+    height: '100%',
+    paddingBottom: stepperHeight - lastStepHeight,
+    paddingLeft: OVAL_SIZE / 2 - 1,
+    paddingTop: OVAL_SIZE + 4 + firstStepPosition,
+    position: 'absolute',
+    width: 2
+  })
+});

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

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { bool, func } from 'prop-types';
+import merge from 'lodash/merge';
+
+import Label from '../../../Label';
+import { StepPropTypes, VariantPropTypes } from '../../propTypes';
+import Icon from '../../../Icon';
+import { ERROR } from '../../constants';
+
+import ownStyles, { ownVariantStyles } from './styles';
+
+const ERROR_ICON_SIZE = 16;
+
+const Step = ({
+  first,
+  isActive,
+  isCompleted,
+  last,
+  setFirstStepPosition,
+  setLastStepPosition,
+  step,
+  style = {},
+  variant
+}) => {
+  const stepCompleted = isCompleted(step.id);
+  const stepActive = isActive(step.id);
+
+  const themedStyles = merge({}, ownStyles, ownVariantStyles[variant], style[variant]);
+
+  const [stepIconOffset, setStepIconOffset] = useState(0);
+
+  return (
+    <View
+      onLayout={e => {
+        if (first) setFirstStepPosition(e.nativeEvent.layout.y + stepIconOffset);
+        if (last) setLastStepPosition(e.nativeEvent.layout.y + stepIconOffset);
+      }}
+      style={[
+        themedStyles.outerContainer,
+        stepCompleted && themedStyles.completedOuterContainer,
+        stepActive && themedStyles.activeOuterContainer,
+        !first && ownStyles.stepMargin
+      ]}
+    >
+      <View
+        onLayout={e => (first || last) && setStepIconOffset(e.nativeEvent.layout.y)}
+        style={[
+          themedStyles.container,
+          stepCompleted && themedStyles.completedContainer,
+          stepActive && themedStyles.activeContainer
+        ]}
+      >
+        <View
+          style={[
+            themedStyles.innerContainer,
+            stepCompleted && themedStyles.completedInnerContainer,
+            stepActive && themedStyles.activeInnerContainer
+          ]}
+        >
+          {stepActive && variant === ERROR && (
+            <Icon
+              color="white"
+              height={ERROR_ICON_SIZE}
+              name="close"
+              size={ERROR_ICON_SIZE}
+              style={themedStyles.icon}
+              type="antdesign"
+              width={ERROR_ICON_SIZE}
+            />
+          )}
+        </View>
+      </View>
+      <View style={themedStyles.textContainer}>
+        {step.title && (
+          <Label
+            color={
+              stepCompleted
+                ? themedStyles.completedTitleColor
+                : stepActive
+                  ? themedStyles.activeTitleColor
+                  : themedStyles.titleColor
+            }
+          >
+            {step.title}
+          </Label>
+        )}
+        {step.subtitle && (
+          <Label color={themedStyles.subtitleColor} style={themedStyles.subtitle}>
+            {step.subtitle}
+          </Label>
+        )}
+        {step.description && (
+          <Label color={themedStyles.descriptionColor} style={themedStyles.description}>
+            {step.description}
+          </Label>
+        )}
+      </View>
+    </View>
+  );
+};
+
+Step.propTypes = {
+  first: bool,
+  isActive: func,
+  isCompleted: func,
+  last: bool,
+  setFirstStepPosition: func,
+  setLastStepPosition: func,
+  step: StepPropTypes,
+  variant: VariantPropTypes
+};
+
+export default Step;

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

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+import { ERROR, STANDARD } from '../../constants';
+
+export const ownVariantStyles = {
+  [ERROR]: {
+    activeContainer: {
+      backgroundColor: 'red',
+      borderColor: 'red'
+    },
+    activeInnerContainer: {
+      backgroundColor: 'red'
+    },
+    activeTitleColor: 'red',
+    completedContainer: {
+      borderColor: '#F38595'
+    },
+    completedInnerContainer: {
+      backgroundColor: '#F38595'
+    },
+    completedTitleColor: '#F38595'
+  },
+  [STANDARD]: {
+    activeContainer: {
+      borderColor: 'blue'
+    },
+    activeInnerContainer: {
+      backgroundColor: 'blue'
+    },
+    activeTitleColor: 'blue',
+    completedContainer: {
+      borderColor: '#93ACFF'
+    },
+    completedInnerContainer: {
+      backgroundColor: '#93ACFF'
+    },
+    completedTitleColor: '#93ACFF'
+  }
+};
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: 'gray',
+    borderRadius: OVAL_SIZE / 2,
+    borderWidth: OVAL_SIZE / 10,
+    height: OVAL_SIZE,
+    justifyContent: 'center',
+    marginRight: 16,
+    width: OVAL_SIZE
+  },
+  description: {
+    marginTop: 4
+  },
+  descriptionColor: 'gray',
+  icon: {
+    position: 'absolute',
+    right: -3,
+    top: -3
+  },
+  innerContainer: {
+    backgroundColor: 'white',
+    borderRadius: OVAL_SIZE / 4,
+    height: OVAL_SIZE / 2,
+    width: OVAL_SIZE / 2
+  },
+  outerContainer: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  stepMargin: { marginTop: 24 },
+  subtitle: {
+    marginTop: 4
+  },
+  textContainer: {
+    width: '90%'
+  }
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import { string } from 'prop-types';
+import merge from 'lodash/merge';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import Label from '../../../Label';
+
+import ownStyles from './styles';
+
+const SubStep = ({ style, subtitle, title }) => {
+  const themedStyles = merge({}, ownStyles, style);
+
+  return (
+    <View style={themedStyles.container}>
+      <Label color={themedStyles.titleColor}>{title}</Label>
+      <Label color={themedStyles.subtitleColor}>{subtitle}</Label>
+    </View>
+  );
+};
+
+SubStep.propTypes = {
+  style: ViewPropTypes.style,
+  subtitle: string,
+  title: string
+};
+
+export default SubStep;

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    marginLeft: 36,
+    marginTop: 8
+  },
+  subtitleColor: 'lightgray',
+  titleColor: 'gray'
+});

package/lib/components/UTTracker/constants.js

@@ -0,0 +1,4 @@
+export const CARD = 'card';
+export const FLAT = 'flat';
+export const STANDARD = 'standard';
+export const ERROR = 'error';

package/lib/components/UTTracker/index.js

@@ -0,0 +1,120 @@
+import React, { Fragment, useState } from 'react';
+import { View } from 'react-native';
+import merge from 'lodash/merge';
+import { number, string } from 'prop-types';
+import Collapsible from 'react-native-collapsible';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import Icon from '../Icon';
+import Touchable from '../Touchable';
+import Label from '../Label';
+import { useTheme } from '../../theming';
+
+import ownStyles, { DETAILS_ICON_CARD_SIZE, DETAILS_ICON_FLAT_SIZE, ownModeStyles } from './styles';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import SubStep from './components/SubStep';
+import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
+import { CARD, FLAT, STANDARD } from './constants';
+
+const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title, variant = STANDARD }) => {
+  const theme = useTheme();
+  const themedStyles = merge({}, ownStyles, ownModeStyles[mode], theme.UTTracker, style);
+
+  const [stepperHeight, setStepperHeight] = useState(0);
+  const [lastStepPosition, setLastStepPosition] = useState(0);
+  const [firstStepPosition, setFirstStepPosition] = useState(0);
+
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const isCompleted = stepNumber => stepNumber < currentStep;
+  const isActive = stepNumber => stepNumber === currentStep;
+
+  return (
+    <View style={themedStyles.outerContainer}>
+      <View style={[themedStyles.container, !detailsTab && ownStyles.roundedBorders]}>
+        {title && (
+          <Touchable
+            disabled={mode !== FLAT}
+            onPress={() => setIsCollapsed(!isCollapsed)}
+            style={themedStyles.titleTouchable}
+          >
+            <View style={themedStyles.titleContainer}>
+              <Label color={themedStyles.titleColor} style={themedStyles.title}>
+                {title}
+              </Label>
+              {detailsTab?.enabled && mode === FLAT && (
+                <Icon
+                  color={themedStyles.detailsIconColor || 'black'}
+                  height={DETAILS_ICON_FLAT_SIZE}
+                  name={isCollapsed ? 'chevron-down' : 'chevron-up'}
+                  size={DETAILS_ICON_FLAT_SIZE}
+                  type="feather"
+                  width={DETAILS_ICON_FLAT_SIZE}
+                />
+              )}
+            </View>
+          </Touchable>
+        )}
+        {steps && (
+          <View onLayout={e => setStepperHeight(e.nativeEvent.layout.height)}>
+            <Connectors
+              style={themedStyles.connectors}
+              {...{ firstStepPosition, lastStepPosition, stepperHeight }}
+            />
+            {steps.map((step, index) => (
+              <Fragment key={step.id}>
+                <Step
+                  first={index === 0}
+                  last={index === steps.length - 1}
+                  style={themedStyles.step}
+                  {...{
+                    isActive,
+                    isCompleted,
+                    setFirstStepPosition,
+                    setLastStepPosition,
+                    step,
+                    variant
+                  }}
+                />
+                <Collapsible collapsed={isCollapsed}>
+                  {step.subSteps &&
+                    step.subSteps.map(subStep => (
+                      <SubStep key={subStep.id} {...subStep} style={themedStyles.subStep} />
+                    ))}
+                </Collapsible>
+              </Fragment>
+            ))}
+          </View>
+        )}
+      </View>
+      {detailsTab?.enabled && mode === CARD && (
+        <Touchable onPress={() => setIsCollapsed(!isCollapsed)} style={themedStyles.detailsTab}>
+          <Fragment>
+            <Label>{detailsTab.title}</Label>
+            <Icon
+              color={themedStyles.detailsIconColor || 'black'}
+              height={DETAILS_ICON_CARD_SIZE}
+              name={isCollapsed ? 'chevron-down' : 'chevron-up'}
+              size={DETAILS_ICON_CARD_SIZE}
+              type="feather"
+              width={DETAILS_ICON_CARD_SIZE}
+            />
+          </Fragment>
+        </Touchable>
+      )}
+    </View>
+  );
+};
+
+UTTracker.propTypes = {
+  currentStep: number,
+  detailsTab: DetailsTabPropTypes,
+  mode: ModePropTypes,
+  steps: StepsPropTypes,
+  style: ViewPropTypes.style,
+  title: string,
+  variant: VariantPropTypes
+};
+
+export default UTTracker;

package/lib/components/UTTracker/propTypes.js

@@ -0,0 +1,19 @@
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+
+export const SubStepsPropTypes = arrayOf(shape({ id: number, subtitle: string, title: string }));
+
+export const StepPropTypes = shape({
+  id: number,
+  subSteps: arrayOf(SubStepsPropTypes),
+  subtitle: string,
+  title: string
+});
+
+export const StepsPropTypes = arrayOf(StepPropTypes);
+
+export const DetailsTabPropTypes = shape({ enabled: bool, title: string });
+
+export const ModePropTypes = oneOf([CARD, FLAT]);
+export const VariantPropTypes = oneOf([STANDARD, ERROR]);

package/lib/components/UTTracker/styles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+
+import { CARD, FLAT } from './constants';
+
+export const OVAL_SIZE = 20;
+export const DETAILS_ICON_CARD_SIZE = 20;
+export const DETAILS_ICON_FLAT_SIZE = 24;
+
+export const ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+
+export default StyleSheet.create({
+  container: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    padding: 16
+  },
+  detailsTab: {
+    backgroundColor: 'white',
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderColor: 'lightgray',
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  roundedBorders: {
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  titleTouchable: {
+    marginBottom: 24
+  }
+});

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { View, ScrollView } from 'react-native';
+import { SafeAreaView, ScrollView } from 'react-native';
 import { number, func, shape, bool, string, element } from 'prop-types';
 import { merge } from 'lodash';
 
@@ -40,7 +40,7 @@ const UTWorkflowContainer = ({
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
 
   return (
-    <View style={themedStyles.container}>
+    <SafeAreaView style={themedStyles.container}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
       <ScrollView contentContainerStyle={themedStyles.content}>
         {title && (
@@ -70,7 +70,7 @@ const UTWorkflowContainer = ({
           }}
         />
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 UTWorkflowContainer.propTypes = {

package/lib/index.js

@@ -51,6 +51,7 @@ export { default as UTTextInput } from './components/UTTextInput';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
+export { default as UTTracker } from './components/UTTracker';
 export { default as ImageRadio } from './components/ImageRadio';
 // Loading
 export { default as Loading } from './components/Loading';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -43,7 +43,8 @@
     "pdf-lib": "^1.17.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.1"
+    "react-native-pager-view": "^6.2.1",
+    "react-native-collapsible": "^1.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",