@codeleap/mobile 1.4.0 → 1.5.0

package/src/components/Select/index.tsx

@@ -1,20 +1,20 @@
-import {  IconPlaceholder, useBooleanToggle, getNestedStylesByKey, useDefaultComponentStyle, TypeGuards } from '@codeleap/common'
+import { IconPlaceholder, useBooleanToggle, getNestedStylesByKey, useDefaultComponentStyle, TypeGuards } from '@codeleap/common'
 import React, { useMemo } from 'react'
 import { Modal, StyleSheet } from 'react-native'
 import { Button } from '../Button'
 import { Scroll } from '../Scroll'
 
-import {  InputLabel, TextInput } from '../TextInput'
+import { InputLabel, TextInput } from '../TextInput'
 import { Touchable } from '../Touchable'
 import { AnimatedView, View } from '../View'
-import { MobileSelectStyles } from './styles' 
+import { MobileSelectStyles } from './styles'
 import { CustomSelectProps } from './types'
 
 export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
   const {
     value,
     onValueChange,
-    label, 
+    label,
     styles = {},
     options,
     style,
@@ -44,22 +44,22 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
   })
 
   const inputStyles = useMemo(
-    () => getNestedStylesByKey('input', variantStyles), 
+    () => getNestedStylesByKey('input', variantStyles),
     [variantStyles],
   )
 
   const closeButtonStyles = useMemo(
-    () => getNestedStylesByKey('modalCloseButton', variantStyles), 
+    () => getNestedStylesByKey('modalCloseButton', variantStyles),
     [variantStyles],
   )
-  
+
   const ListComponent = scroll ? Scroll : View
-  
+
   const close = () => setModalVisibility()
   const select = (value) => {
-    
+
     onValueChange(value)
-    if (closeOnSelect){
+    if (closeOnSelect) {
       close()
     }
   }
@@ -72,9 +72,9 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     return TypeGuards.isString(display) ? display : ''
   }, [value, placeholder, options])
 
-  return <> 
-    <TextInput 
-      
+  return <>
+    <TextInput
+
       caretHidden
       value={selectedLabel}
       rightIcon={{
@@ -83,15 +83,17 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       editable={false}
       touchableWrapper
       innerWrapperProps={{
+        debugName: 'Select',
         onPress: close,
       }}
-      label={label} 
+      label={label}
+      debugName={'Select input'}
       styles={inputStyles}
       style={style}
       {...props}
     />
     <AnimatedView pointerEvents={'none'} transition='opacity' style={[
-      {      
+      {
         position: 'absolute',
         top: 0,
         right: 0,
@@ -99,9 +101,9 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
         bottom: 0,
       },
       variantStyles.backdrop,
-      isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],  
+      isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],
     ]} />
-    
+
     <Modal
       animationType='slide'
       transparent={true}
@@ -109,10 +111,10 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       onRequestClose={() => {
         setModalVisibility()
       }}
-      pointerEvents={isModalVisible ? 'auto': 'none'}
+      pointerEvents={isModalVisible ? 'auto' : 'none'}
     >
-      <Touchable       
-        onPress={close} 
+      <Touchable
+        onPress={close}
         style={{
           position: 'absolute',
           top: 0,
@@ -120,20 +122,22 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
           left: 0,
           bottom: 0,
         }}
+        debugName={`Close modal`}
       />
       <View style={variantStyles.modalWrapper}>
-       
+
         <View style={variantStyles.modalBox}>
           {
             (showClose || showLabelOnModal || header) && (
               <View style={variantStyles.modalHeader}>
                 {
-                  header ? header :  <>
+                  header ? header : <>
                     {showLabelOnModal && <InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
-                    {showClose && <Button 
-                      icon={modalCloseIconName as IconPlaceholder} 
-                      onPress={close} 
+                    {showClose && <Button
+                      icon={modalCloseIconName as IconPlaceholder}
+                      onPress={close}
                       styles={closeButtonStyles}
+                      debugName={'Close modal'}
                       {...closeButtonProps}
                     />}
                   </>
@@ -151,31 +155,30 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
                     selected: isSelected,
                     onPress: close,
                     styles: variantStyles,
-                
-                  }) 
+
+                  })
                 }
 
                 return <Touchable key={idx} style={[
-                  variantStyles.modalItem, 
+                  variantStyles.modalItem,
                   isSelected && variantStyles['modalItem:selected'],
-                ]} onPress={() => select(item.value)}>
-                  <InputLabel label={item.label} style={[variantStyles.modalItemText,   isSelected && variantStyles['modalItemText:selected']]}/>
+                ]} onPress={() => select(item.value)} debugName={`Select ${item.value}`}>
+                  <InputLabel label={item.label} style={[variantStyles.modalItemText, isSelected && variantStyles['modalItemText:selected']]}/>
                 </Touchable>
               })
             }
           </ListComponent>
