etendo-ui-library 1.0.25 → 1.0.26

package/.ondevice/storybook.requires.js

@@ -24,13 +24,10 @@ if (parameters) {
   addParameters(parameters);
 }
 
-// temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated
-try {
-  argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
-} catch {}
+argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
 
 const getStories = () => {
-  return [require('../components/**/*.stories')];
+  return [require('../components/**/*.stories.tsx')];
 };
 
 configure(getStories, module, false);

package/components/input/Input.stories.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+import Input  from '../input/Input';
+import {InputProps} from './Input.types';
+
+const meta: Meta = 
+{
+  title: 'Input',
+  component: Input,
+  argTypes:{}
+}
+
+const Template: Story<InputProps> = (args) => <Input{...args}/>
+
+export default meta;
+export const OnlyRead  = Template.bind({})
+export const Picker = Template.bind({})
+export const SearchPressable = Template.bind({})
+export const SearchTextInput = Template.bind({})
+export const TextPressable = Template.bind({})
+export const TextInput = Template.bind({})
+
+OnlyRead.args =
+{
+  titleLabel:'Only Read',
+  helperText:'',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'27/04/2022',
+  numberOfLines: 1,
+  typeField:'onlyRead',
+  isError:true,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+}
+
+Picker.args =
+{
+  titleLabel:'Picker',
+  helperText:'Only characters',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'',
+  numberOfLines: 1,
+  typeField:'picker',
+  isError:false,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+}
+
+SearchPressable.args = 
+{
+  titleLabel:'Search Presseable',
+  helperText:'Only characters',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'',
+  numberOfLines: 1,
+  typeField:'searchPressable',
+  isError:false,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+} 
+
+SearchTextInput.args =
+{
+  titleLabel:'Search TextInput',
+  helperText:'Only characters',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'',
+  numberOfLines: 1,
+  typeField:'searchTextInput',
+  isError:false,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+}
+
+TextPressable.args =
+{
+  titleLabel:'Text Pressable',
+  helperText:'Only characters',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'',
+  numberOfLines: 5,
+  typeField:'textPressable',
+  isError:false,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+}
+
+
+TextInput.args =
+{
+  titleLabel:'Text Input',
+  helperText:'Only characters',
+  placeholder:'Write a password',
+  disabled:false,
+  value:'',
+  numberOfLines: 5,
+  typeField:'textInput',
+  isError:false,
+  onPress:()=> {console.log('Press Field')},
+  onChangeText:(text)=>console.log(text),
+  onFocus:()=> {console.log('On Focus')},
+  onBlur:()=> {console.log('On Blur')},
+}

package/components/input/Input.style.ts

