@codeleap/mobile 1.9.31 → 2.0.0

package/src/components/TextInput/Label.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useDefaultComponentStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { Text } from '../Text'
+import { View } from '../View'
+
+export const InputLabel = ({ label, variants = [], styles = {}, style, asteriskStyle = null, required = false, wrapperStyle = null }) => {
+  const labelStyles = useDefaultComponentStyle('TextInput', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <View style={ wrapperStyle || labelStyles.labelWrapper}>
+        <Text style={style || labelStyles.label} text={label} />
+        {required && <Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'} />}
+      </View>
+    case 'object':
+      return label
+    default:
+      return null
+  }
+}
+

package/src/components/{TextInput.tsx → TextInput/index.tsx}

@@ -2,22 +2,33 @@ import * as React from 'react'
 import {
   ComponentVariants,
   FormTypes,
+  getNestedStylesByKey,
   IconPlaceholder,
-  TextInputComposition,
-  TextInputStyles,
+
   useBooleanToggle,
   useDefaultComponentStyle,
   useValidate,
 } from '@codeleap/common'
 import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { Text } from './Text'
-import { View, ViewProps } from './View'
-import { StylesOf } from '../types/utility'
-import { Icon } from './Icon'
+import { Text } from '../Text'
+import { View, ViewProps } from '../View'
+import { StylesOf } from '../../types'
+import { Icon } from '../Icon'
 import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
-import { Touchable, TouchableProps } from './Touchable'
-import { MaskedTextInput } from '../modules/textInputMask'
-import { TextInputMaskProps } from '../modules/types/textInputMask'
+import { Touchable, TouchableProps } from '../Touchable'
+import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
+import { InputLabel } from './Label'
+
+export { InputLabel } from './Label'
+
+export * from './styles'
+
+import {
+  InputIconComposition,
+  TextInputComposition,
+  TextInputStyles,
+} from './styles'
+import { ActionIcon, ActionIconParts, ActionIconProps } from '../ActionIcon'
 
 type IconProp = { name: IconPlaceholder; action?: () => void }
 
@@ -35,8 +46,8 @@ export type TextInputProps =
     type?: string
     label?: React.ReactNode
     debugName: string
-    leftIcon?: IconProp
-    rightIcon?: IconProp
+    leftIcon?: Partial<ActionIconProps>
+    rightIcon?: Partial<ActionIconProps>
     styles?: StylesOf<TextInputComposition>
     validate?: FormTypes.ValidatorFunctionWithoutForm | string
     value?: string
@@ -46,7 +57,7 @@ export type TextInputProps =
     onPress?: () => void
     masking?: FormTypes.TextField['masking']
     innerWrapperProps?: ViewProps
-    wrapperProps?: TouchableProps | ViewProps
+    wrapperProps?: TouchableProps
     onChangeMask?: TextInputMaskProps['onChangeText']
     required?:boolean
   }
