@codeleap/mobile 1.0.0

package/src/components/Slider.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react'
+import {
+    Slider as RNSlider
+} from '@miblanchard/react-native-slider'
+import { SliderProps as RNSliderProps} from  '@miblanchard/react-native-slider/lib/types'
+import { useRef } from 'react'
+import { StyleProp, StyleSheet } from 'react-native'
+import { Text } from './Text'
+import { View, ViewProps } from './View'
+import { ComponentVariants, Form, SliderComposition, SliderStyles, useComponentStyle, useStyle } from '@codeleap/common'
+import { InputLabel } from './TextInput'
+import { StylesOf } from '../types/utility'
+
+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']
+}
+
+type SliderMarkProps = {
+    sliderProps: SliderProps
+    index: number
+    styles:SliderProps['styles']
+    variantStyles:SliderProps['styles']
+
+}
+
+const SliderMark:React.FC<SliderMarkProps> = ({index, sliderProps,styles,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
+    }
+    return <>
+        {
+            showMarks ? (
+
+            <View style={[
+                markStyles,
+                variantStyles.mark,
+                styles.mark,
+            ]}/>) : null
+        }
+      {l ?
+        (<Text 
+     
+            style={[
+                labelStyles,
+                variantStyles.trackLabels,
+                styles.trackLabels,
+            ]} 
+                text={l}
+            />) : null
+        }
+    </>
+} 
+
+const ThumbTooltip = ({children,visible, styles, variantStyles}) => {
+   
+    
+    return <View style={[
+        StyleSheet.flatten([variantStyles.tooltip, styles.tooltip ]),
+        visible ? 
+            StyleSheet.flatten([variantStyles['tooltip:visible'], styles['tooltip:visible'] ])  :
+            StyleSheet.flatten([variantStyles['tooltip:hidden'], styles['tooltip:hidden'] ])
+    ]}> 
+        <Text style={[variantStyles.tooltipText,styles.tooltipText]} text={children}  />
+        <View style={[variantStyles.tooltipArrow,styles.tooltipArrow,]}/>
+    </View> 
+}
+
+export const Slider:React.FC<SliderProps> = (sliderProps) => {
+    const [tooltipVisible, setTooltipVisible] = React.useState(false)
+
+    const {
+        
+        debounce,
+        onValueChange,
+        labels,
+        value,
+        label,
+        valueOverThumb,
+        formatTooltip,
+        styles = {},
+        style,
+        variants,
+        ...props
+    } = sliderProps
+
+    const changeDebounce = typeof debounce === 'number' ? debounce : 100
+
+    const debounceTimeout = useRef(null)
+    const toggleTooltipTimeout = useRef(null)
+    const valueRef = useRef(value)
+
+    const variantStyles = useComponentStyle('Slider', {
+        variants
+    })  
+
+    function setValue(){
+        onValueChange(valueRef.current)
+    }
+
+    function onChange(val){
+         
+        let eventValue = val
+
+        if(Array.isArray(val)){
+            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]}/>
+        <RNSlider
+            value={value}
+            
+            onSlidingStart={() => {
+                if(toggleTooltipTimeout.current) clearTimeout(toggleTooltipTimeout.current)
+
+                setTooltipVisible(true)
+            }}
+            
+            onSlidingComplete={() => {
+                toggleTooltipTimeout.current = setTimeout(() => setTooltipVisible(false),830)
+            }}
+            
+            onValueChange={onChange}       
+            
+            renderAboveThumbComponent={(idx) => {
+                if(!valueOverThumb || typeof value !== 'number') return null
+
+                return <ThumbTooltip visible={tooltipVisible} variantStyles={variantStyles} styles={styles}>
+                    {formatTooltip ? formatTooltip(value) :  value.toString()}
+                </ThumbTooltip> 
+            }}
+            
+            renderTrackMarkComponent={(idx) => <SliderMark 
+                index={idx} 
+                sliderProps={sliderProps}
+                styles={styles}
+                variantStyles={variantStyles} 
+            />}
+            
+            maximumValue={labels ? labels.length - 1 : 10}
+            
+            trackMarks={labels ? Object.keys(labels).map((z) => parseInt(z)) : []}
+            
+            containerStyle={[variantStyles.inputContainer, styles.inputContainer] as any}
+            
+            thumbStyle={StyleSheet.flatten([variantStyles.handle, styles.handle]) as any}
+            
+            trackStyle={[variantStyles.track, styles.track] as any}
+            
+            minimumTrackTintColor={
+                StyleSheet.flatten([variantStyles.selectedTrack, styles.selectedTrack])?.backgroundColor
+            }
+            {...props}
+        />
+    </View>
+}

