@codeleap/mobile 1.0.0

package/src/components/Button.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { useComponentStyle, ButtonStyles, ComponentVariants, ButtonComposition } from '@codeleap/common';
+import {  forwardRef } from 'react'
+import { StylesOf } from '../types/utility'; 
+import { Text } from './Text';
+import { Touchable, TouchableProps } from './Touchable';
+import { Icon } from './Icon';
+import { ActivityIndicator } from './ActivityIndicator';
+import { IconPlaceholder } from '@codeleap/common';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+
+
+
+export type ButtonProps = Omit<TouchableProps,'variants'> & ComponentVariants<typeof ButtonStyles>  & {  
+  text?:string
+  rightIcon?: IconPlaceholder
+  icon?: IconPlaceholder
+  styles?: StylesOf<ButtonComposition>
+  loading?: boolean
+} 
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>( (buttonProps,ref) => {
+  const { 
+    variants = [],
+    responsiveVariants = {},
+    children,
+    icon,
+    text,
+    loading,
+    styles = {},
+    onPress,
+    rightIcon,
+    ...props 
+  } = buttonProps
+  
+  
+  const variantStyles = useComponentStyle('Button', {
+    variants,
+  })  
+
+
+  function handlePress(e:Parameters<ButtonProps['onPress']>[0]){
+    onPress && onPress(e)
+  }
+
+ 
+  return (
+    <Touchable
+      style={[variantStyles.wrapper, styles.wrapper]}
+      onPress={handlePress}
+      ref={ref}
+      {...props}
+    >
+      {loading && <ActivityIndicator style={[variantStyles.loader, styles.loader]} />}
+      {!loading && <Icon name={icon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.leftIcon, styles.leftIcon])}/>}
+      {children || <Text text={text} style={[variantStyles.text, styles.text]}/>}
+      <Icon name={rightIcon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.rightIcon, styles.rightIcon])}/>
+    </Touchable>
+  )
+})

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import {  ComponentVariants, useComponentStyle, StylesOf,  Form, useValidate } from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { Switch as NativeCheckbox } from 'react-native'
+import { InputLabel, FormError } from '../TextInput'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import {
+   MobileCheckboxStyles as CheckboxStyles, MobileCheckboxComposition as CheckboxComposition
+} from './styles' 
+export * from './styles'
+
+type NativeCheckboxProps = Omit<
+    ComponentPropsWithRef<typeof NativeCheckbox>, 
+    'thumbColor'|'trackColor'
+>
+type CheckboxProps = NativeCheckboxProps & {
+    variants?: ComponentVariants<typeof CheckboxStyles>['variants']
+    label?: ReactNode
+    styles?: StylesOf<CheckboxComposition>
+    validate?: Form.ValidatorFunction | string
+} 
+
+export const Checkbox = forwardRef<NativeCheckbox,CheckboxProps>((checkboxProps,ref) => {
+    const  {
+        variants = [],
+        style = {},
+        styles = {},
+        label,
+        value,
+        onValueChange,
+        validate,
+        ...props
+    } = checkboxProps
+   
+    const variantStyles = useComponentStyle('Checkbox', {
+        // @ts-ignore
+        variants,
+    })
+
+    const {error, showError} = useValidate(value,validate)
+
+
+    function getStyles(key:CheckboxComposition){
+        return [
+            variantStyles[key],
+            variantStyles[key],
+            key === 'wrapper' ? style : {},
+            value ? variantStyles[key + ':checked'] : {},
+            value ? styles[key + ':checked'] : {},
+            showError ? variantStyles[key + ':error'] : {},
+            showError ? styles[key + ':error'] : {},
+            checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
+            checkboxProps.disabled ? styles[key + ':disabled'] : {},
+        ]
+    }
+
+    return <View style={getStyles('wrapper')} {...props}>
+        <Touchable style={getStyles('input')}  onPress={() => onValueChange(!value)}>
+            <View style={getStyles('checkmarkWrapper')}>
+                <View style={getStyles('checkmark')}/>
+            </View>
+            <InputLabel label={label} style={getStyles('label')}/>
+
+        </Touchable>
+        <FormError message={error.message} style={getStyles('error')} />
+    </View>
+})

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,63 @@
+import {createDefaultVariantFactory, includePresets} from '@codeleap/common'
+
+type CheckboxParts = 'wrapper' | 'label' | 'input' | 'checkmark' | 'checkmarkWrapper' | 'error'
+
+export type MobileCheckboxComposition = CheckboxParts | `${CheckboxParts}:checked` | `${CheckboxParts}:disabled` | `${CheckboxParts}:error`;
+const createCheckboxStyle = createDefaultVariantFactory<MobileCheckboxComposition>()
+
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
+
+export const MobileCheckboxStyles = {
+  ...presets,
+  default: createCheckboxStyle((theme) => {
+    const size = theme.typography.baseFontSize * 1.2
+
+    const markHeight = size * 0.5
+    const markWidth = size * 0.25
+
+    const translateX = -(markWidth/2)
+    const translateY = -(markHeight/2)
+    return {
+      wrapper: {
+        
+      },
+      input: {
+        flexDirection: 'row',
+        ...theme.presets.alignCenter,
+        borderRadius: theme.borderRadius.small
+      },
+      label: {
+        ...theme.spacing.marginLeft(0.5),
+      },
+    
+      checkmark: {
+          position: 'absolute',
+          top: '40%',
+          left: '50%',
+         
+          height: markHeight,
+          width: markWidth,
+          transform: [{translateX}, {translateY}, {rotate: '45deg'},]
+      },
+      "checkmark:checked": {
+        ...theme.border.white({
+          width: 2,
+          directions: ['right','bottom']
+        }),
+      },
+      checkmarkWrapper: {
+          position: 'relative',
+          width: size,
+          height: size,
+          ...theme.border.gray(1)
+      },
+      "checkmarkWrapper:checked": {
+          backgroundColor: theme.colors.primary
+      },
+      error: {
+        color: theme.colors.negative
+      }
+    }
+  }),
+
+}