-       
+
           {
             footer && <View style={variantStyles.modalFooter}>
               {footer}
             </View>
-          } 
+          }
         </View>
       </View>
     </Modal>
   </>
 }
 
-
 export * from './styles'
 export * from './types'

package/src/components/Select/styles.ts

@@ -1,6 +1,6 @@
 import { assignTextStyle, ButtonParts, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
 import { MobileModalStyles } from '../Modal'
-type ModalParts = 
+type ModalParts =
   'Box' |
   'Wrapper' |
   'Header' |
@@ -13,12 +13,12 @@ type ModalParts =
   'LabelText' |
   `CloseButton${Capitalize<ButtonParts>}`
 
-type InputParts = `input${Capitalize<TextInputComposition>}` 
+type InputParts = `input${Capitalize<TextInputComposition>}`
 
-export type MobileSelectParts = InputParts 
-| `backdrop` 
-| `backdrop:visible` 
-| `backdrop:hidden` 
+export type MobileSelectParts = InputParts
+| `backdrop`
+| `backdrop:visible`
+| `backdrop:hidden`
 | `modal${ModalParts}`
 
 export type MobileSelectComposition = MobileSelectParts
@@ -56,7 +56,7 @@ export const MobileSelectStyles = {
       // ...MobileModalStyles.default(theme).overlay,
       zIndex: 10,
       flex: 1,
-   
+
       backgroundColor: theme.colors.black,
     },
     'backdrop:hidden': {

package/src/components/Select/types.ts

@@ -8,24 +8,24 @@ import { StylesOf } from '../../types/utility'
 import { ButtonProps } from '../Button'
 import { TextInputProps } from '../TextInput'
 import { MobileSelectComposition, MobileSelectStyles } from './styles'
-  
+
 export type SelectRenderFNProps<T> = FormTypes.Options<T>[number] & {
-  styles: StylesOf<MobileSelectComposition>;
-  onPress: () => void;
-  selected?: boolean;
-};
-  
-export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element;
-  
+  styles: StylesOf<MobileSelectComposition>
+  onPress: () => void
+  selected?: boolean
+}
+
+export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
+
 export type CustomSelectProps<T> = {
-    value: T;
-    placeholder?: FormTypes.Label;
-    label?: FormTypes.Label;
-    options?: FormTypes.Options<T>;
-    onDropdownToggle?: (isOpen?: boolean) => void;
-    onValueChange?: (value: T) => void;
-    renderItem?: SelectRenderFN<T>;
-    styles?: StylesOf<MobileSelectComposition>;
+    value: T
+    placeholder?: FormTypes.Label
+    label?: FormTypes.Label
+    options?: FormTypes.Options<T>
+    onDropdownToggle?: (isOpen?: boolean) => void
+    onValueChange?: (value: T) => void
+    renderItem?: SelectRenderFN<T>
+    styles?: StylesOf<MobileSelectComposition>
     style?: any
     arrowIconName?: IconPlaceholder
     scroll?: boolean
@@ -37,5 +37,5 @@ export type CustomSelectProps<T> = {
     showClose?: boolean
     modalLabel?: string
     closeButtonProps?: Partial<ButtonProps>
-  } & ComponentVariants<typeof MobileSelectStyles> & TextInputProps;
-  
+  } & ComponentVariants<typeof MobileSelectStyles> & TextInputProps
+

package/src/components/Slider/Mark.tsx

@@ -10,22 +10,22 @@ export const SliderMark: React.FC<SliderMarkProps> = ({
   variantStyles,
 }) => {
   const { labels = [], showMarks } = sliderProps
-  
+
   const l = labels?.[index] || ''
-  
+
   const isFirst = index === 0
   const isLast = index === labels.length - 1
-  
+
   const centerAdjustWord = -(l.length * 2)
-  
+
   const markStyles: StyleProp<any> = {}
-  
+
   const labelStyles: StyleProp<any> = {}
-  
+
   if (!isFirst && !isLast) {
     labelStyles.left = centerAdjustWord
   }
-  
+
   if (isLast) {
     labelStyles.right = -20
     markStyles.right = -10

package/src/components/Slider/Thumb.tsx

@@ -26,4 +26,4 @@ export const ThumbTooltip = ({ children, visible, styles, variantStyles }) => {
     </View>
   )
 }
-  
+

package/src/components/Slider/index.tsx

@@ -14,7 +14,7 @@ import { SliderProps } from './types'
 
 export const Slider: React.FC<SliderProps> = (sliderProps) => {
   const [tooltipVisible, setTooltipVisible] = React.useState(false)
-  
+
   const {
     debounce,
     onValueChange,
@@ -29,39 +29,39 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
     variants,
     ...props
   } = sliderProps
-  
+
   const changeDebounce = typeof debounce === 'number' ? debounce : 100
-  
+
   const debounceTimeout = useRef(null)
   const toggleTooltipTimeout = useRef(null)
   const valueRef = useRef(value)
-  
+
   const variantStyles = useDefaultComponentStyle('Slider', {
     variants,
   })
-  
+
   function setValue() {
     onValueChange(valueRef.current)
   }
-  
+
   function onChange(val) {
     let eventValue = val
-  
+
     if (Array.isArray(val) && typeof value === 'number') {
       eventValue = val[0]
     }
-  
+
     if (eventValue === value) return
-  
+
     valueRef.current = eventValue as number
-  
+
     if (debounceTimeout.current) clearTimeout(debounceTimeout.current)
-  
+
     debounceTimeout.current = setTimeout(() => {
       setValue()
     }, changeDebounce)
   }
-  
+
   return (
     <View style={[variantStyles.wrapper, style]}>
       <InputLabel label={label} style={[variantStyles.label, styles.label]} />
@@ -69,7 +69,7 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
         value={value}
         onSlidingStart={() => {
           if (toggleTooltipTimeout.current) { clearTimeout(toggleTooltipTimeout.current) }
-  
+
           setTooltipVisible(true)
         }}
         onSlidingComplete={() => {
@@ -120,4 +120,4 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
     </View>
   )
 }
-  
+

package/src/components/Slider/types.ts

@@ -3,23 +3,23 @@ import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/l
 import { StylesOf } from '../../types/utility'
 import { ViewProps } from '../View'
 export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & {
-    debounce?: number;
-    labels: string[];
-    value: number;
-    valueOverThumb?: boolean;
-    showMarks?: boolean;
-    onValueChange: (val: number) => void;
-    label: Form.Label;
-    formatTooltip?: (val: number) => React.ReactNode;
-    variants?: ComponentVariants<typeof SliderStyles>['variants'];
-    styles?: StylesOf<SliderComposition>;
-    style?: ViewProps['style'];
+    debounce?: number
+    labels: string[]
+    value: number
+    valueOverThumb?: boolean
+    showMarks?: boolean
+    onValueChange: (val: number) => void
+    label: Form.Label
+    formatTooltip?: (val: number) => React.ReactNode
+    variants?: ComponentVariants<typeof SliderStyles>['variants']
+    styles?: StylesOf<SliderComposition>
+    style?: ViewProps['style']
     tooltipVisibilityWindow?: number
-};
-  
+}
+
 export type SliderMarkProps = {
-    sliderProps: SliderProps;
-    index: number;
-    styles: SliderProps['styles'];
-    variantStyles: SliderProps['styles'];
-};
+    sliderProps: SliderProps
+    index: number
+    styles: SliderProps['styles']
+    variantStyles: SliderProps['styles']
+}

package/src/components/Switch.tsx

@@ -17,14 +17,13 @@ import { View } from './View'
 type NativeSwitchProps = Omit<
   ComponentPropsWithRef<typeof NativeSwitch>,
   'thumbColor' | 'trackColor'
->;
+>
 type SwitchProps = NativeSwitchProps & {
-  variants?: ComponentVariants<typeof SwitchStyles>['variants'];
-  label?: ReactNode;
-  styles?: StylesOf<SwitchComposition>;
-  validate?: FormTypes.ValidatorFunctionWithoutForm | string;
-};
-
+  variants?: ComponentVariants<typeof SwitchStyles>['variants']
+  label?: ReactNode
+  styles?: StylesOf<SwitchComposition>
+  validate?: FormTypes.ValidatorFunctionWithoutForm | string
+}
 
 export const Switch = forwardRef<NativeSwitch, SwitchProps>(
   (switchProps, ref) => {

package/src/components/Text.tsx

@@ -9,9 +9,9 @@ import {
 import { Text as NativeText } from 'react-native'
 
 export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
-  text?: string;
-  variants?: ComponentVariants<typeof TextStyles>['variants'];
-} & BaseViewProps;
+  text?: string
+  variants?: ComponentVariants<typeof TextStyles>['variants']
+} & BaseViewProps
 
 export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
   const { variants = [], text, style, ...props } = textProps

package/src/components/TextInput.tsx

@@ -11,14 +11,14 @@ import {
 } from '@codeleap/common'
 import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { Text } from './Text'
-import { View, ViewProps  } from './View'
+import { View, ViewProps } from './View'
 import { Button } from './Button'
 import { StylesOf } from '../types/utility'
 import { Icon } from './Icon'
 import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
 import { Touchable, TouchableProps } from './Touchable'
 
-type IconProp = { name: IconPlaceholder, action?: () => void }
+type IconProp = { name: IconPlaceholder; action?: () => void }
 
 type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
 
@@ -26,13 +26,13 @@ export type TextInputProps =
   ComponentVariants<typeof TextInputStyles> &
   Omit<NativeProps, 'value'> &
   {
-    multiline?: boolean;
-    onChangeText?: (text: string) => void;
-    disabled?: boolean;
-    edited?: boolean;
-    type?: string;
+    multiline?: boolean
+    onChangeText?: (text: string) => void
+    disabled?: boolean
+    edited?: boolean
+    type?: string
     label?: React.ReactNode
-
+    debugName: string
     leftIcon?: IconProp
     rightIcon?: IconProp
     styles?: StylesOf<TextInputComposition>
@@ -42,7 +42,7 @@ export type TextInputProps =
     visibilityToggle?: boolean
     touchableWrapper?: boolean
     innerWrapperProps?: TouchableProps | ViewProps
-  };
+  }
 
 export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
   const {
@@ -65,6 +65,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     visibilityToggle,
     touchableWrapper,
     innerWrapperProps,
+    debugName,
     ...props
   } = rawprops
 
@@ -102,9 +103,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     if (onChangeText) onChangeText(text)
   }
 
