@widergy/mobile-ui 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.3.0](https://github.com/widergy/mobile-ui/compare/v1.2.1...v1.3.0) (2024-03-11)
+
+
+### Features
+
+* added UTSelectableCard ([#265](https://github.com/widergy/mobile-ui/issues/265)) ([5510bd9](https://github.com/widergy/mobile-ui/commit/5510bd917c691bf6febbbede46b3896008f2a1b8))
+
+## [1.2.1](https://github.com/widergy/mobile-ui/compare/v1.2.0...v1.2.1) (2024-03-08)
+
+
+### Bug Fixes
+
+* added utworkflowcontainer readmes ([#262](https://github.com/widergy/mobile-ui/issues/262)) ([47204d6](https://github.com/widergy/mobile-ui/commit/47204d6bfc4e54a605d4007090622450c004e063))
+
 # [1.2.0](https://github.com/widergy/mobile-ui/compare/v1.1.0...v1.2.0) (2024-03-01)
 
 

package/lib/components/UTBanner/README.md

@@ -0,0 +1,19 @@
+# UTBanner
+
+### Description
+
+This component displays a banner with information
+
+## Props
+
+| Name  | Type      | Default | Description |
+| ----- | --------- | ------- | ----------- |
+| icon  | iconType  |         | Icon to be displayed at the left side of the banner. | 
+| style | ViewStyle |         | Custom optional styles to be applied to the banner. |
+| text  | string    |         | Text that will be displayed inside the banner. |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| iconType    | `{ name: string, type: string }` |

package/lib/components/UTHeader/README.md

@@ -0,0 +1,24 @@
+# UTHeader
+
+### Description
+
+This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| banner             | bannerType  |         | Renders a banner at the bottom of the header. |
+| helpText           | string      |         | Text that will be rendered at the bottom of the header. |       
+| requiredFieldInfo  | string      |         | Text to display as a helper for required fields, it will be rendered below the description. |
+| subtitle           | string      |         | Text that will be rendered below the title. |
+| tagline            | string      |         | Text that will be rendered in uppercase on top of the title. |
+| title              | string      |         | Main text rendered in the middle of the header. |
+| useMarkdown        | bool        |         | Defines whether to use markdown in the components |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| bannerType  | `{ text: string, icon: iconType }` |
+| iconType    | `{ name: string, type: string }` |

package/lib/components/UTHeader/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { View } from 'react-native';
-import { string, bool, shape, element } from 'prop-types';
+import { string, bool, shape } from 'prop-types';
 
 import Label from '../Label';
 import UTBanner from '../UTBanner';
 
 import ownStyles from './styles';
 
-const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
+const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
   return (
     <View style={ownStyles.header}>
       {tagline && (
@@ -40,9 +40,9 @@ const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMark
   );
 };
 
-Header.propTypes = {
+UTHeader.propTypes = {
   banner: shape({
-    Icon: element,
+    icon: shape({ name: string, type: string }),
     text: string
   }),
   helpText: string,
@@ -53,4 +53,4 @@ Header.propTypes = {
   useMarkdown: bool
 };
 
-export default Header;
+export default UTHeader;

package/lib/components/UTSelectableCard/index.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import { View } from 'react-native';
+import merge from 'lodash/merge';
+import { isEmpty } from 'lodash';
+
+import Touchable from '../Touchable';
+import UTTooltip from '../UTTooltip';
+import Label from '../Label';
+import { useTheme } from '../../theming';
+import Icon from '../Icon';
+
+import { getUTSelectableCardStyles, ICON_SIZE } from './styles';
+
+const UTSelectableCard = ({
+  additionalInfo = {},
+  appearance = 'white',
+  checkIcon = true,
+  description,
+  disabled = false,
+  icon,
+  onPress,
+  selected = false,
+  size = 'medium',
+  style,
+  titleText,
+  tooltip
+}) => {
+  const theme = useTheme();
+  const themedStyles = merge(
+    {},
+    getUTSelectableCardStyles(theme?.UTSelectableCard),
+    theme?.UTSelectableCard,
+    style
+  );
+
+  const { selectedColor = 'royalblue', disabledColor = 'gray', baseColor = 'black' } = themedStyles;
+
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={() => onPress?.()}
+      style={[
+        themedStyles.outerContainer,
+        themedStyles[`${appearance}Appearance`],
+        selected && themedStyles[`${appearance}SelectedContainer`],
+        disabled && themedStyles[`${appearance}DisabledContainer`],
+        themedStyles[`${size}Size`]
+      ]}
+    >
+      <View style={themedStyles.container}>
+        {!isEmpty(icon) && (
+          <Icon
+            name={icon.name}
+            type={icon.type}
+            size={ICON_SIZE}
+            width={ICON_SIZE}
+            height={ICON_SIZE}
+            color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+            style={themedStyles.icon}
+          />
+        )}
+        <View style={themedStyles.textContainer}>
+          <View style={themedStyles.column}>
+            <View style={themedStyles.titleAndTooltip}>
+              <Label
+                color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                style={themedStyles.title}
+              >
+                {titleText}
+              </Label>
+              {tooltip && (
+                <UTTooltip position="top" content={<Label>{tooltip}</Label>}>
+                  <Icon
+                    name="help-outline"
+                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                  />
+                </UTTooltip>
+              )}
+            </View>
+            {description && (
+              <Label
+                medium
+                style={themedStyles.description}
+                color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+              >
+                {description}
+              </Label>
+            )}
+          </View>
+          {!isEmpty(additionalInfo) && (
+            <View style={themedStyles.column}>
+              {!!additionalInfo.title && (
+                <Label
+                  right
+                  medium
+                  bold
+                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                >
+                  {additionalInfo.title}
+                </Label>
+              )}
+              {!!additionalInfo.description && (
+                <Label
+                  right
+                  medium
+                  style={themedStyles.description}
+                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                >
+                  {additionalInfo.description}
+                </Label>
+              )}
+            </View>
+          )}
+        </View>
+        {checkIcon && selected && <Icon name="check" color={selectedColor} style={themedStyles.checkIcon} />}
+      </View>
+    </Touchable>
+  );
+};
+
+UTSelectableCard.propTypes = {
+  additionalInfo: shape({ description: string, title: string }),
+  appearance: string,
+  checkIcon: bool,
+  description: string,
+  disabled: bool,
+  icon: shape({ name: string, type: string }),
+  onPress: func,
+  selected: bool,
+  size: string,
+  titleText: string,
+  tooltip: string
+};
+
+export default UTSelectableCard;

package/lib/components/UTSelectableCard/styles.js

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+export const ICON_SIZE = 36;
+
+export const getUTSelectableCardStyles = (theme = {}) =>
+  StyleSheet.create({
+    checkIcon: {
+      marginLeft: 16
+    },
+    column: {
+      alignSelf: 'center'
+    },
+    container: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    description: {
+      marginTop: 4
+    },
+    icon: {
+      marginRight: 16
+    },
+    outerContainer: {
+      borderRadius: 4
+    },
+    textContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexGrow: 1,
+      justifyContent: 'space-between'
+    },
+    title: {
+      marginRight: 8
+    },
+    titleAndTooltip: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+
+    // Sizes
+    mediumSize: {
+      padding: 24
+    },
+    smallSize: {
+      padding: 16
+    },
+
+    // White
+    whiteAppearance: {
+      backgroundColor: theme.whiteBackground || 'white',
+      elevation: 4
+    },
+    whiteDisabledContainer: {
+      backgroundColor: theme.whiteDisabledBackground || 'lightgray',
+      elevation: 0
+    },
+    whiteSelectedContainer: {
+      borderColor: theme.whiteSelectedBorder || 'royalblue',
+      borderWidth: 2,
+      elevation: 0
+    },
+
+    // Gray
+    grayAppearance: {
+      backgroundColor: theme.grayBackground || 'gainsboro',
+      borderColor: theme.grayBorder || 'gray',
+      borderWidth: 1
+    },
+    grayDisabledContainer: {
+      borderColor: theme.grayDisabledBorder || 'gray',
+      borderWidth: 2
+    },
+    graySelectedContainer: {
+      backgroundColor: theme.graySelectedBackground || 'aliceblue',
+      borderColor: theme.graySelectedBorder || 'royalblue',
+      borderWidth: 2
+    }
+  });

package/lib/components/UTStepper/README.md

@@ -0,0 +1,18 @@
+# UTStepper
+
+### Description
+
+This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| stageType   | arrayOf( `{ id: number }` ) |

package/lib/components/UTTopbar/README.md

@@ -0,0 +1,23 @@
+# UTTopbar
+
+### Description
+
+This components replaces the native topbar when needed more complex behaviour
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. |
+| currentStep        | number      |         | Receives a number that will fill up the progress bar proportionally to the number of steps given. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+| stepsCount         | number      |         | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar. |
+| topbar             | topbarType  | `{ colorTheme: 'light', variant: 'secondary' }`      | Defines the rendering of the topbar that will replace the native topbar |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| iconType    | `{ name: string, type: string, size: number, height: number, width: number }` |
+| stageType   | arrayOf( `{ id: number }` ) |
+| topbarType  | `{ colorTheme: 'light' \| 'dark', goBack: func, title: string, variant: 'primary' \| 'secondary', icon: iconType }` |

package/lib/components/UTWorkflowContainer/versions/V1/README.md

@@ -0,0 +1,41 @@
+# UTWorkflowContainer
+
+### Description
+
+This component serves as a wrapper for each step of a workflow
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| banner             | bannerType  |         | Renders a banner at the bottom of the header. |
+| children           | element     |         | The contents that will be rendered inside the component.
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly. |
+| currentStep        | number      |         | Receives a number that will fill up the progress bar proportionally to the number of steps given. |
+| helpText           | string      |         | Text that will be rendered at the bottom of the header. |       
+| message            | messageType |         | If present, renders a message above the navigation actions. |
+| nextButton         | buttonType  |         | Defines behaviour and/or rendering of the button on the right corner. |
+| onExit             | func        |         | Cleanup function. |     
+| requiredFieldInfo  | string      |         | Text to display as a helper for required fields, it will be rendered below the description. |
+| returnButton       | buttonType  |         | Defines behaviour and/or rendering of the button on the left corner. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator rendered inside the topbar. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+| stepsCount         | number      |         | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar. |
+| subtitle           | string      |         | Text that will be rendered below the title. |
+| summary            | summaryType |         | If present, renders a rounded tab above the navigation actions with additional information and actions |
+| tagline            | string      |         | Text that will be rendered in uppercase on top of the title. |
+| title              | string      |         | Text that will be rendered between the topbar and the content. It is required in order to show any other text header elements. |
+| topbar             | topbarType  |         | Defines the rendering of the topbar that will replace the native topbar |
+| useMarkdown        | bool        |         | Defines whether to use markdown in the header components |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| actionType  | `{ name: string, icon: iconType, title: string, onPress: func }` |
+| bannerType  | `{ text: string, icon: iconType }` |
+| buttonType  | `{ hidden: bool, disabled: bool, label: string, onPress: func, mode: 'contained' \| 'outlined' \| 'text' }` |
+| iconType    | `{ name: string, type: string, size: number, height: number, width: number }` |
+| messageType | `{ icon: iconType, variant: string , title: string }` |
+| stageType   | arrayOf( `{ id: number }` ) |
+| summaryType | `{ checkbox: objectOf( UTCheckbox props ), title: string, mainInfo: string, actions: actionType }` |
+| topbarType  | `{ colorTheme: 'light' \| 'dark', goBack: func, title: string, variant: 'primary' \| 'secondary', icon: iconType }` |

package/lib/index.js

@@ -39,6 +39,7 @@ export { default as IconBadge } from './components/IconBadge';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTImage } from './components/UTImage';
 export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
+export { default as UTSelectableCard } from './components/UTSelectableCard';
 export { default as UTProgressBar } from './components/UTProgressBar';
 export { default as UTOnBoarding } from './components/UTOnBoarding';
 export { default as UTRoundView } from './components/UTRoundView';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -17,6 +17,7 @@
     "test": "jest",
     "prepublish": "npm run build",
     "android": "cd example && yarn android",
+    "android:clean": "cd example/android && ./gradlew clean",
     "ios": "cd example && yarn ios",
     "start": "cd example && yarn start",
     "prepare": "husky install"