@widergy/mobile-ui 1.11.4 → 1.11.6

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.11.6](https://github.com/widergy/mobile-ui/compare/v1.11.5...v1.11.6) (2024-06-25)
+
+
+### Bug Fixes
+
+* add utvalidation and integrate palette in uticon ([#294](https://github.com/widergy/mobile-ui/issues/294)) ([fbb09a0](https://github.com/widergy/mobile-ui/commit/fbb09a08c3c70beb537f2b8652c754531a9f0586))
+
+## [1.11.5](https://github.com/widergy/mobile-ui/compare/v1.11.4...v1.11.5) (2024-06-18)
+
+
+### Bug Fixes
+
+* font weights ([#292](https://github.com/widergy/mobile-ui/issues/292)) ([27744fd](https://github.com/widergy/mobile-ui/commit/27744fd3ed185d4ef1d1d2201be300b31d088740))
+
 ## [1.11.4](https://github.com/widergy/mobile-ui/compare/v1.11.3...v1.11.4) (2024-06-18)
 
 

package/lib/components/UTButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, func, elementType, string } from 'prop-types';
+import { bool, func, elementType, string, shape } from 'prop-types';
 import { Pressable, View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
@@ -51,7 +51,12 @@ const UTButton = ({
   const IconToShow =
     Icon &&
     (isUTIcon(Icon) ? (
-      <UTIcon color={iconStyles.color} style={iconStyles} size={iconStyles.fontSize} name={Icon} />
+      (() => {
+        const { fontSize, color, ...remainingIconStyles } = iconStyles;
+        return (
+          <UTIcon color={textStyles.colorTheme} style={remainingIconStyles} size={fontSize} name={Icon} />
+        );
+      })()
     ) : (
       <Icon style={iconStyles} fill={iconStyles.color} />
     ));
@@ -87,7 +92,11 @@ UTButton.propTypes = {
   loading: bool,
   onPress: func,
   size: string,
-  style: ViewPropTypes.style,
+  style: shape({
+    childrenContainer: ViewPropTypes.style,
+    icon: ViewPropTypes.style,
+    root: ViewPropTypes.style
+  }),
   theme: themeType,
   variant: string
 };

package/lib/components/UTIcon/README.md

@@ -5,6 +5,7 @@
 Icon component using Tabler Icons library.
 
 ### UX/UI Icon Lists
+
 - [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)
 
@@ -31,16 +32,29 @@ Exceptions may exists to these rules.
 
 ### Color
 
-Android always requires a color value, so the prop defaults to black.
+Android always requires a color value, so the prop defaults to "dark".
+
+It must be one of these:
+
+- "accent",
+- "dark",
+- "error",
+- "gray",
+- "information",
+- "light",
+- "negative",
+- "neutral",
+- "success",
+- "warning"
 
 ### Props
 
-| Name      | Description                         |Default  |
-| --------- | ----------------------------------- | ------- |
-| color     | The icon color                      | 'black' |
-| name      | The name of the icon in TablerIcons | ------- |
-| size      | The icon size                       | ------- |
-| style     | The style to be aplied to the Icon  | ------- |
+| 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       | ------- |
 
 ### Usage
 
@@ -60,4 +74,4 @@ const MyComponent = () => {
 };
 
 export default MyComponent;
-```
+```

package/lib/components/UTIcon/constants.js

@@ -0,0 +1,24 @@
+export const SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+
+export const COLOR_THEMES = {
+  accent: 'accent',
+  dark: 'dark',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning'
+};
+
+export const DEFAULT_PROPS = {
+  color: 'dark'
+};

package/lib/components/UTIcon/index.js

@@ -1,21 +1,31 @@
 import React from 'react';
-import * as TablerIcons from '@tabler/icons-react-native';
 import { number, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import * as TablerIcons from '@tabler/icons-react-native';
 
-const UTIcon = ({ color = 'black', name, size, style }) => {
-  const IconComponent = TablerIcons[name];
+import { withTheme } from '../../theming';
 
+import { retrieveStyle } from './theme';
+
+const UTIcon = ({ color = 'dark', name, shade, size, style, theme }) => {
+  const IconComponent = TablerIcons[name];
   if (!IconComponent) return null;
 
-  return <IconComponent color={color} size={size} style={style} />;
+  const themeStyles = retrieveStyle({ color, theme, shade });
+  const filled = name.endsWith('Filled');
+  const iconColor = filled ? 'transparent' : themeStyles.color;
+
+  return (
+    <IconComponent color={iconColor} size={size} style={[filled && { color: themeStyles.color }, style]} />
+  );
 };
 
 UTIcon.propTypes = {
   color: string,
   name: string,
+  shade: string,
   size: number,
   style: ViewPropTypes.style
 };
 
-export default UTIcon;
+export default withTheme(UTIcon);

package/lib/components/UTIcon/theme.js

@@ -0,0 +1,18 @@
+import { COLOR_THEMES, DEFAULT_PROPS, SHADES } from './constants';
+
+const getDefaultColorShade = colorTheme =>
+  colorTheme === COLOR_THEMES.gray
+    ? SHADES.shade04
+    : colorTheme === COLOR_THEMES.light
+      ? SHADES.shade01
+      : SHADES.shade05;
+
+const variantsColorTheme = (colorTheme, shade, theme) => {
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.color];
+  const colorShade = shade || getDefaultColorShade(colorTheme);
+  return colorThemeDefinition[colorShade] || '#000';
+};
+
+export const retrieveStyle = ({ color: colorTheme, shade, theme }) => ({
+  color: variantsColorTheme(colorTheme, shade, theme)
+});

package/lib/components/UTLabel/README.md

@@ -0,0 +1,74 @@
+# UTLabel
+
+Component used for displaying text values and markdown.
+
+## 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>
+```
+
+### shade
+
+It must be one of these:
+
+- "01",
+- "02",
+- "03",
+- "04",
+- "05"
+
+### variants
+
+| Variant   | Component | Default font size |
+| --------- | --------- | ----------------- |
+| title1    | h1        | 30px              |
+| title2    | h2        | 24px              |
+| title3    | h3        | 22px              |
+| subtitle1 | h4        | 18px              |
+| subtitle2 | h5        | 16px              |
+| body      | span      | 16px              |
+| small     | span      | 14px              |
+| xsmall    | span      | 13px              |
+| th        | th        | 16px              |
+| td        | td        | 16px              |
+
+### weights
+
+| Name       | Weight |
+| ---------- | ------ |
+| thin       | 100    |
+| extralight | 200    |
+| light      | 300    |
+| regular    | 400    |
+| medium     | 500    |
+| semibold   | 600    |
+| bold       | 700    |
+| extrabold  | 800    |
+| black      | 900    |

package/lib/components/UTLabel/theme.js

@@ -1,3 +1,5 @@
+import { IS_IOS } from '../../utils/platformUtils/constants';
+
 import { COLOR_THEMES, DEFAULT_PROPS, SHADES, VARIANTS_SIZES, WEIGHTS } from './constants';
 
 const getDefaultColorShade = colorTheme =>
@@ -13,14 +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];
+};
+
 export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight }) => ({
   color: variantsColorTheme(
     field?.configuration?.colorTheme ?? colorTheme,
     field?.configuration?.shade ?? shade,
     theme
   ),
-  fontFamily: theme.fonts.fontFamily,
+  fontFamily: getFontFamily(theme, field?.configuration?.weight ?? weight),
   fontSize: VARIANTS_SIZES[field?.configuration?.variant ?? variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant],
-  fontWeight: WEIGHTS[field?.configuration?.weight ?? weight] || WEIGHTS[DEFAULT_PROPS.weight],
+  fontWeight: IS_IOS
+    ? WEIGHTS[field?.configuration?.weight ?? weight] || WEIGHTS[DEFAULT_PROPS.weight]
+    : null,
   margin: 0
 });

package/lib/components/UTTextArea/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_ROWS = 4;

package/lib/components/UTTextArea/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import UTTextInput from '../UTTextInput';
+import propTypes from '../UTTextInput/versions/V1/proptypes';
+
+import { DEFAULT_MAX_ROWS } from './constants';
+
+const UTTextArea = ({ maxRows = DEFAULT_MAX_ROWS, ...props }) => (
+  <UTTextInput maxRows={maxRows} version="V1" {...props} />
+);
+
+UTTextArea.propTypes = propTypes;
+
+export default UTTextArea;

package/lib/components/UTTextInput/index.js

@@ -1,67 +1,16 @@
-import React, { useState } from 'react';
-import { oneOf } from 'prop-types';
+import React from 'react';
+import { string } from 'prop-types';
 
-import { withTheme } from '../../theming';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-import FilledInput from './flavors/FilledInput';
-import StandardInput from './flavors/StandardInput';
-import OutlinedInput from './flavors/OutlinedInput';
-import InputTypes from './proptypes';
-
-const variants = {
-  filled: FilledInput,
-  standard: StandardInput,
-  outlined: OutlinedInput
-};
-
-const UTTextInput = ({
-  variant = 'standard',
-  theme,
-  onFocus,
-  onBlur,
-  controlledFocus,
-  select,
-  errorTextProps,
-  ...props
-}) => {
-  const [inputHeight, setInputHeight] = useState(0);
-  const [focused, setFocused] = useState(false);
-
-  const { UTTextInput: UTTextInputStyles, UTSelect } = theme;
-  const themeStyles = (select && UTSelect?.[variant]) || UTTextInputStyles?.[variant];
-
-  const handleFocus = event => {
-    setFocused(true);
-    if (onFocus) onFocus(event);
-  };
-
-  const handleBlur = event => {
-    setFocused(false);
-    if (onBlur) onBlur(event);
-  };
-
-  const handleLayout = e => setInputHeight(e.nativeEvent.layout.height);
-
-  const InputComponent = variants[variant];
-  return (
-    <InputComponent
-      {...props}
-      onLayout={handleLayout}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      focused={focused || controlledFocus}
-      themeStyles={themeStyles}
-      inputHeight={inputHeight}
-      select={select}
-      overflowControl={props?.configuration?.overflowControl}
-      errorTextProps={errorTextProps}
-    />
-  );
+const UTTextInput = ({ version = 'V0', ...props }) => {
+  const Component = { V0, V1 }[version];
+  return <Component {...props} />;
 };
 
 UTTextInput.propTypes = {
-  variant: oneOf(['standard', 'outlined', 'filled']),
-  ...InputTypes
+  version: string
 };
 
-export default withTheme(UTTextInput);
+export default UTTextInput;

package/lib/components/UTTextInput/{components → versions/V0/components}/BaseInput/index.js

@@ -4,9 +4,9 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { TextInput } from 'react-native';
 import _ from 'lodash';
 
-import { withTheme } from '../../../../theming';
-import Icon from '../../../Icon';
-import Touchable from '../../../Touchable';
+import { withTheme } from '../../../../../../theming';
+import Icon from '../../../../../Icon';
+import Touchable from '../../../../../Touchable';
 
 import { DEBOUNCE_DELAY, DEBOUNCE_CONFIG, VISIBILITY, VISIBILITY_OFF } from './constants';
 import styles from './styles';

package/lib/components/UTTextInput/{components → versions/V0/components}/InputAnimatedBorder/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import { bool, oneOf, string } from 'prop-types';
 
-import { withTheme } from '../../../../theming';
+import { withTheme } from '../../../../../../theming';
 
 import styles from './styles';
 import { createBorderAnimations } from './utils';

package/lib/components/UTTextInput/{components → versions/V0/components}/InputLabel/index.js

@@ -2,7 +2,7 @@ import { bool, number, oneOf, shape, string } from 'prop-types';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Animated } from 'react-native';
 
-import { withTheme } from '../../../../theming';
+import { withTheme } from '../../../../../../theming';
 
 import styles, { ANIM_DURATION } from './styles';
 

package/lib/components/UTTextInput/{flavors → versions/V0/flavors}/FilledInput/index.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { withTheme } from '../../../../theming';
-import CaptionLabel from '../../../CaptionLabel';
+import { withTheme } from '../../../../../../theming';
+import CaptionLabel from '../../../../../CaptionLabel';
+import InputTypes from '../../proptypes';
+import UTTooltip from '../../../../../UTTooltip';
 import BaseInput from '../../components/BaseInput';
-import InputAnimatedBorder from '../../components/InputAnimatedBorder';
 import InputLabel from '../../components/InputLabel';
-import InputTypes from '../../proptypes';
-import Icon from '../../../Icon';
-import UTTooltip from '../../../UTTooltip';
+import InputAnimatedBorder from '../../components/InputAnimatedBorder';
+import Icon from '../../../../../Icon';
 
 import ownStyles, { CONTAINER_PADDINGS } from './styles';
 

package/lib/components/UTTextInput/{flavors → versions/V0/flavors}/OutlinedInput/index.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { withTheme } from '../../../../theming';
-import CaptionLabel from '../../../CaptionLabel';
+import { withTheme } from '../../../../../../theming';
+import CaptionLabel from '../../../../../CaptionLabel';
+import InputTypes from '../../proptypes';
+import Label from '../../../../../Label';
+import UTTooltip from '../../../../../UTTooltip';
 import BaseInput from '../../components/BaseInput';
 import InputLabel from '../../components/InputLabel';
-import InputTypes from '../../proptypes';
-import Icon from '../../../Icon';
-import UTTooltip from '../../../UTTooltip';
-import Label from '../../../Label';
+import Icon from '../../../../../Icon';
 
 import ownStyles, { CONTAINER_PADDINGS } from './styles';
 

package/lib/components/UTTextInput/{flavors → versions/V0/flavors}/StandardInput/index.js

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
-import { withTheme } from '../../../../theming';
-import InputAnimatedBorder from '../../components/InputAnimatedBorder';
-import InputLabel from '../../components/InputLabel';
+import { withTheme } from '../../../../../../theming';
+import CaptionLabel from '../../../../../CaptionLabel';
 import InputTypes from '../../proptypes';
+import UTTooltip from '../../../../../UTTooltip';
 import BaseInput from '../../components/BaseInput';
-import CaptionLabel from '../../../CaptionLabel';
-import Icon from '../../../Icon';
-import UTTooltip from '../../../UTTooltip';
+import InputLabel from '../../components/InputLabel';
+import InputAnimatedBorder from '../../components/InputAnimatedBorder';
+import Icon from '../../../../../Icon';
 
 import ownStyles, { CONTAINER_PADDINGS } from './styles';
 

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { oneOf } from 'prop-types';
+
+import { withTheme } from '../../../../theming';
+
+import FilledInput from './flavors/FilledInput';
+import StandardInput from './flavors/StandardInput';
+import OutlinedInput from './flavors/OutlinedInput';
+import InputTypes from './proptypes';
+
+const variants = {
+  filled: FilledInput,
+  standard: StandardInput,
+  outlined: OutlinedInput
+};
+
+const UTTextInput = ({
+  variant = 'standard',
+  theme,
+  onFocus,
+  onBlur,
+  controlledFocus,
+  select,
+  errorTextProps,
+  ...props
+}) => {
+  const [inputHeight, setInputHeight] = useState(0);
+  const [focused, setFocused] = useState(false);
+
+  const { UTTextInput: UTTextInputStyles, UTSelect } = theme;
+  const themeStyles = (select && UTSelect?.[variant]) || UTTextInputStyles?.[variant];
+
+  const handleFocus = event => {
+    setFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = event => {
+    setFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  const handleLayout = e => setInputHeight(e.nativeEvent.layout.height);
+
+  const InputComponent = variants[variant];
+  return (
+    <InputComponent
+      {...props}
+      onLayout={handleLayout}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      focused={focused || controlledFocus}
+      themeStyles={themeStyles}
+      inputHeight={inputHeight}
+      select={select}
+      overflowControl={props?.configuration?.overflowControl}
+      errorTextProps={errorTextProps}
+    />
+  );
+};
+
+UTTextInput.propTypes = {
+  variant: oneOf(['standard', 'outlined', 'filled']),
+  ...InputTypes
+};
+
+export default withTheme(UTTextInput);

package/lib/components/UTTextInput/versions/V1/components/TextInputField/constants.js

@@ -0,0 +1,12 @@
+export const TYPES = {
+  EMAIL: 'email',
+  NUMERIC: 'numeric',
+  PASSWORD: 'password'
+};
+
+export const KEYBOARD_BY_TYPE = {
+  [TYPES.EMAIL]: 'email-address',
+  [TYPES.NUMERIC]: 'numeric'
+};
+
+export const ERROR_ICON = 'IconInfoCircle';