package/src/components/Switch.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { SwitchStyles,SwitchComposition, ComponentVariants, useComponentStyle, StylesOf, useStyle, FormTypes, useValidate } from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { StyleSheet, Switch as NativeSwitch } from 'react-native'
+import { InputLabel,  FormError} from './TextInput'
+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.ValidatorFunction | string
+} 
+
+export const Switch = forwardRef<NativeSwitch,SwitchProps>((switchProps,ref) => {
+    const  {
+        variants = [],
+        style = {},
+        styles = {},
+        validate,
+        label,
+        value,
+        ...props
+    } = switchProps
+
+    const variantStyles = useComponentStyle('Switch', {
+        variants,
+     
+    })
+    const {error,showError} = useValidate(switchProps.value, validate)
+    function getStyles(key:SwitchComposition){
+        return [
+            variantStyles[key],
+            styles[key],
+            key === 'wrapper' ? style : {},
+            showError ? variantStyles[key + ':error']  : {}, 
+            showError ? styles[key + ':error']  : {}, 
+            value ? variantStyles[key + ':on'] : {},
+            value ? styles[key + ':on'] : {},
+            switchProps.disabled ? variantStyles[key + ':disabled'] : {},
+            switchProps.disabled ? styles[key + ':disabled'] : {},
+         
+        ]
+    }
+
+    const inputStyles = getStyles('input')
+
+    const {color,backgroundColor} = StyleSheet.flatten(inputStyles)
+    const {Theme} = useStyle()
+
+    const thumbColor = color || Theme.colors.primary
+    const trackColor =  backgroundColor || Theme.colors.gray
+    return <View style={getStyles('wrapper')}>
+        <View style={getStyles('inputWrapper')}>
+
+            <NativeSwitch 
+
+                thumbColor={thumbColor}
+                trackColor={{ false:trackColor,  true: trackColor}}
+                ios_backgroundColor={trackColor}
+                value={value}
+                {...props}
+            />
+            <InputLabel label={label} style={getStyles('label')}/>
+        </View>
+        <FormError message={error.message} style={getStyles('error')}/>
+    </View>
+})

package/src/components/Text.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentVariants, useComponentStyle, BaseViewProps, TextStyles } from '@codeleap/common'
+import { Text as NativeText } from  'react-native'
+
+
+export type TextProps =
+  ComponentPropsWithoutRef<typeof NativeText> & 
+{
+  text?: string,
+  variants?: ComponentVariants <typeof TextStyles>['variants'],
+} & BaseViewProps
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { 
+    variants = [], 
+    text,
+    style,
+    ...props
+  } = textProps
+  
+  const variantStyles = useComponentStyle('Text', {
+    variants,
+    rootElement : 'text'
+  })
+  
+  const styles = [variantStyles.text, style]
+  return <NativeText  {...props} style={styles} ref={ref}> 
+    {text}
+  </NativeText>
+})