@@ -0,0 +1,190 @@
+import {StyleSheet, TextStyle, ViewStyle} from 'react-native';
+import {FONT_MEDIUM, FONT_REGULAR} from '../../styles/fonts';
+import {InputVariantsType, TypeInputStyleVariant} from './Input.types';
+import {
+  BLUE,
+  GREY_5,
+  GREY_60,
+  GREY_BLUE,
+  GREY_BLUE_50,
+  PURPLE_50,
+  RED,
+  RED_10,
+  WHITE,
+} from '../../styles/colors';
+
+export const inputVariants: InputVariantsType = {
+  onlyRead: {
+    field: {
+      type: 'text',
+      disabledField: true,
+      disabledSubmit: true,
+    },
+  },
+  picker: {
+    field: {
+      type: 'text',
+      disabledField: false,
+      disabledSubmit: true,
+      image: {
+        imgHeight: 4,
+        imgWidth: 6,
+        imgRoute: require('../../assets/images/icons/arrowPicker.png'),
+      },
+    },
+  },
+  textInput: {
+    field: {
+      type: 'textInput',
+      disabledField: true,
+      disabledSubmit: false,
+    },
+  },
+  textPressable: {
+    field: {
+      type: 'text',
+      disabledField: false,
+      disabledSubmit: false,
+    },
+  },
+  searchTextInput: {
+    field: {
+      type: 'textInput',
+      disabledField: true,
+      disabledSubmit: false,
+      image: {
+        imgHeight: 12,
+        imgWidth: 13,
+        imgRoute: require('../../assets/images/icons/search.png'),
+        imgMarginRight: 5,
+      },
+    },
+  },
+  searchPressable: {
+    field: {
+      type: 'text',
+      disabledField: false,
+      disabledSubmit: false,
+      image: {
+        imgHeight: 12,
+        imgWidth: 13,
+        imgRoute: require('../../assets/images/icons/search.png'),
+        imgMarginRight: 5,
+      },
+    },
+  },
+};
+
+const defaultTitle:TextStyle = {
+  color: BLUE,
+  fontSize: 14,
+  //fontFamily: FONT_MEDIUM,
+  marginBottom:5,
+}
+
+const defaultField:ViewStyle = 
+{
+  backgroundColor: WHITE,
+  borderWidth: 1,
+  borderColor: BLUE,
+  borderRadius: 3,
+  flexDirection: 'row',
+  alignItems:'center'
+}
+
+const defaultText:TextStyle =
+{
+  flex: 1,
+  paddingVertical: 5,
+  paddingLeft: 7,
+  color: BLUE,
+  fontSize: 14,
+  fontWeight: '500',
+ // fontFamily: FONT_MEDIUM,
+}
+
+const defaultTextPlaceholder:TextStyle =
+{
+  flex: 1,
+  paddingVertical: 5,
+  paddingLeft: 7,
+  color: GREY_BLUE,
+  fontSize: 14,
+  fontWeight: '500',
+  // fontFamily: FONT_MEDIUM,
+}
+
+const defaultHelperText:TextStyle =
+{
+  color: GREY_60,
+  fontSize: 14,
+  // fontFamily: FONT_REGULAR,
+}
+
+export const inputStyleVariants: TypeInputStyleVariant = {
+  default: {
+    titleStyle: defaultTitle,
+    fieldStyle: {
+      field: defaultField,
+      focus: {
+        borderColor: PURPLE_50,
+      },
+      textDefault: defaultText,
+      textPlaceholder: defaultTextPlaceholder
+    },
+    helperStyle: defaultHelperText,
+  },
+  destructive: {
+    titleStyle: defaultTitle,
+    fieldStyle: {
+      focus: {
+        borderColor: RED_10,
+      },
+      field: [defaultField,{borderColor: RED}],
+      textDefault: defaultText,
+      textPlaceholder: defaultTextPlaceholder
+    },
+    helperStyle: [defaultHelperText,{color: RED,}]
+  },
+  disabled: {
+    titleStyle: [defaultTitle,{color: GREY_BLUE_50}],  
+    fieldStyle: {
+      focus: {},
+      field: [defaultField,{borderColor: GREY_BLUE_50}],
+      textDefault: [defaultText,{color:GREY_BLUE_50}],
+      textPlaceholder: [defaultTextPlaceholder,{color:GREY_BLUE_50}]
+    },
+    helperStyle: [defaultHelperText,{color: GREY_BLUE_50}]
+  },
+  onlyRead: {
+    titleStyle: defaultTitle,
+    fieldStyle: {
+      field: [defaultField,{backgroundColor:GREY_5}],
+      focus: {},
+      textDefault: defaultText,
+      textPlaceholder: defaultTextPlaceholder,
+    },
+    helperStyle: defaultHelperText,
+  },
+};
+
+export const styles = StyleSheet.create({
+  inputContainer: {
+    flex: 1,
+  },
+  rowInputTitle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowHelperText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 5,
+  },
+  buttonContainerInputField: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: 7,
+    justifyContent: 'center',
+    height:'100%',
+  },
+});