@@ -54,7 +65,6 @@ export type TextInputProps =
 export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
   const {
     onChange,
-    type,
     value,
     onChangeText,
     disabled,
@@ -70,7 +80,6 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     validate,
     password,
     visibilityToggle,
-    touchableWrapper,
     innerWrapperProps,
     masking = null,
     onChangeMask,
@@ -84,9 +93,10 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
 
   const input = useRef<any>(null)
   const [textIsVisible, setTextVisible] = useBooleanToggle(false)
-  const variantStyles = useDefaultComponentStyle('TextInput', {
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputStyles>('u:TextInput', {
     variants,
     styles,
+    transform: StyleSheet.flatten,
   })
   const InputElement = masking ? MaskedTextInput : NativeTextInput
 
@@ -122,29 +132,12 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
 
   const { showError, error } = useValidate(value, validate)
 
-  const leftIconStyle = {
-    ...variantStyles.icon,
-    ...(isFocused ? variantStyles['icon:focus'] : {}),
-    ...(showError ? variantStyles['icon:error'] : {}),
-    ...variantStyles.leftIcon,
-    ...(isFocused ? variantStyles['leftIcon:focus'] : {}),
-    ...(showError ? variantStyles['leftIcon:error'] : {}),
-  }
+  const commonIconStyles = getNestedStylesByKey('icon', variantStyles)
 
-  const rightIconStyle = {
-    ...variantStyles.icon,
-    ...(isFocused ? variantStyles['icon:focus'] : {}),
-    ...(showError ? variantStyles['icon:error'] : {}),
-    ...variantStyles.rightIcon,
-    ...(isFocused ? variantStyles['rightIcon:focus'] : {}),
-    ...(showError ? variantStyles['rightIcon:error'] : {}),
-  }
+  const leftIconStyles = getNestedStylesByKey('leftIcon', variantStyles)
+
+  const rightIconStyles = getNestedStylesByKey('rightIcon', variantStyles)
 
-  const buttonIconWrapperStyle = {
-    ...variantStyles.buttonIconWrapper,
-    ...(isFocused ? variantStyles['buttonIconWrapper:focus'] : {}),
-    ...(showError ? variantStyles['buttonIconWrapper:error'] : {}),
-  }
   function getStyles(key: TextInputComposition) {
     const requestedStyles = [
       variantStyles[key],
@@ -162,12 +155,19 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     }
   }
 
+  const visibilityToggleProps = visibilityToggle ? {
+    onPress: () => setTextVisible(),
+    icon: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder,
+    debugName: `${debugName} toggle visibility`,
+  } : {}
+
   return (
     <Touchable
       style={getStyles('wrapper')}
       debugName={debugName}
       onPress={handlePress}
       {...wrapperProps}
+      android_ripple={null}
     >
       <InputLabel
         label={label}
@@ -177,7 +177,14 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
         required={required}
       />
       <View style={getStyles('innerWrapper')} {...innerWrapperProps}>
-        <InputIcon {...leftIcon} style={leftIconStyle} wrapperStyle={buttonIconWrapperStyle} />
+        <InputIcon
+          isFocused={isFocused}
+          showError={showError}
+          styles={leftIconStyles}
+          commonStyles={commonIconStyles}
+          debugName={`${debugName} left icon`}
+          {...leftIcon}
+        />
         {/* @ts-ignore */}
         <InputElement
           ref={input}
@@ -196,14 +203,16 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
           } } : {})}
           style={getStyles('textField')}
         />