package/src/components/TextInput.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react'
+import { 
+    ComponentVariants,
+    FormTypes,
+    IconPlaceholder,
+    TextInputComposition,
+    TextInputStyles,
+    useBooleanToggle,
+    useComponentStyle,
+    useValidate  
+} from '@codeleap/common';
+  import { ComponentPropsWithoutRef,  forwardRef, useImperativeHandle, useRef, useState } from 'react'
+  import { Text } from './Text';
+  import { View  } from './View';
+  import { Button } from './Button';
+  import { StylesOf } from '../types/utility';
+  import { Icon } from './Icon';
+  import {NativeSyntheticEvent, TextInput as NativeTextInput, TextInputChangeEventData} from 'react-native'
+ 
+  type IconProp = {name: IconPlaceholder, action?:() => void}
+
+  type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
+  
+  export type TextInputProps = 
+    ComponentVariants<typeof TextInputStyles> & 
+    Omit<NativeProps, 'value'> &
+    {
+      multiline?: boolean;
+      onChangeText?: (text: string) => void;
+      disabled?: boolean;
+      edited?: boolean;
+      type?: string;
+      label?:React.ReactNode
+      
+      leftIcon?:IconProp
+      rightIcon?:IconProp
+      styles?: StylesOf<TextInputComposition>
+      validate?: FormTypes.ValidatorFunction | string
+      value?:string
+      password?:boolean
+      visibilityToggle?: boolean
+    };
+  
+  export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
+    const {
+      onChange,
+      type,
+      value,
+      onChangeText,
+      disabled,
+      edited,
+      onFocus,
+      onBlur,
+      multiline,
+      responsiveVariants,
+      variants,
+      label,
+      leftIcon,
+      rightIcon,
+      styles,
+      validate,
+      password,
+      visibilityToggle,
+    
+      ...props
+    } = rawprops
+  
+    const [_ig, setFocus] = useState(false)
+    const [editedState, setEdited] = useState(edited)
+    
+    const input = useRef<any>(null)
+    const [textIsVisible, setTextVisible] = useBooleanToggle(false)
+    const variantStyles =useComponentStyle('TextInput', {
+      variants,
+      responsiveVariants,
+      styles,
+    })
+    const InputElement = NativeTextInput
+  
+    const handleBlur:TextInputProps['onBlur'] = (e) => {
+      if (!editedState && value) setEdited(true)
+      setFocus(false)
+  
+      if (onBlur) {
+        onBlur(e)
+      }
+    }
+  
+    const handleFocus:TextInputProps['onFocus'] = (e) => {
+      setFocus(true)
+      if (onFocus) {
+        onFocus(e)
+      }
+    }
+  
+    const handleChange = (event:NativeSyntheticEvent<TextInputChangeEventData>) => {
+      const text = event.nativeEvent.text
+  
+      if (onChange) onChange(event)
+      if (onChangeText) onChangeText(text)
+    }
+    
+  
+
+  
+    useImperativeHandle(inputRef, () => input.current)
+  
+    const {showError, error} = useValidate(value, validate)
+  
+  
+    const leftIconStyle = {
+      ...variantStyles.icon,
+      ...(showError ? variantStyles['icon:error'] : {} ),
+      ...variantStyles.leftIcon, 
+      ...(showError ? variantStyles['leftIcon:error'] : {} ),
+    }
+    
+    const rightIconStyle = {
+      ...variantStyles.icon,
+      ...(showError ? variantStyles['icon:error'] : {} ),
+      ...variantStyles.rightIcon, 
+      ...(showError ? variantStyles['rightIcon:error'] : {} ),
+    }
+    
+    function getStyles(key:TextInputComposition){
+     const requestedStyles = [variantStyles[key], showError ? variantStyles[key + ':error'] : {}]
+      return requestedStyles
+    }
+
+    
+    return (
+      <View
+        style={getStyles('wrapper')}
+      >
+        <InputLabel label={label} style={getStyles('label')}/>
+  
+        <View style={getStyles('innerWrapper')}>
+  
+    
+          <InputIcon {...leftIcon} style={leftIconStyle}/>
+          <InputElement
+            ref={input}
+            secureTextEntry={password && !textIsVisible}
+            onChange={handleChange}
+            value={value}
+            editable={disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+            style={getStyles('textField')}
+          />
+          {
+            visibilityToggle ? 
+              <InputIcon  name={
+                  (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
+              } action={() => setTextVisible()} style={rightIconStyle}/>
+              :
+              <InputIcon {...rightIcon} style={rightIconStyle}/>
+          }
+        </View>
+        
+        <FormError message={error.message} style={{
+          ...variantStyles.error,
+         
+        }}/>
+          
+        
+      </View>
+    )
+  })
+  
+  export const FormError = ({message, ...props}) => {
+  
+    
+    if (['number', 'string', 'undefined'].includes(typeof message)){
+      return  <Text text={`${message||' '}`} variants={['p2', 'marginTop:1']} {...props}/> 
+    }
+    return message
+  }
+  export const InputIcon:React.FC<{style:any} & IconProp> = ({name, style, action}) => {
+    if (!name) return null
+  
+    if (action){
+    
+      return <Button icon={name} onPress={() => action()}  styles={{
+        icon: style,
+      }} variants={['icon']}/>
+  
+    }
+  
+    return <Icon name={name} style={style}/>
+  }
+  export const InputLabel = ({label, style}) => {
+    if (!label) return null
+    
+    switch (typeof label){
+      case 'string':
+        return <Text variants={['p2']} style={style} text={label}/>
+      case 'object':
+      
+        return label
+      default:
+        return null
+    }
+  }
+  

