@widergy/mobile-ui 1.12.4 → 1.12.6

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.12.6](https://github.com/widergy/mobile-ui/compare/v1.12.5...v1.12.6) (2024-07-03)
+
+
+### Bug Fixes
+
+* add UTPasswordField and some fixes ([#303](https://github.com/widergy/mobile-ui/issues/303)) ([1cfe9fd](https://github.com/widergy/mobile-ui/commit/1cfe9fd00f5f3daf758dc327ec36436ff62be824))
+
+## [1.12.5](https://github.com/widergy/mobile-ui/compare/v1.12.4...v1.12.5) (2024-07-01)
+
+
+### Bug Fixes
+
+* fixes loading styles ([#309](https://github.com/widergy/mobile-ui/issues/309)) ([8240a0b](https://github.com/widergy/mobile-ui/commit/8240a0b4ddc4eaa4c94bfd2edadc53db833acd3c))
+
 ## [1.12.4](https://github.com/widergy/mobile-ui/compare/v1.12.3...v1.12.4) (2024-07-01)
 
 

package/lib/components/UTBadge/README.md

@@ -1,10 +1,18 @@
 # UTBadge
 
-### Description
+## Description
 
-Basic badge component for displaying labels with various color themes.
+`UTBadge` is a basic badge component for displaying labels with various color themes. It can be used to show statuses, counts, or any short text information that needs to be highlighted.
 
-### Color Themes
+## Props
+
+| Name       | Type   | Default | Description                                                                                                                |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| children   | string |         | The text content to be displayed inside the badge.                                                                         |
+| colorTheme | string | 'alert' | The color theme to use. One of: `alert`, `identity`, `identitySecondary`, `negative`, `information`, `warning`, `success`. |
+| style      | object |         | The style to be applied to the Badge.                                                                                      |
+
+## Color Themes
 
 The color themes are defined by the UX team and are:
 
@@ -16,30 +24,13 @@ The color themes are defined by the UX team and are:
 - `warning`: Consumes the warning variant.
 - `success`: Consumes the success variant.
 
-These color themes will change how the badge looks.
-
-### Props
-
-| Name       | Type   | Default | Description                                                                                                                |
-| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| children   | string |         | The text content to be displayed inside the badge.                                                                         |
-| colorTheme | string | 'alert' | The color theme to use. One of: `alert`, `identity`, `identitySecondary`, `negative`, `information`, `warning`, `success`. |
-| style      |        |         | The style to be aplied to the Badge                                                                                        |
+These color themes will change how the badge looks, ensuring consistency with the overall design system.
 
-### Example
+## Example Usage
 
 ```jsx
-import React from 'react';
-import UTBadge from '@widergy/energy-ui';
-
-const App = () => (
-  <div>
-    <UTBadge />
-    <UTBadge colorTheme="identity">0</UTBadge>
-    <UTBadge colorTheme="information">999+</UTBadge>
-    <UTBadge colorTheme="success">Success Badge</UTBadge>
-  </div>
-);
-
-export default App;
+<UTBadge />
+<UTBadge colorTheme="identity">0</UTBadge>
+<UTBadge colorTheme="information">999+</UTBadge>
+<UTBadge colorTheme="success">Success Badge</UTBadge>
 ```

package/lib/components/UTBadge/index.js

@@ -3,13 +3,15 @@ import { string } from 'prop-types';
 import { View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { themeType, withTheme } from '../../theming';
+import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
 import { DEFAULT_PROPS } from './constants';
 import { retrieveStyle } from './theme';
 
-const UTBadge = ({ children, colorTheme, style, theme }) => {
+const UTBadge = ({ children, colorTheme, style }) => {
+  const theme = useTheme();
+
   const classes = retrieveStyle({ theme, children, colorTheme });
   const Component = children ? UTLabel : View;
   return (
@@ -29,8 +31,7 @@ UTBadge.defaultProps = DEFAULT_PROPS;
 UTBadge.propTypes = {
   children: string,
   colorTheme: string,
-  style: ViewPropTypes.style,
-  theme: themeType
+  style: ViewPropTypes.style
 };
 
-export default withTheme(UTBadge);
+export default UTBadge;

package/lib/components/UTButton/README.md

@@ -1,37 +1,89 @@
 # UTButton
 
-### Description
+## Description
 
-Basic button component.
+`UTButton` is a versatile button component that can be customized with various themes, sizes, icons, and loading states. It is designed to be used in different scenarios, providing a consistent look and feel across your application.
 
-### Variants
+## Props
 
-These variants were defined by the UX team and are:
+| Name          | Type        | Default     | Description                                                                                                                            |
+| ------------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| colorTheme    | string      | 'secondary' | The color theme to use. One of: `error`, `negative`, `primary`, `secondary`, `success`.                                                |
+| disabled      | bool        | false       | Disables the button, making it unclickable and applying a disabled style.                                                              |
+| Icon          | elementType |             | Icon component to be displayed inside the button. Can be a text (name of the icon from tabler icons) or a React component (e.g., SVG). |
+| iconPlacement | string      | 'left'      | Position of the icon relative to the text. One of: `left`, `right`.                                                                    |
+| loading       | bool        | false       | Shows a loading spinner inside the button when true.                                                                                   |
+| onPress       | func        |             | Function to be called when the button is pressed.                                                                                      |
+| size          | string      | 'medium'    | Size of the button. One of: `small`, `medium`, `large`.                                                                                |
+| style         | object      |             | Custom styles to apply to the button. Can contain `root`, `childrenContainer`, and `icon` styles.                                      |
+| variant       | string      | 'filled'    | Variant of the button. Can be `filled`, `outlined`, `text`, `semitransparent`, or `shadow`.                                            |
 
-- `filled`
-- `outlined`
-- `text`
-- `semitransparent`
+## Color Themes
 
-All these variants are defined in the component theme.
+The color themes are defined by the UX team and are:
 
-### Color Themes
+- `error` (consume error)
+- `negative` (consume negative)
+- `primary` (consume accent)
+- `secondary` (consume neutral)
+- `success` (consume success)
 
-The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks.
-The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+These themes change the button's appearance to match the desired context.
 
-### Props
+## Icon Placement
 
-| Name                 | Type                                                  | Default   | Description                                                                    |
-| -------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------ |
-| children             | node                                                  |           | The component contents.                                                        |
-| styles               | object                                                |           | Overrides the default button theme.                                            |
-| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
-| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
-| Icon                 | node                                                  |           | An Icon component that can be displayed within the button.                     |
-| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
-| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
-| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
-| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
-| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
-| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
+The icon can be placed either on the left or the right side of the button text.
+
+- `left`: Places the icon to the left of the text.
+- `right`: Places the icon to the right of the text.
+
+## Button Sizes
+
+The button can be one of the following sizes:
+
+- `small`
+- `medium`
+- `large`
+
+## Variants
+
+The button can be one of the following variants:
+
+- `filled`: A solid button with background color.
+- `outlined`: A button with a border and transparent background.
+- `text`: A button with no border or background.
+- `semitransparent`: A button with a semi-transparent background.
+- `shadow`: A button with a shadow effect.
+
+## Custom Styles
+
+The `style` prop is an object that can contain the following keys to customize the appearance of the button:
+
+- `root`: Style for the root of the button.
+- `childrenContainer`: Style for the container that wraps the button's children.
+- `icon`: Style for the icon inside the button.
+
+## Using Icons
+
+The `Icon` prop can be used to display an icon inside the button. It accepts two types of values:
+
+1. **Text**: The name of the icon from the `tabler icons` library. In this case, the `UTIcon` component is used to render the icon.
+2. **React Component**: A React component, such as an SVG. This allows for custom icons to be used inside the button.
+
+### Example with Text Icon
+
+```jsx
+<UTButton colorTheme="primary" Icon="check" onPress={() => alert('Button Pressed!')}>
+  Primary Button
+</UTButton>
+```
+
+### Example with React Component Icon
+
+```jsx
+import { ReactComponent as CustomIcon } from './path/to/customIcon.svg';
+
+<UTButton colorTheme="primary" Icon={CustomIcon} onPress={() => alert('Button Pressed!')}>
+  Primary Button
+</UTButton>;
+```

package/lib/components/UTButton/index.js

@@ -3,7 +3,7 @@ import { bool, func, elementType, string, shape } from 'prop-types';
 import { Pressable, View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { themeType, withTheme } from '../../theming';
+import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
@@ -22,9 +22,10 @@ const UTButton = ({
   onPress,
   size,
   style,
-  theme,
   variant
 }) => {
+  const theme = useTheme();
+
   const {
     buttonStyles: themeButtonStyles,
     childrenContainerStyles: themeChildrenContainerStyles,
@@ -97,8 +98,7 @@ UTButton.propTypes = {
     icon: ViewPropTypes.style,
     root: ViewPropTypes.style
   }),
-  theme: themeType,
   variant: string
 };
 
-export default withTheme(UTButton);
+export default UTButton;

package/lib/components/UTIcon/README.md

@@ -1,77 +1,79 @@
 # UTIcon
 
-### Description
+## Description
 
-Icon component using Tabler Icons library.
+`UTIcon` is an icon component that uses the Tabler Icons library. It allows for easy integration of vector icons in your application, providing various customization options such as color, size, and style.
 
-### UX/UI Icon Lists
+## UX/UI Icon Lists
+
+For a comprehensive list of available icons and their design specifications, refer to the following resources:
 
 - [Figma](https://www.figma.com/file/upiqGm1l10mBTbV9gn35Fh/Icons---Stylesheet?type=design&node-id=3-5&mode=design)
 - [Zeroheight](https://zeroheight.com/6d447f9f5/p/87aa21-resources)
 
-### Name
+## Props
 
-Icon names must be PascalCase.
+| Name  | Type   | Default | Description                                         |
+| ----- | ------ | ------- | --------------------------------------------------- |
+| color | string | 'dark'  | The icon color, must be from the theme palette.     |
+| name  | string |         | The name of the icon from the Tabler Icons library. |
+| shade | string |         | The shade of the color theme to use.                |
+| size  | number |         | The size of the icon.                               |
+| style | object |         | Custom styles to apply to the icon.                 |
 
-Usually, icon names are a convertion from figma's or zeroheight's snake_case to PascalCase, adding `Icon` as a prefix.
+## Icon Names
 
-```
-Figma: truck-delivery
-UTIcon: IconTruckDelivery
-```
+Icon names must be in PascalCase. Typically, icon names are a conversion from Figma's or Zeroheight's snake_case to PascalCase, adding `Icon` as a prefix.
 
-Sometimes icons will be called {icon-name}-old. In these cases, usually, the icon name is made in the same way already explained, but subtracting the
-`-old` suffix.
+Example:
 
-```
-Figma: chevron-right-old
-UTIcon: IconChevronRight
-```
+- **Figma**: `truck-delivery`
+- **UTIcon**: `IconTruckDelivery`
 
-Exceptions may exists to these rules.
+In some cases, icons will have the suffix `-old`. In these cases, the icon name is made in the same way, but without the `-old` suffix.
 
-### Color
+Example:
 
-Android always requires a color value, so the prop defaults to "dark".
+- **Figma**: `chevron-right-old`
+- **UTIcon**: `IconChevronRight`
 
-It must be one of these:
+Exceptions to these rules may exist.
 
-- "accent",
-- "dark",
-- "error",
-- "gray",
-- "information",
-- "light",
-- "negative",
-- "neutral",
-- "success",
-- "warning"
+## Color Themes
 
-### Props
+The `color` prop must be one of these values:
 
-| Name  | Description                              | Default |
-| ----- | ---------------------------------------- | ------- |
-| color | The icon color, must be from the Palette | 'dark'  |
-| name  | The name of the icon in TablerIcons      | ------- |
-| size  | The icon size                            | ------- |
-| style | The style to be aplied to the Icon       | ------- |
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
 
-### Usage
+## Shade
 
-```javascript
-import { UTIcon } from '@widergy/mobile-ui';
-import { View } from 'react-native';
-import React from 'react';
+The `shade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
+
+### Default shade
 
-import styles from './styles';
+The default shade for each color theme is defined as follows:
 
-const MyComponent = () => {
-  return (
-    <View>
-      <UTIcon color="skyBlue" name="IconTruckDelivery" size={48} style={styles.iconStyle} />
-    </View>
-  );
-};
+For `gray`: `shade04`
+For `light`: `shade01`
+For all others: `shade05`
 
-export default MyComponent;
+## Usage
+
+```javascript
+<UTIcon color="primary" name="IconTruckDelivery" size={48} />
 ```

package/lib/components/UTIcon/index.js

@@ -3,11 +3,13 @@ import { number, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import * as TablerIcons from '@tabler/icons-react-native';
 
-import { withTheme } from '../../theming';
+import { useTheme } from '../../theming';
 
 import { retrieveStyle } from './theme';
 
-const UTIcon = ({ color = 'dark', name, shade, size, style, theme }) => {
+const UTIcon = ({ color = 'dark', name, shade, size, style }) => {
+  const theme = useTheme();
+
   const IconComponent = TablerIcons[name];
   if (!IconComponent) return null;
 
@@ -28,4 +30,4 @@ UTIcon.propTypes = {
   style: ViewPropTypes.style
 };
 
-export default withTheme(UTIcon);
+export default UTIcon;

package/lib/components/UTLabel/README.md

@@ -1,50 +1,57 @@
 # UTLabel
 
-Component used for displaying text values and markdown.
+## Description
+
+`UTLabel` is a versatile text component used for displaying text values and markdown content. It provides various customization options such as color themes, font sizes, weights, and styles.
 
 ## Props
 
-| Name              | Type   | Default                                  | Description                                                                                                                                                                                                                |
-| ----------------- | ------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| colorTheme        | string | 'primary'                                | Color theme to style the UTLabel. Has to be defined in the proyect theme. [Example](#colortheme).                                                                                                                          |
-| markdownRenderers | object | [MARKDOWN_RENDERERS](./constants.js#L36) | ⚠️ Requires `withMarkdown` to be set to `true` <br />Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
-| shade             | string |                                          | The colorTheme shade                                                                                                                                                                                                       |
-| style             | object |                                          | Additional style.                                                                                                                                                                                                          |
-| title             | string |                                          | [Title global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title).                                                                                                                       |
-| variant           | string | 'body'                                   | Defines html component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire proyect) through the proyect's theme.                                           |
-| weight            | string | 'regular'                                | Defines font-weight to be used. For a list of available options, check [here](#font-weights).                                                                                                                              |
-| withMarkdown      | bool   | false                                    | Tells the component whether or not to render text inside as markdown.                                                                                                                                                      |
-
-### colorTheme
-
-It must be one of these:
-
-- "accent",
-- "dark",
-- "error",
-- "gray",
-- "information",
-- "light",
-- "negative",
-- "neutral",
-- "success",
-- "warning"
-
-```JSX
-<UTLabel colorTheme='error'>Your text here</UTLabel>
-```
+| Name              | Type   | Default   | Description                                                                                                                                                                                                           |
+| ----------------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| colorTheme        | string | 'dark'    | Color theme to style the `UTLabel`. It must be defined in the project theme. [Example](#colortheme).                                                                                                                  |
+| field             | any    | {}        | Field configuration for advanced customization.                                                                                                                                                                       |
+| markdownRenderers | object |           | ⚠️ Requires `withMarkdown` to be set to `true`. Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
+| numberOfLines     | number |           | Limits the number of lines displayed in the label. When set, `ellipsizeMode` is automatically set to 'tail'.                                                                                                          |
+| shade             | string |           | The color theme shade.                                                                                                                                                                                                |
+| style             | object | {}        | Additional style.                                                                                                                                                                                                     |
+| variant           | string | 'body'    | Defines the font size and component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire project) through the project's theme.                         |
+| weight            | string | 'regular' | Defines the font weight to be used. For a list of available options, check [here](#weights).                                                                                                                          |
+| withMarkdown      | bool   | false     | Indicates whether or not to render text inside as markdown.                                                                                                                                                           |
+
+## Color Themes
+
+The `color` prop must be one of these values:
+
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
+
+## Shade
+
+The `shade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
 
-### shade
+### Default shade
 
-It must be one of these:
+The default shade for each color theme is defined as follows:
 
-- "01",
-- "02",
-- "03",
-- "04",
-- "05"
+For `gray`: `shade04`
+For `light`: `shade01`
+For all others: `shade05`
 
-### variants
+## Variants
 
 | Variant   | Component | Default font size |
 | --------- | --------- | ----------------- |
@@ -59,7 +66,7 @@ It must be one of these:
 | th        | th        | 16px              |
 | td        | td        | 16px              |
 
-### weights
+## Weights
 
 | Name       | Weight |
 | ---------- | ------ |
@@ -72,3 +79,19 @@ It must be one of these:
 | bold       | 700    |
 | extrabold  | 800    |
 | black      | 900    |
+
+## Usage
+
+### Basic Example
+
+```jsx
+<UTLabel variant="title1" colorTheme="primary">
+  Hello, World!
+</UTLabel>
+```
+
+### Example with Markdown
+
+```jsx
+<UTLabel withMarkdown>{`This is **bold** and this is *italic* text.`}</UTLabel>
+```

package/lib/components/UTLabel/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { any, bool, func, objectOf, string } from 'prop-types';
+import { any, bool, func, number, objectOf, string } from 'prop-types';
 import { Text } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import Markdown from 'react-native-markdown-display';
 
-import { themeType, withTheme } from '../../theming';
+import { useTheme } from '../../theming';
 
 import { DEFAULT_PROPS } from './constants';
 import { markdownFormat } from './utils';
@@ -15,13 +15,15 @@ const UTLabel = ({
   colorTheme,
   field,
   markdownRenderers,
+  numberOfLines,
   shade,
   style,
-  theme,
   variant,
   weight,
   withMarkdown
 }) => {
+  const theme = useTheme();
+
   if (!children) return null;
 
   const themeStyles = retrieveStyle({ colorTheme, field, shade, theme, variant, weight });
@@ -29,8 +31,14 @@ const UTLabel = ({
 
   const LabelRenderer = withMarkdown ? Markdown : Text;
 
+  const additionalProps = numberOfLines ? { ellipsizeMode: 'tail', numberOfLines } : {};
+
   return (
-    <LabelRenderer style={withMarkdown ? { body: labelStyles } : labelStyles} rules={markdownRenderers}>
+    <LabelRenderer
+      {...additionalProps}
+      rules={markdownRenderers}
+      style={withMarkdown ? { body: labelStyles } : labelStyles}
+    >
       {withMarkdown ? markdownFormat(children) : children}
     </LabelRenderer>
   );
@@ -43,12 +51,12 @@ UTLabel.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   field: any,
   markdownRenderers: objectOf(func),
+  numberOfLines: number,
   shade: string,
   style: ViewPropTypes.style,
-  theme: themeType,
   variant: string,
   weight: string,
   withMarkdown: bool
 };
 
-export default withTheme(UTLabel);
+export default UTLabel;

package/lib/components/UTLabel/theme.js

@@ -15,9 +15,21 @@ const variantsColorTheme = (colorTheme, shade, theme) => {
   return colorThemeDefinition[colorShade] || '#000';
 };
 
-const getFontFamily = (theme, weight) => {
-  if (weight === WEIGHTS[DEFAULT_PROPS.weight] || IS_IOS) return theme.fonts.fontFamily;
-  return theme.fonts?.customVariants?.[weight]?.fontFamily;
+export const getFontFamily = (theme, weight) =>
+  weight === WEIGHTS[DEFAULT_PROPS.weight] || IS_IOS
+    ? theme.fonts.fontFamily
+    : theme.fonts?.customVariants?.[weight]?.fontFamily;
+
+export const getFontSize = variant => VARIANTS_SIZES[variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant];
+
+export const getFontWeight = weight => (IS_IOS ? WEIGHTS[weight] || WEIGHTS[DEFAULT_PROPS.weight] : null);
+
+export const getFontStyles = ({ theme, variant, weight }) => {
+  const fontFamily = getFontFamily(theme, weight);
+  const fontSize = getFontSize(variant);
+  const fontWeight = getFontWeight(weight);
+
+  return { fontFamily, fontSize, fontWeight };
 };
 
 export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight }) => ({
@@ -26,10 +38,13 @@ export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight
     field?.configuration?.shade ?? shade,
     theme
   ),
-  fontFamily: getFontFamily(theme, field?.configuration?.weight ?? weight),
-  fontSize: VARIANTS_SIZES[field?.configuration?.variant ?? variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant],
-  fontWeight: IS_IOS
-    ? WEIGHTS[field?.configuration?.weight ?? weight] || WEIGHTS[DEFAULT_PROPS.weight]
-    : null,
-  margin: 0
+  ...getFontStyles({
+    theme,
+    variant: field?.configuration?.variant ?? variant,
+    weight: field?.configuration?.weight ?? weight
+  }),
+  includeFontPadding: false,
+  margin: 0,
+  paddingVertical: 0,
+  textAlignVertical: 'center'
 });