package/components/input/Input.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Input from './Input';
+
+describe('Running Test for Input', () => {
+
+  it('Check Input Error', () => {
+  
+    const tree = renderer
+      .create(
+        <Input 
+        titleLabel='Test'
+        helperText='Only characters'
+        placeholder='Write a password'
+        disabled={false}
+        value='Render Test'
+        onPress={()=> {console.log('Press Field')}}
+        onChangeText={(text)=>console.log(text)}
+        onFocus={()=> {console.log('On Focus')}}
+        onBlur={()=> {console.log('On Blur')}}
+        typeField='searchTextInput'
+        isError={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/components/input/Input.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {View} from 'react-native';
+import {inputStyleVariants, inputVariants, styles} from './Input.style';
+import {InputProps} from './Input.types';
+import {InputTitle, InputField, InputHelperText} from './index';
+
+const Input = ({
+  value,
+  titleLabel,
+  titleImage,
+  helperText,
+  placeholder,
+  disabled,
+  maxLength,
+  numberOfLines,
+  typeField,
+  isError,
+  onPress,
+  onSubmit,
+  onFocus,
+  onBlur,
+  onChangeText,
+}:InputProps) => {
+  
+  const stateStyle = () => {
+    var style
+    if (typeField === 'onlyRead') {
+      style = inputStyleVariants.onlyRead;
+    } else if (disabled) {
+      style = inputStyleVariants.disabled;
+    } else if (isError) {
+      style = inputStyleVariants.destructive;
+    } else {
+      style = inputStyleVariants.default;
+    }
+    return style;
+  };
+
+  return (
+    <View style={styles.inputContainer}>
+      <InputTitle
+        disabled={disabled}
+        title={titleLabel}
+        image={titleImage}
+        styleTitle={stateStyle().titleStyle}
+      />
+      <InputField
+        disabled={disabled}
+        configField={inputVariants[typeField].field}
+        styleField={stateStyle().fieldStyle}
+        placeholder={placeholder}
+        value={value}
+        onPress={onPress}
+        onSubmit={onSubmit}
+        onFocus={onFocus ? onFocus : () => {}}
+        onBlur={onBlur ? onBlur : () => {}}
+        onChangeText={onChangeText}
+        maxLength={maxLength}
+        numberOfLines={numberOfLines}
+      />
+      <InputHelperText
+        label={helperText}
+        styleHelper={stateStyle().helperStyle}
+      />
+    </View>
+  );
+};
+
+export default Input;

package/components/input/Input.types.ts

@@ -0,0 +1,116 @@
+import {
+  ColorValue,
+  GestureResponderEvent,
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type InputFieldType = 'textInput' | 'text';
+
+export type InputTypeStyle =
+  | 'default'
+  | 'destructive'
+  | 'disabled'
+  | 'onlyRead';
+
+export type InputFieldVariants =
+  | 'onlyRead'
+  | 'picker'
+  | 'textInput'
+  | 'textPressable'
+  | 'searchTextInput'
+  | 'searchPressable';
+
+export type InputFieldConfigType = {
+  type: InputFieldType;
+  image?: ImageType;
+  width?: string | number;
+  height?: string | number;
+  disabledField?: boolean;
+  disabledSubmit?: boolean;
+  backgroundColor?: ColorValue;
+}
+
+export type InputVariantsType = Record<
+  InputFieldVariants,
+  {field: InputFieldConfigType}
+>
+
+export type ImageType = {
+  imgRoute?: ImageSourcePropType;
+  imgWidth?: string | number;
+  imgHeight?: string | number;
+  imgMarginRight?: string | number;
+}
+
+export type TypeInputStyleVariant = Record<
+  InputTypeStyle,
+  {
+    fieldStyle: {
+      field: ViewStyle | ViewStyle[];
+      focus: ViewStyle | ViewStyle[];
+      textDefault: TextStyle | TextStyle[];
+      textPlaceholder: TextStyle | TextStyle[];
+    };
+    titleStyle: TextStyle | TextStyle[];
+    helperStyle: TextStyle | TextStyle[];
+  }
+>
+
+export interface InputProps {
+  titleLabel?: string;
+  titleImage?: ImageType;
+  value: string;
+  helperText?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  isError?: boolean;
+  maxLength?: number;
+  numberOfLines?: number;
+  typeField: InputFieldVariants;
+  onPress?: (event: GestureResponderEvent) => void;
+  onSubmit?: (event: GestureResponderEvent) => void;
+  onChangeText?: (text: string) => void;
+  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+}
+
+export interface InputTitleProps {
+  title?: string;
+  image?: ImageType;
+  styleTitle: TextStyle | TextStyle[];
+  disabled?: boolean;
+}
+
+export interface InputHelperProps {
+  styleHelper:  TextStyle | TextStyle[];
+  label?: string;
+}
+
+export interface InputFieldProps {
+  disabled?: boolean;
+  value?: string;
+  placeholder?: string;
+  configField: InputFieldConfigType;
+  styleField: {
+    field: ViewStyle | ViewStyle[];
+    focus: ViewStyle | ViewStyle[];
+    textDefault: TextStyle| TextStyle[];
+    textPlaceholder: TextStyle| TextStyle[];
+  };
+  maxLength?: number;
+  numberOfLines?: number;
+  onPress?: (event: GestureResponderEvent) => void;
+  onSubmit?: (event: GestureResponderEvent) => void;
+  onChangeText?: (text: string) => void;
+  onFocus: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  onBlur: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+}
+
+export interface InputHelperProps {
+  styleHelper: TextStyle | TextStyle[];
+  label?: string;
+}

package/components/input/__snapshots__/Input.test.tsx.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Running Test for Input Check Input Error 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#202452",
+          "fontSize": 14,
+          "marginBottom": 5,
+        }
+      }
+    >
+      Test
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#F36A62",
+        "borderRadius": 3,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "height": 26,
+        "opacity": 1,
+      }
+    }
+  >
+    <TextInput
+      editable={true}
+      focusable={true}
+      multiline={true}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      placeholder="Write a password"
+      style={
+        Array [
+          Array [
+            Object {
+              "color": "#202452",
+              "flex": 1,
+              "fontSize": 14,
+              "fontWeight": "500",
+              "paddingLeft": 7,
+              "paddingVertical": 5,
+            },
+            Object {
+              "height": 26,
+            },
+          ],
+        ]
+      }
+      value="Render Test"
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginTop": 5,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#808080",
+            "fontSize": 14,
+          },
+          Object {
+            "color": "#F36A62",
+          },
+        ]
+      }
+    >
+      Only characters
+    </Text>
+  </View>
+</View>
+`;