@widergy/mobile-ui 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.10.1](https://github.com/widergy/mobile-ui/compare/v1.10.0...v1.10.1) (2024-05-20)
+
+
+### Bug Fixes
+
+* add UTLabel component ([#285](https://github.com/widergy/mobile-ui/issues/285)) ([e530d86](https://github.com/widergy/mobile-ui/commit/e530d86d864f6ef08c7cee661ed40a22be744170))
+
+# [1.10.0](https://github.com/widergy/mobile-ui/compare/v1.9.0...v1.10.0) (2024-05-20)
+
+
+### Features
+
+* autocomplete empty list component ([#287](https://github.com/widergy/mobile-ui/issues/287)) ([a90a0b2](https://github.com/widergy/mobile-ui/commit/a90a0b2fd85e4171d08fc012447b18b522bae6f8))
+
 # [1.9.0](https://github.com/widergy/mobile-ui/compare/v1.8.3...v1.9.0) (2024-05-17)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -18,6 +18,7 @@ const UTAutocomplete = ({
   variant,
   autoCompletePlaceholder,
   MenuOptionComponent,
+  ListEmptyComponent,
   filterOptions,
   persistSelectedOption = false
 }) => {
@@ -49,6 +50,7 @@ const UTAutocomplete = ({
         autoCompletePlaceholder={autoCompletePlaceholder}
         maxHeight={WINDOW_HEIGHT * 0.25}
         MenuOptionComponent={MenuOptionComponent}
+        ListEmptyComponent={ListEmptyComponent}
         filterOptions={filterOptions}
       >
         <UTTextInput
@@ -87,6 +89,7 @@ UTAutocomplete.propTypes = {
   variant: string,
   autoCompletePlaceholder: string,
   MenuOptionComponent: element,
+  ListEmptyComponent: element,
   filterOptions: bool,
   persistSelectedOption: bool
 };

package/lib/components/UTLabel/constants.js

@@ -0,0 +1,51 @@
+export const SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+
+export const VARIANTS_SIZES = {
+  title1: 30,
+  title2: 24,
+  title3: 22,
+  subtitle1: 18,
+  subtitle2: 16,
+  body: 16,
+  small: 14,
+  xsmall: 13,
+  th: 16,
+  td: 16
+};
+
+export const WEIGHTS = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+
+export const COLOR_THEMES = {
+  dark: 'dark',
+  gray: 'gray',
+  light: 'light',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  information: 'information'
+};
+
+export const DEFAULT_PROPS = {
+  colorTheme: 'dark',
+  field: {},
+  className: {},
+  variant: 'body',
+  weight: 'regular',
+  withMarkdown: false
+};

package/lib/components/UTLabel/index.js

@@ -0,0 +1,55 @@
+/* eslint-disable react/no-children-prop */
+import React from 'react';
+import { Text } from 'react-native';
+import Markdown from 'react-native-markdown-display';
+import { any, bool, func, object, objectOf, string } from 'prop-types';
+
+import { themeType, withTheme } from '../../theming';
+
+import { DEFAULT_PROPS } from './constants';
+import { retrieveStyle } from './theme';
+import { markdownFormat } from './utils';
+
+const UTLabel = ({
+  children,
+  className,
+  colorTheme,
+  field,
+  markdownRenderers,
+  shade,
+  theme,
+  variant,
+  weight,
+  withMarkdown
+}) => {
+  if (!children) return null;
+
+  const themeStyles = retrieveStyle({ colorTheme, field, shade, theme, variant, weight });
+  const labelStyles = [themeStyles, className];
+
+  const LabelRenderer = withMarkdown ? Markdown : Text;
+
+  return (
+    <LabelRenderer style={withMarkdown ? { body: labelStyles } : labelStyles} rules={markdownRenderers}>
+      {withMarkdown ? markdownFormat(children) : children}
+    </LabelRenderer>
+  );
+};
+
+UTLabel.defaultProps = DEFAULT_PROPS;
+
+UTLabel.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  className: object,
+  colorTheme: string,
+  // eslint-disable-next-line react/forbid-prop-types
+  field: any,
+  markdownRenderers: objectOf(func),
+  shade: string,
+  theme: themeType,
+  variant: string,
+  weight: string,
+  withMarkdown: bool
+};
+
+export default withTheme(UTLabel);

package/lib/components/UTLabel/theme.js

@@ -0,0 +1,27 @@
+import { COLOR_THEMES, DEFAULT_PROPS, SHADES, VARIANTS_SIZES, WEIGHTS } 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.actions[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorShade = Object.values(SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  return colorThemeDefinition[colorShade] || '#000';
+};
+
+export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight }) => ({
+  color: variantsColorTheme(
+    field?.configuration?.colorTheme ?? colorTheme,
+    field?.configuration?.shade ?? shade,
+    theme
+  ),
+  fontFamily: theme.fonts.fontFamily,
+  fontSize: VARIANTS_SIZES[field?.configuration?.variant ?? variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant],
+  fontWeight: WEIGHTS[field?.configuration?.weight ?? weight] || WEIGHTS[DEFAULT_PROPS.weight],
+  margin: 0
+});

package/lib/components/UTLabel/utils.js

@@ -0,0 +1,5 @@
+export const markdownFormat = content =>
+  content
+    ?.toString()
+    .replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n')
+    .replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;

package/lib/components/UTMenu/components/ListView/index.js

@@ -46,7 +46,7 @@ class ListView extends PureComponent {
   };
 
   render() {
-    const { filteredOptions, ItemSeparatorComponent } = this.props;
+    const { filteredOptions, ItemSeparatorComponent, ListEmptyComponent } = this.props;
     const { style } = this.state;
 
     return (
@@ -57,6 +57,7 @@ class ListView extends PureComponent {
         keyboardShouldPersistTaps="always"
         renderItem={this.renderItem}
         ItemSeparatorComponent={ItemSeparatorComponent}
+        ListEmptyComponent={ListEmptyComponent}
       />
     );
   }

package/lib/components/UTMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, View } from 'react-native';
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
@@ -24,6 +24,7 @@ const UTMenu = ({
   styles: propStyles,
   MenuOptionComponent = MenuOption,
   ItemSeparatorComponent,
+  ListEmptyComponent,
   maxHeight,
   isMultiple,
   autoCompletePlaceholder,
@@ -102,11 +103,11 @@ const UTMenu = ({
 
   const handleQueryChange = value => {
     setQuery(value);
-    onQueryChange(value);
+    onQueryChange?.(value);
   };
 
   return (
-    <>
+    <Fragment>
       <TouchableOpacity
         disabled={disabled}
         onPress={isOpen ? closeMenu : openMenu}
@@ -153,6 +154,7 @@ const UTMenu = ({
               usableWindowHeight={usableWindowHeight}
               filteredOptions={filteredOptions}
               ItemSeparatorComponent={ItemSeparatorComponent}
+              ListEmptyComponent={ListEmptyComponent}
               MenuOptionComponent={MenuOptionComponent}
               handleOptionPress={handleOptionPress}
               onPress={onPress}
@@ -164,7 +166,7 @@ const UTMenu = ({
           </KeyboardAvoidingView>
         </View>
       </Modal>
-    </>
+    </Fragment>
   );
 };
 

package/lib/index.js

@@ -59,6 +59,7 @@ export { default as Loading } from './components/Loading';
 export { default as UTLoading } from './components/UTLoading';
 // Text
 export { default as Label } from './components/Label';
+export { default as UTLabel } from './components/UTLabel';
 export { default as TransitionText } from './components/TransitionText';
 // Theming
 export * from './theming';

package/lib/theming/DefaultTheme.js

@@ -113,6 +113,94 @@ const DefaultTheme = {
       iconSize: 15
     },
     passwordIcons: {}
+  },
+  Palette: {
+    dark: {
+      '01': '#575757',
+      '02': '#4A4A4A',
+      '03': '#3D3D3D',
+      '04': '#313130',
+      '05': '#0F0F0F'
+    },
+    gray: {
+      '01': '#BDBDBD',
+      '02': '#B0B0B0',
+      '03': '#969696',
+      '04': '#787878',
+      '05': '#646464'
+    },
+    light: {
+      '01': '#FFFFFF',
+      '02': '#FCFBFA',
+      '03': '#F6F6F5',
+      '04': '#E7E7E7',
+      '05': '#C9C9C9'
+    },
+    success: {
+      '01': '#EEF9E6',
+      '02': '#D3F0C0',
+      '03': '#80D249',
+      '04': '#3F8411',
+      '05': '#245702'
+    },
+    error: {
+      '01': '#FFF0EB',
+      '02': '#FED9CE',
+      '03': '#FD906F',
+      '04': '#D03607',
+      '05': '#852001'
+    },
+    warning: {
+      '01': '#FFF9E6',
+      '02': '#FFEFC1',
+      '03': '#FED24F',
+      '04': '#A86600',
+      '05': '#6F4708'
+    },
+    information: {
+      '01': '#EBFAFD',
+      '02': '#CEF3FB',
+      '03': '#6BDBF3',
+      '04': '#037C96',
+      '05': '#025F73'
+    },
+    actions: {
+      accent: {
+        '01': '#E7F0EE',
+        '02': '#C3D9D5',
+        '03': '#4A8D83',
+        '04': '#0D6759',
+        '05': '#0D6759'
+      },
+      neutral: {
+        '01': '#E8ECED',
+        '02': '#C6D0D3',
+        '03': '#54737B',
+        '04': '#1B444F',
+        '05': '#1B444F'
+      },
+      error: {
+        '01': '#FFEBEE',
+        '02': '#FECED5',
+        '03': '#FD6F85',
+        '04': '#E80C2C',
+        '05': '#A0041B'
+      },
+      success: {
+        '01': '#EEF9E6',
+        '02': '#D3F0C0',
+        '03': '#80D249',
+        '04': '#3F8411',
+        '05': '#245702'
+      },
+      negative: {
+        '01': 'rgba(255, 255, 255, 0.1)',
+        '02': 'rgba(255, 255, 255, 0.25)',
+        '03': 'rgba(255, 255, 255, 0.5)',
+        '04': '#FFFFFF',
+        '05': '#FFFFFF'
+      }
+    }
   }
 };
 

package/package.json

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