-        {
-          visibilityToggle ?
-            <InputIcon name={
-              (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
-            } action={() => setTextVisible()} style={rightIconStyle} wrapperStyle={buttonIconWrapperStyle}/>
-            :
-            <InputIcon {...rightIcon} style={rightIconStyle} wrapperStyle={buttonIconWrapperStyle} />
-        }
+        <InputIcon
+          isFocused={isFocused}
+          showError={showError}
+          styles={rightIconStyles}
+          commonStyles={commonIconStyles}
+          debugName={`${debugName} right icon`}
+          {...rightIcon}
+          {...visibilityToggleProps}
+        />
+
       </View>
       <FormError message={error.message} style={getStyles('error')} />
     </Touchable>
@@ -218,32 +227,37 @@ export const FormError = ({ message, ...props }) => {
   return message
 }
 
-export const InputIcon: React.FC<{ style: any; wrapperStyle: any } & IconProp> = ({ name, style, action, wrapperStyle = {}}) => {
-  if (!name) return null
-  if (action) {
-    return <Touchable debugName={`${name} icon button`} onPress={() => action()} style={wrapperStyle} >
-      <Icon name={name} style={style}/>
-    </Touchable>
-  }
-  return <Icon name={name} style={style} />
-}
+type InputIconProps = {
+  styles: StylesOf<InputIconComposition>
+  commonStyles: StylesOf<InputIconComposition>
+  isFocused: boolean
+  showError: boolean
+} & Omit<ActionIconProps, 'styles'>
 
-export const InputLabel = ({ label, variants = [], styles = {}, style, asteriskStyle = null, required = false, wrapperStyle = null }) => {
-  const labelStyles = useDefaultComponentStyle('TextInput', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
+export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFocused, showError, ...props }) => {
+  if (!props.icon) return null
 
-  if (!label) return null
-
-  switch (typeof label) {
-    case 'string':
-      return <View style={ wrapperStyle || labelStyles.labelWrapper}>
-        <Text style={style || labelStyles.label} text={label} />
-        {required && <Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'} />}
-      </View>
-    case 'object':
-      return label
-    default:
-      return null
+  function getStyles(key: ActionIconParts | '') {
+    if (key === 'icon') key = ''
+    const requestedStyles = [
+      commonStyles[key],
+      isFocused ? commonStyles[key + ':focus'] : {},
+      showError ? commonStyles[key + ':error'] : {},
+      styles[key],
+      isFocused ? styles[key + ':focus'] : {},
+      showError ? styles[key + ':error'] : {},
+    ]
+    return StyleSheet.flatten(requestedStyles)
+  }
+  const iconStyles = {
+    icon: getStyles('icon'),
+    touchablePressable: getStyles('touchablePressable'),
+    touchableWrapper: getStyles('touchableWrapper'),
+    touchableRipple: getStyles('touchableRipple'),
   }
+
+  return <ActionIcon
+    styles={iconStyles}
+    {...props}
+  />
 }

package/src/components/TextInput/styles.ts

@@ -0,0 +1,120 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconParts } from '../ActionIcon'
+
+export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
+type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
+
+export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
+| InputIcons
+
+type TextInputParts =
+  | 'wrapper'
+  | InputIconComposition
+  | 'textField'
+  | 'label'
+  | 'innerWrapper'
+  | 'error'
+  | 'placeholder'
+  | 'selection'
+  | 'requiredAsterisk'
+  | 'labelWrapper'
+
+export type TextInputComposition =
+  | `${TextInputParts}:error`
+  | `${TextInputParts}:focus`
+  | TextInputParts
+
+const createTextInputStyle =
+  createDefaultVariantFactory<TextInputComposition>()
+
+const presets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))
+
+export const TextInputStyles = {
+  ...presets,
+  default: createTextInputStyle((theme) => ({
+    textField: {
+      ...theme.spacing.padding(0),
+      ...theme.spacing.paddingHorizontal(1),
+      ...assignTextStyle('p1')(theme).text,
+      minWidth: 1,
+      backgroundColor: 'transparent',
+      flex: 1,
+    },
+    placeholder: {
+      color: theme.colors.lightGray,
+    },
+    selection: {
+      color: theme.colors.primary,
+    },
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+
+    },
+    innerWrapper: {
+      ...theme.spacing.paddingVertical(0.5),
+      ...theme.spacing.paddingHorizontal(1),
+      ...theme.presets.row,
+      ...theme.border.neutral(1),
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    label: {
+      ...theme.spacing.marginBottom(1),
+      ...assignTextStyle('h5')(theme).text,
+    },
+    'icon': {
+      color: theme.colors.neutral,
+    },
+    'icon:error': {
+      color: theme.colors.negative,
+    },
+    'icon:focus': {
+      color: theme.colors.primary,
+    },
+    leftIconTouchableWrapper: {
+      ...theme.spacing.marginRight(1),
+    },
+    rightIconTouchableWrapper: {
+      ...theme.spacing.marginLeft(1),
+    },
+    error: {
+      color: theme.colors.negative,
+      ...theme.spacing.marginTop(0.5),
+    },
+
+    'label:error': {
+      color: theme.colors.negative,
+    },
+
+    'innerWrapper:error': {
+      ...theme.border.negative(1),
+    },
+    'innerWrapper:focus': {
+      ...theme.border.primary(1),
+    },
+    requiredAsterisk: {
+      color: theme.colors.negative,
+    },
+    labelWrapper: {
+      ...theme.presets.row,
+    },
+  })),
+  line: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral({ width: 1, directions: ['bottom'] }),
+    },
+  })),
+  box: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral(1),
+    },
+  })),
+  pill: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral(1),
+      borderRadius: 15,
+    },
+  })),
+}