package/src/components/Touchable.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentVariants, useComponentStyle, BaseViewProps, ViewStyles, useStyle } from '@codeleap/common'
+import { View } from './View'
+import { Animated, TouchableOpacity as NativeTouchable } from  'react-native'
+
+export type TouchableProps =
+  ComponentPropsWithoutRef<typeof NativeTouchable> & 
+{
+  variants?: ComponentVariants <typeof ViewStyles>['variants'],
+  component?: any
+} & BaseViewProps
+
+export const Touchable = forwardRef<NativeTouchable, TouchableProps>((touchableProps, ref) => {
+  const { 
+    variants = [],
+    children,
+    onPress,
+    style,
+    ...props
+  } = touchableProps
+  
+  const variantStyles = useComponentStyle('View', {
+    variants,
+  })
+  const {logger} = useStyle()
+  const press = () => {
+    if(!onPress) throw {message: 'No onPress passed to touchable', touchableProps}
+    logger.log('<Touchable/> pressed', { style, variants }, 'Component')
+    onPress(null)
+  }
+  
+  const styles = [variantStyles.wrapper, style]
+
+  return <NativeTouchable onPress={press} {...props} ref={ref}> 
+    <View style={styles}>
+      {children}
+    </View>
+  </NativeTouchable>
+})
+
+export type AnimatedTouchableProps =
+ComponentPropsWithoutRef<typeof Animated.View> & 
+TouchableProps
+
+export const AnimatedTouchable = forwardRef<typeof Animated.View, AnimatedTouchableProps>((viewProps, ref) => {
+  // @ts-ignore
+  return <Touchable
+    component={Animated.View}
+   
+    {...viewProps} 
+  /> 
+  
+})

package/src/components/View.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentVariants, useComponentStyle, ViewStyles, BaseViewProps } from '@codeleap/common'
+import { Animated, View as NativeView } from  'react-native'
+
+export type ViewProps =
+ ComponentPropsWithoutRef<typeof NativeView> & 
+ ComponentVariants<typeof ViewStyles> & {
+  
+    component?: any
+} & BaseViewProps
+
+
+export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
+  const { 
+    responsiveVariants = {}, 
+    variants = [], 
+    children,
+    style,
+    onHover,
+    component,
+    ...props
+  } = viewProps;
+  
+  const variantStyles = useComponentStyle('View', {
+    responsiveVariants,
+    variants,
+  });
+  const Component  = component|| NativeView 
+
+  return <Component
+    
+    style={[variantStyles.wrapper, style]} 
+    ref={ref}
+    {...props} 
+  > 
+    {children}
+  </Component>
+})
+
+export type AnimatedViewProps =
+ComponentPropsWithoutRef<typeof Animated.View> & 
+ComponentVariants<typeof ViewStyles>  & BaseViewProps
+
+export const AnimatedView = forwardRef<typeof Animated.View, AnimatedViewProps>((viewProps, ref) => {
+  // @ts-ignore
+  return <View
+    component={Animated.View}
+   
+    {...viewProps} 
+  /> 
+  
+})

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export * from './View'
+export * from './Icon'
+export *  from './Touchable'
+export *  from './Text'
+export *  from './Image'
+export *  from './Checkbox'
+export *  from './TextInput'
+export *  from './RadioInput'
+export *  from './Switch'
+export *  from './Select'
+export *  from './FileInput'
+export *  from './Slider'
+export *  from './Navigation'
+export * from './Scroll'
+export * from './ActivityIndicator'
+export * from './Button'

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export {default as OSAlert } from './utils/OSAlert'

package/src/modules/fastImage.ts

@@ -0,0 +1,2 @@
+// @ts-ignore 
+export {default as FastImage} from 'react-native-fast-image'

package/src/types/utility.ts

@@ -0,0 +1,3 @@
+import { StyleProp } from "react-native";
+
+export type StylesOf<C extends string> = Partial<Record<C, StyleProp<any>> >