package/src/components/FileInput.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Text } from 'react-native'
+
+export const FileInput = React.forwardRef(() => {
+    return <Text >Not implemented</Text>
+})

package/src/components/Icon.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { ComponentVariants, IconPlaceholder, IconStyles, useComponentStyle, useStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+
+export type IconProps = {
+    name:IconPlaceholder
+    style?: {
+      color: string
+      size?:string|number
+      width?:string|number
+      height?:string|number
+    }
+    variants?: ComponentVariants<typeof IconStyles>['variants']
+} 
+ 
+export const Icon:React.FC<IconProps> = ({name, style, variants}) => {
+  const {Theme} = useStyle()
+  
+  if (!name) return null
+  
+  const Component = Theme?.icons?.[name]
+   
+  const {logger} = useStyle()
+  const variantStyles = useComponentStyle('Icon', {
+    variants,
+    styles: {
+      icon: StyleSheet.flatten([style]),
+    }
+  })
+  if (!Component) {
+    logger.warn('Icon', `No icon found in theme for name "${name}"`, 'Component')
+    return null
+  }
+  return <Component style={variantStyles.icon}/>
+}

package/src/components/Image.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { ComponentVariants, ImageStyles, useComponentStyle } from "@codeleap/common"
+import { ComponentPropsWithoutRef } from "react"
+import { Image as NativeImage } from 'react-native'
+import {FastImage} from '../modules/fastImage'
+
+type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
+export type ImageProps = Omit<NativeImageProps, 'source'> & {
+    variants?: ComponentVariants<typeof ImageStyles>['variants']
+    fast?: boolean
+    source: NativeImageProps['source'] & {
+        priority?: keyof typeof FastImage.priority
+    }
+    resizeMode?: keyof typeof FastImage.resizeMode
+}
+
+export const Image:React.FC<ImageProps> = (props) => {
+    const {
+        variants,
+        style,
+        fast,
+        resizeMode,
+        resizeMethod,
+        ...imageProps
+    } = props
+    
+    const variantStyles = useComponentStyle('Image', {variants})
+
+    const styles = [variantStyles.wrapper, style]
+
+
+    if(fast){
+        return <FastImage 
+            style={styles}
+            resizeMode={ FastImage.resizeMode[resizeMode || 'contain']}
+            {...imageProps}
+        />
+    }
+    return <NativeImage 
+        style={styles}
+        {...imageProps}
+    />
+}

package/src/components/Navigation.tsx

@@ -0,0 +1,125 @@
+// @ts-nocheck
+import * as React from 'react'
+import {  RouteConfig } from '@react-navigation/native'
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'
+import { AnyFunction, EnhancedTheme, IconPlaceholder, useStyle } from '@codeleap/common'
+import { createDrawerNavigator } from '@react-navigation/drawer'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { Icon } from './Icon'
+import { Paths } from '@codeleap/common/dist/types/pathMapping'
+
+export type AppScenes = {
+    [x:string] : {
+        [y:string] : AnyFunction | ( Partial<Pick<RouteConfig<any, any, any, any, any>, 'options'>> & { 
+            render: AnyFunction, 
+            icon?: any
+        })
+    } 
+}
+
+const parseModulePages = (pageModule:string, [pageName, Component])  => {
+  const name =  `${pageModule}.${pageName}`
+  
+  let props = {
+    name,
+    key: name,
+    options: {
+      title: pageName,
+    },
+    component: null,
+  }
+
+  switch (typeof Component){
+    case 'function': 
+      props.component = Component
+    case 'object':
+      props  = {
+        ...props,
+        ...Component,
+      }
+      if (typeof Component.default === 'function'){
+        props.component = Component.default
+      }
+
+      if (Component.render){
+        props.component = typeof Component.render === 'function' ?  Component.render :  Component?.render?.default
+      }
+
+    default:
+      break
+  }
+
+  return props
+}
+
+type FlattenScenesArgs = {
+    scenes:AppScenes,
+    Theme: EnhancedTheme<any>
+}
+const flattenScenes = ({
+  scenes,
+  Theme,
+}:FlattenScenesArgs) => {
+
+  return Object.entries(scenes).reduce((acc, [pageModule, pages]) => {
+    const thisModulePages = {}
+    for (const pageData of Object.entries(pages)){
+      const parsedData = parseModulePages(pageModule, pageData)
+
+      thisModulePages[parsedData.name] = parsedData
+    }
+    return {...acc, ...thisModulePages}
+  }, {})
+}
+
+const Navigators = {
+  drawer: createDrawerNavigator(),
+  stack: createNativeStackNavigator(),
+  tab: createBottomTabNavigator(),
+}
+type NavigationType = keyof typeof Navigators
+type NavigationProps<T extends NavigationType> = {
+    scenes: AppScenes
+    type: T
+} & React.ComponentPropsWithoutRef<(typeof Navigators)[T]['Navigator']>
+
+
+export  const Navigation = <T extends NavigationType, P extends NavigationProps<T> = NavigationProps<T>>({type, scenes, ...props}:P) => {
+  const Navigator:(typeof Navigators)[T] = Navigators[type]
+  const { Theme } = useStyle()
+  const flatScenes =  flattenScenes({
+    Theme,
+    scenes,
+  })
+
+  const otherProps = props as any
+  // @ts-ignore
+  const screenOptions:P['screenOptions'] = ({route, navigation}) => {
+    const propOptions = typeof (otherProps?.screenOptions || {}) === 'function' ? 
+      otherProps.screenOptions({route, navigation}) : 
+      otherProps?.screenOptions
+    
+    return {
+      ...propOptions,
+      tabBarIcon: (style) => {
+        if (flatScenes?.[route.name]?.icon){
+          return <Icon name={flatScenes?.[route.name]?.icon} style={style}/>
+        }
+        return null
+      },
+    }
+  }
+
+  return <Navigator.Navigator {...otherProps} screenOptions={screenOptions} >
+    {
+      Object.values(flatScenes).map((props) => <Navigator.Screen {...(props as any)}/>)
+    }
+  </Navigator.Navigator>
+          
+}
+export type NavigationScreenProps<S extends AppScenes, T  extends NativeStackScreenProps<any, any> = NativeStackScreenProps<any, any>> = Omit<T, 'navigation'> & {
+  navigation:  Omit<T['navigation'],'navigate'> & {
+    navigate: (to: Exclude<Paths<S, 1>, keyof S>) => void
+  }
+
+}

package/src/components/RadioInput/index.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
+import { v4 } from 'uuid'
+
+import {Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { ComponentVariants, StylesOf, useComponentStyle } from '@codeleap/common'
+import { View } from '../View'
+import { MobileRadioInputStyles, MobileRadioInputComposition} from './styles'
+
+export * from './styles'
+
+type RadioItem<T extends unknown = any> = {
+    value: T,
+    label: ReactNode
+}
+
+const getRadioStyle = (props) => useComponentStyle('RadioInput', props)
+
+export type RadioButtonProps = Omit<ComponentPropsWithoutRef<typeof Touchable>, 'style'> & {
+    item: RadioItem
+    select: () => void
+    style: StylesOf<MobileRadioInputComposition>
+    checked: boolean
+}   
+
+export type RadioGroupProps<T> = {
+    options: RadioItem<T>[]
+    value: T
+    onValueChange(value:T):void
+    label:ReactNode
+    styles?: StylesOf<MobileRadioInputComposition>
+} & ComponentVariants<typeof MobileRadioInputStyles>
+
+
+export const RadioButton:React.FC<RadioButtonProps> = ({item, select, style, checked, ...props}) => {
+ 
+  return <Touchable  onPress={select} style={style.itemWrapper} >
+    <View  style={[
+      style.button,
+      checked && style['button:checked'],
+    ]}> 
+        <View style={[
+              style['buttonMark'],
+              checked && style['buttonMark:checked'],
+        ]} />
+    </View>
+    {typeof item.label === 'string' ? <Text text={item.label} style={style.text}/> : item.label }
+  </Touchable>
+}
+
+
+export const RadioGroup =  <T extends unknown>(radioGroupProps:RadioGroupProps<T>) => {
+  const {options, value, onValueChange, label, responsiveVariants, variants, styles} = radioGroupProps
+  
+  const radioStyle = getRadioStyle({
+    responsiveVariants,
+    variants,
+    styles, 
+  })
+  return <View style={radioStyle.wrapper}>
+    {typeof label === 'string' ? <Text text={label}/> : label }
+    <View style={radioStyle.listWrapper}>
+      {
+        options?.map((item, idx) =>  <RadioButton 
+          item={item} 
+          key={idx} 
+          style={radioStyle}
+         
+          checked={value === item.value}
+          select={() => onValueChange(item.value)} 
+        />)
+      }
+    </View>
+  </View>
+}

package/src/components/RadioInput/styles.ts

@@ -0,0 +1,62 @@
+import { createDefaultVariantFactory,  RadioInputStyles } from '@codeleap/common';
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
+    
+type RadioGroupParts = 'label' |'wrapper' |'list'
+
+export type MobileRadioInputComposition = `${RadioParts}:checked` | RadioParts | RadioGroupParts
+
+const createRadioStyle = createDefaultVariantFactory<MobileRadioInputComposition>()
+
+const defaultStyles = RadioInputStyles.default
+
+export const MobileRadioInputStyles = {
+  ...RadioInputStyles,
+  default: createRadioStyle((theme) => {
+    const style = defaultStyles(theme)
+
+    const itemHeight = theme.typography.baseFontSize * 1.2
+    const markHeight = itemHeight / 2
+    const translateX = -(markHeight/2)
+    const translateY = -(markHeight/2)
+    return {
+      ...style,
+      itemWrapper: {
+        ...style.itemWrapper,
+      },
+      button: { 
+        height: itemHeight,
+        width: itemHeight,
+        ...theme.border.primary(1),
+        borderRadius: theme.borderRadius.large,
+        
+        position: 'relative',
+        ...theme.spacing.marginRight(1),
+
+      },
+      'buttonMark': {
+        backgroundColor: theme.colors.primary,
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        height: markHeight,
+        width: markHeight,
+        
+        transform: [{translateX},{translateY}],
+        borderRadius: theme.borderRadius.large,
+        opacity: 0
+      },
+      'buttonMark:checked': {
+          opacity: 1
+      },
+    }
+  }),
+  square: createRadioStyle(() => ({
+    'buttonMark': {
+      borderRadius: 0,
+    },
+    button: {
+      borderRadius: 0,
+
+    },
+  })),
+}

package/src/components/Scroll.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import { deepEqual, onUpdate, useComponentStyle, usePrevious, useStyle } from '@codeleap/common'
+import { KeyboardAwareScrollViewProps, KeyboardAwareScrollView  as KBDView} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, ScrollView } from 'react-native'
+import { ViewProps } from './View'
+
+
+export type ScrollProps = KeyboardAwareScrollViewProps & ViewProps & {
+  onRefresh?:() => void
+  refreshTimeout?: number
+  changeData?:any
+}
+
+const KeyboardAwareScrollView = KBDView as unknown as React.ForwardRefExoticComponent<
+  ViewProps & 
+  {
+    refreshControl?: JSX.Element
+    ref?: ScrollView
+    
+  }
+>
+
+
+export const Scroll = forwardRef<ScrollView, ScrollProps>((scrollProps, ref) => {
+  const { 
+    variants = [], 
+    style,
+    refreshTimeout = 3000,
+    children,
+    changeData,
+    ...props
+  } = scrollProps
+  const hasRefresh = !!props.onRefresh
+  const [refreshing, setRefreshing] = useState(false)
+
+  const timer = React.useRef(null)
+  const previousData = usePrevious(changeData)
+
+  const onRefresh = () => {
+    if(timer.current){
+      clearTimeout(timer.current)
+    }
+
+    setRefreshing(true)   
+  
+    props.onRefresh()
+   
+    timer.current = setTimeout(() => {
+      setRefreshing(false)
+    }, refreshTimeout)
+
+  }
+  onUpdate(() => {
+    if(refreshing && !deepEqual(previousData, changeData)){
+      setRefreshing(false)
+      if(timer.current){
+        clearTimeout(timer.current)
+      }
+    }
+  },[refreshing, changeData])
+  const {
+    Theme
+  } = useStyle()
+
+  const variantStyles  = useComponentStyle('View', {
+    variants
+  })
+
+  return (
+
+    <KeyboardAwareScrollView
+      style={[Theme.presets.full, variantStyles.wrapper, style]}
+      ref={ref as unknown as ScrollView}
+      {...props}
+      refreshControl={
+        hasRefresh &&
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+          />
+      }
+    > 
+      { children }
+    </KeyboardAwareScrollView>
+  )
+})

package/src/components/Select/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { View } from "../View"
+
+export const Select:React.FC = () => {
+    return <View >
+
+    </View> 
+}