package/src/components/Touchable/index.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+
+  useCodeleapContext,
+  AnyFunction,
+  defaultPresets,
+} from '@codeleap/common'
+import { Platform, Pressable, StyleSheet, View as RNView } from 'react-native'
+
+import { createAnimatableComponent } from 'react-native-animatable'
+import { TouchableComposition, TouchableStyles } from './styles'
+import { StylesOf } from '../../types'
+import { View } from '../View'
+export type TouchableProps = Omit<
+  ComponentPropsWithoutRef<typeof Pressable>,
+  'onPress'
+> & {
+  variants?: ComponentVariants<typeof TouchableStyles>['variants']
+  component?: any
+  ref?: React.Ref<RNView>
+  debugName: string
+  activeOpacity?: number
+  debugComponent?: string
+  feedbackVariant?: 'opacity' | 'none' | 'highlight'
+  onPress?: AnyFunction
+  styles?: StylesOf<TouchableComposition>
+} & BaseViewProps
+export * from './styles'
+
+const rippleStyles = {
+  paddingTop: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  overflow: 'hidden',
+}
+
+const defaultPressableStyles = {
+  marginTop: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  // height: '100%',
+  minWidth: '100%',
+  // minHeight: '100%',
+  // maxHeight: '100%',
+  maxWidth: '100%',
+
+}
+
+export const Touchable: React.FC<TouchableProps> = forwardRef<
+  RNView,
+  TouchableProps
+>((touchableProps, ref) => {
+  const {
+    variants = [],
+    children,
+    onPress,
+    style,
+    activeOpacity = 0.5,
+    debugName,
+    debugComponent,
+    styles,
+    feedbackVariant = 'opacity',
+    ...props
+  } = touchableProps
+  const _feedbackVariant = onPress ? feedbackVariant : 'none'
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+    styles,
+  })
+
+  const { logger } = useCodeleapContext()
+
+  const press = () => {
+    if (!onPress) { throw { message: 'No onPress passed to touchable', touchableProps } }
+
+    logger.log(
+      `<${debugComponent || 'Touchable'}/>  pressed`,
+      debugName || variants,
+      'User interaction',
+    )
+    onPress && onPress()
+  }
+
+  const _styles = StyleSheet.flatten([variantStyles.wrapper, style])
+
+  const hasRipple = (!!variantStyles.ripple || !!props.android_ripple) && _feedbackVariant !== 'none'
+  function getFeedbackStyle(pressed:boolean) {
+    if (Platform.OS === 'android' && hasRipple) return {}
+    switch (_feedbackVariant) {
+      case 'highlight':
+        return {
+          backgroundColor: pressed ? '#e0e0e0' : 'transparent',
+        }
+        break
+      case 'opacity':
+        return {
+          opacity: pressed ? activeOpacity : 1,
+        }
+      case 'none':
+        return {}
+    }
+  }
+
+  const rippleConfig = hasRipple ? {
+    ...(variantStyles.ripple || {}),
+    ...(props.android_ripple || {}),
+  } : null
+
+  const Wrapper = View
+
+  return (
+    <Wrapper style={[_styles, rippleStyles]}>
+      <Pressable onPress={press} style={({ pressed }) => ([
+        getFeedbackStyle(pressed),
+        variantStyles.pressable,
+        _styles,
+        defaultPressableStyles,
+      ])} android_ripple={rippleConfig} {...props} ref={ref}>
+        {children}
+      </Pressable>
+    </Wrapper>
+  )
+})
+
+export const AnimatedTouchable = createAnimatableComponent(Touchable) as unknown as typeof Touchable