-  useImperativeHandle(inputRef, () => ({...input.current, focus: () => {
+  useImperativeHandle(inputRef, () => ({ ...input.current, focus: () => {
     input.current?.focus?.()
-  }, isTextInput: true}))
+  }, isTextInput: true }))
 
   const { showError, error } = useValidate(value, validate)
 
@@ -142,7 +143,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       style={getStyles('wrapper')}
     >
       <InputLabel label={label} style={getStyles('label')} />
-      <InnerWrapper style={getStyles('innerWrapper')} {...innerWrapperProps}>
+      <InnerWrapper debugName={debugName} style={getStyles('innerWrapper')} {...innerWrapperProps}>
         <InputIcon {...leftIcon} style={leftIconStyle} />
         <InputElement
           ref={input}
@@ -182,7 +183,7 @@ export const FormError = ({ message, ...props }) => {
 export const InputIcon: React.FC<{ style: any } & IconProp> = ({ name, style, action }) => {
   if (!name) return null
   if (action) {
-    return <Button icon={name} onPress={() => action()} styles={{
+    return <Button icon={name} debugName={`${name} icon button`} onPress={() => action()} styles={{
       icon: style,
     }} variants={['icon']} />
   }

package/src/components/Touchable.tsx

@@ -15,13 +15,13 @@ export type TouchableProps = Omit<
   ComponentPropsWithoutRef<typeof NativeTouchable>,
   'onPress'
 > & {
-  variants?: ComponentVariants<typeof ViewStyles>['variants'];
-  component?: any;
-  ref?: React.Ref<NativeTouchable>;
-  debugName?: string;
-  debugComponent?: string;
-  onPress?: AnyFunction;
-} & BaseViewProps;
+  variants?: ComponentVariants<typeof ViewStyles>['variants']
+  component?: any
+  ref?: React.Ref<NativeTouchable>
+  debugName: string
+  debugComponent?: string
+  onPress?: AnyFunction
+} & BaseViewProps
 
 export const Touchable: React.FC<TouchableProps> = forwardRef<
   NativeTouchable,

package/src/components/View.tsx

@@ -11,9 +11,9 @@ import { View as NativeView, ViewStyle } from 'react-native'
 
 export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
   ComponentVariants<typeof ViewStyles> & {
-    ref?: any;
-    component?: any;
-  } & BaseViewProps;
+    ref?: any
+    component?: any
+  } & BaseViewProps
 
 export const View: React.FC<ViewProps> = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
   const {

package/src/modules/documentPicker.ts

@@ -1,8 +1,7 @@
 // @ts-ignore
-import  DP from 'react-native-document-picker'
-import * as  DocumentPickerTypes from './types/documentPicker'
-
+import DP from 'react-native-document-picker'
+import * as DocumentPickerTypes from './types/documentPicker'
 
 export const DocumentPicker = DP as DocumentPickerTypes.DocumentPicker
 
-export {default as ImageCropPicker} from 'react-native-image-crop-picker'
+export { default as ImageCropPicker } from 'react-native-image-crop-picker'