package/src/components/Touchable/styles.ts

@@ -0,0 +1,16 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type TouchableComposition = 'wrapper' | 'ripple' | 'pressable'
+
+const createTouchableStyle = createDefaultVariantFactory<TouchableComposition>()
+
+const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })),
+)
+
+export const TouchableStyles = {
+  ...presets,
+  default: createTouchableStyle((t) => ({
+
+  })),
+
+}

package/src/components/View/index.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import * as Animatable from 'react-native-animatable'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  ViewStyles,
+  BaseViewProps,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { View as NativeView } from 'react-native'
+import { MotiView, MotiProps } from 'moti'
+
+export * from './styles'
+
+export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
+  ComponentVariants<typeof ViewStyles> & {
+    ref?: any
+    component?: any
+    animated?: boolean
+  } & BaseViewProps
+
+export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeView, ViewProps & Partial<MotiProps>>((viewProps, ref) => {
+  const {
+    responsiveVariants = {},
+    variants = [],
+    children,
+    style,
+
+    component,
+    animated = false,
+    ...props
+  } = viewProps
+
+  const variantStyles = useDefaultComponentStyle('View', {
+    responsiveVariants,
+    variants,
+  })
+  const Component = animated ? MotiView : (component || NativeView)
+
+  return (
+    <Component style={[variantStyles.wrapper, style]} ref={ref} {...props}>
+      {children}
+    </Component>
+  )
+})
+
+export const AnimatedView = Animatable.createAnimatableComponent(
+  View,
+) as unknown as React.ForwardRefExoticComponent<
+  { transition?: any; animation?: any } & ViewProps
+>
+
+type GapProps = ViewProps & {
+  value: number
+
+  defaultProps?: any
+}
+
+export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
+  const { Theme } = useCodeleapContext()
+  const horizontal = props.variants?.includes('row')
+  return (
+    <View {...props}>
+      {
+        React.Children.toArray(children).map((Element, idx, childArr) => {
+          if (React.isValidElement(Element)) {
+            const props = { ...Element.props, ...defaultProps }
+
+            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
+            switch (idx) {
+              case 0:
+                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
+                break
+              case childArr.length - 1:
+                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
+                break
+              default:
+                break
+            }
+            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
+            return React.cloneElement(Element, props)
+          }
+          return Element
+        })
+      }
+    </View>
+  )
+}

package/src/components/View/styles.ts

@@ -0,0 +1,24 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ViewComposition = 'wrapper'
+
+const createViewStyle = createDefaultVariantFactory<ViewComposition>()
+
+const presets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })),
+)
+
+export const ViewStyles = {
+  ...presets,
+  default: createViewStyle((t) => ({
+    // wrapper: {
+    //   display: 'flex',
+    // },
+  })),
+  separator: createViewStyle((t) => ({
+    wrapper: {
+      width: '100%',
+      height: t.values.pixel,
+      backgroundColor: t.colors.borders,
+    },
+  })),
+}

package/src/components/components.ts

@@ -20,12 +20,22 @@ export * from './List'
 export * from './ActivityIndicator'
 export * from './Button'
 export * from './ContentView'
-export * from './Overlay'
 export * from './Modal'
-
-export * from './NewPager'
+export * from './Calendar'
+export * from './ImageView'
 export * from './Navigation'
 export * from './Pager'
 export * from './EmptyPlaceholder'
-export * from './Gap'
 export * from './Backdrop'
+export * from './Drawer'
+export * from './MultiSelect'
+export * from './AutoComplete'
+export * from './Grid'
+export * from './ActionIcon'
+
+import * as Legacy from './legacy'
+export {
+  Legacy,
+}
+
+export * from './defaultStyles'