@codeleap/mobile 1.9.33 → 2.0.2

package/src/components/Slider/styles.ts

@@ -0,0 +1,75 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SliderComposition =
+  | 'wrapper'
+  | 'handle'
+  | 'track'
+  | 'label'
+  | 'selectedTrack'
+  | 'inputContainer'
+  | 'tooltip'
+  | 'tooltip:visible'
+  | 'tooltip:hidden'
+  | 'trackLabels'
+  | 'mark'
+  | 'tooltipArrow'
+  | 'tooltipText'
+
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+
+const presets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })),
+)
+
+export const SliderStyles = {
+  ...presets,
+  default: createSliderStyle((theme) => ({
+    wrapper: {},
+    handle: {
+      backgroundColor: theme.colors.primary,
+    },
+    selectedTrack: {
+      backgroundColor: theme.colors.primary,
+    },
+    track: {
+      backgroundColor: theme.colors.gray,
+    },
+    tooltip: {
+      padding: theme.spacing.value(0.5),
+      backgroundColor: theme.colors.primary,
+      position: 'relative',
+      borderRadius: theme.borderRadius.small,
+    },
+    'tooltip:visible': {
+      opacity: 1,
+    },
+    'tooltip:hidden': {
+      opacity: 0,
+    },
+    mark: {
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      borderRadius: 29,
+      height: 10,
+      width: 10,
+      top: -5,
+    },
+    trackLabels: {
+      position: 'absolute',
+      top: 8,
+      ...assignTextStyle('p3')(theme).text,
+    },
+    tooltipArrow: {
+      height: 6,
+      width: 6,
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      transform: [{ rotate: '45deg' }],
+      bottom: -3,
+      left: '50%',
+    },
+    tooltipText: {
+      color: theme.colors.white,
+      ...assignTextStyle('p3')(theme).text,
+    },
+  })),
+}

package/src/components/Slider/types.ts

@@ -1,6 +1,11 @@
-import { ComponentVariants, Form, SliderComposition, SliderStyles } from '@codeleap/common'
+import { ComponentVariants, Form } from '@codeleap/common'
+
+import {
+  SliderComposition, SliderStyles,
+} from './styles'
+
 import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
-import { StylesOf } from '../../types/utility'
+import { StylesOf } from '../../types'
 import { ViewProps } from '../View'
 export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & {
     debounce?: number

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

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import {
-  SwitchStyles,
-  SwitchComposition,
+
   ComponentVariants,
   useDefaultComponentStyle,
   StylesOf,
@@ -11,9 +10,14 @@ import {
 } 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'
+import { InputLabel, FormError } from '../TextInput'
+import { View } from '../View'
 
+import {
+  SwitchStyles,
+  SwitchComposition,
+} from './styles'
+export * from './styles'
 type NativeSwitchProps = Omit<
   ComponentPropsWithRef<typeof NativeSwitch>,
   'thumbColor' | 'trackColor'
@@ -70,11 +74,12 @@ export const Switch = forwardRef<NativeSwitch, SwitchProps>(
             trackColor={{ false: trackColor, true: trackColor }}
             ios_backgroundColor={trackColor}
             value={value}
+            ref={ref}
             {...props}
           />
           <InputLabel label={label} style={getStyles('label')} />
         </View>
-        <FormError message={error.message} style={getStyles('error')} />
+        <FormError text={error.message} style={getStyles('error')} />
       </View>
     )
   },

package/src/components/Switch/styles.ts

@@ -0,0 +1,37 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SwitchParts = 'wrapper' | 'label' | 'input' | 'error' | 'inputWrapper'
+export type SwitchComposition =
+  | SwitchParts
+  | `${SwitchParts}:disabled`
+  | `${SwitchParts}:on`
+
+const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
+
+const presets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })),
+)
+
+export const SwitchStyles = {
+  ...presets,
+  default: createSwitchStyle((theme) => ({
+    wrapper: {},
+    inputWrapper: {
+      ...theme.presets.row,
+      ...theme.presets.alignCenter,
+    },
+    label: {
+      ...theme.spacing.marginLeft(0.5),
+    },
+    input: {
+      color: theme.colors.white,
+      backgroundColor: theme.colors.gray,
+    },
+    'input:on': {
+      color: theme.colors.primary,
+      backgroundColor: theme.colors.gray,
+    },
+    error: {
+      color: theme.colors.negative,
+    },
+  })),
+}

package/src/components/Text/index.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TypeGuards,
+  useState,
+} from '@codeleap/common'
+import { Animated, GestureResponderEvent, Platform, StyleSheet, Text as NativeText } from 'react-native'
+import { MotiText as _MotiText, MotiProps } from 'moti'
+import { useAnimateColor, usePressableFeedback } from '../../utils'
+import { TextStyles } from './styles'
+import { View } from '../View'
+
+export * from './styles'
+
+export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+  text?: React.ReactNode
+  variants?: ComponentVariants<typeof TextStyles>['variants']
+  animated?: boolean
+  colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+  debugName?: string
+} & BaseViewProps & MotiProps
+
+const MotiText = Animated.createAnimatedComponent(_MotiText)
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { variants = [], text, children, style, colorChangeConfig, ...props } = textProps
+
+  const pressPolyfillEnabled = Platform.OS === 'android' && !!props.onPress
+
+  const [pressed, setPressed] = useState(false)
+  const handlePress = (pressed) => {
+    if (!pressPolyfillEnabled) return
+    return () => {
+      if (props.onPress) {
+        setPressed(pressed)
+
+      }
+    }
+  }
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextStyles>('u:Text', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'text',
+  })
+
+  const styles = StyleSheet.flatten([variantStyles.text, style])
+
+  const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
+
+  if (!!text && !TypeGuards.isString(text)) return <>{text}</>
+
+  const Component = textProps.animated ? MotiText : NativeText
+
+  const colorStyle = { color: props.animated ? animatedColor : styles.color }
+
+  const { getFeedbackStyle } = usePressableFeedback(styles, {
+    disabled: !pressPolyfillEnabled,
+    feedbackConfig: variantStyles.pressFeedback,
+    hightlightPropertyIn: 'color',
+    hightlightPropertyOut: 'backgroundColor',
+  })
+  const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
+
+  return <Component {...props}
+    onPressIn={handlePress(true)} onPressOut={handlePress(false)}
+    style={[styles, colorStyle, feedbackStyle]}
+    // @ts-ignore
+    ref={ref}
+  >
+    {text}
+  </Component>
+
+  // @ts-ignore
+  return <Component {...props} style={[styles, colorStyle]} ref={ref}>
+    {text}
+    {children}
+  </Component>
+
+})
+
+// const childArr = React.Children.toArray([
+//   text,
+//   children,
+// ])
+
+// return <View style={[styles, colorStyle]}>
+//   {
+//     childArr.map((child) => {
+//       if (TypeGuards.isString(child)) {
+//         // @ts-ignore
+//         return <Component {...props} ref={ref}>
+//           {child}
+//         </Component>
+
+//       }
+//       return child
+//     })
+//   }
+// </View>

package/src/components/Text/styles.ts

@@ -0,0 +1,50 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets, shadeColor, StylesOf } from '@codeleap/common'
+import { FeedbackConfig } from '../../utils'
+
+export type TextComposition = 'text' | 'touchFeedback'
+
+export type TextStylesGen<TCSS = any> = StylesOf<'text', TCSS> & {
+  'pressFeedback'?: FeedbackConfig
+}
+
+const createTextStyle = createDefaultVariantFactory<
+  TextComposition, TextStylesGen
+>()
+
+const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
+)
+
+export const TextStyles = {
+  ...presets,
+  default: createTextStyle((theme) => {
+    const defaultStyle = assignTextStyle('p1')(theme).text
+    return {
+      text: {
+        fontFamily: theme.typography.fontFamily,
+        ...defaultStyle,
+      },
+      pressFeedback: {
+        type: 'highlight',
+        brightness: 0,
+        shiftOpacity: 0.3,
+      },
+    }
+  }),
+  h1: assignTextStyle('h1'),
+  h2: assignTextStyle('h2'),
+  h3: assignTextStyle('h3'),
+  h4: assignTextStyle('h4'),
+  h5: assignTextStyle('h5'),
+  h6: assignTextStyle('h6'),
+  p1: assignTextStyle('p1'),
+  p2: assignTextStyle('p2'),
+  p3: assignTextStyle('p3'),
+  p4: assignTextStyle('p4'),
+  link: assignTextStyle('p1'),
+  OSAlertBody: createTextStyle((theme) => ({
+    text: {
+      ...assignTextStyle('p1')(theme).text,
+      ...theme.presets.textCenter,
+    },
+  })),
+}

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,27 +2,45 @@ import * as React from 'react'
 import {
   ComponentVariants,
   FormTypes,
+  getNestedStylesByKey,
   IconPlaceholder,
-  TextInputComposition,
-  TextInputStyles,
+
+  TypeGuards,
+
   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, TextProps } 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 }
 
 type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
 
+type SubtitleProps = {
+  errorProps: TextProps
+  styles: Record<'wrapper'|'error'|'subtitle', any>
+}
+
 export type TextInputProps =
   Partial<TextInputMaskProps> &
   ComponentVariants<typeof TextInputStyles> &
@@ -35,18 +53,19 @@ 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
     password?: boolean
     visibilityToggle?: boolean
     touchableWrapper?: boolean
+    subtitle?: string | ((props: SubtitleProps) => React.ReactElement)
     onPress?: () => void
     masking?: FormTypes.TextField['masking']
     innerWrapperProps?: ViewProps
-    wrapperProps?: TouchableProps | ViewProps
+    wrapperProps?: TouchableProps
     onChangeMask?: TextInputMaskProps['onChangeText']
     required?:boolean
   }
@@ -54,7 +73,6 @@ export type TextInputProps =
 export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
   const {
     onChange,
-    type,
     value,
     onChangeText,
     disabled,
@@ -70,9 +88,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     validate,
     password,
     visibilityToggle,
-    touchableWrapper,
     innerWrapperProps,
     masking = null,
+    subtitle = '',
     onChangeMask,
     debugName,
     required = false,
@@ -84,9 +102,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,36 +141,19 @@ 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],
       isFocused ? variantStyles[key + ':focus'] : {},
       showError ? variantStyles[key + ':error'] : {},
     ]
-    return requestedStyles
+    return StyleSheet.flatten(requestedStyles)
   }
 
   function handlePress() {
@@ -162,12 +164,33 @@ 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`,
+  } : {}
+
+  const subtitleStyles = {
+    error: getStyles('error'),
+    wrapper: getStyles('subtitleWrapper'),
+    subtitle: getStyles('subtitle'),
+
+  }
+  const errorProps = { text: error.message, style: subtitleStyles.error }
+
+  const subtitleContent = TypeGuards.isFunction(subtitle) ? subtitle({ styles: subtitleStyles, errorProps }) : <View style={subtitleStyles.wrapper}>
+    <FormError {...errorProps}/>
+    {TypeGuards.isString(subtitle) ? <Text text={subtitle} style={subtitleStyles.subtitle}/> : (subtitle || null)}
+  </View>
+
   return (
     <Touchable
       style={getStyles('wrapper')}
       debugName={debugName}
       onPress={handlePress}
       {...wrapperProps}
+      android_ripple={null}
+      noFeedback
     >
       <InputLabel
         label={label}
@@ -177,7 +200,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,54 +226,73 @@ 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')} />
+      {subtitleContent}
     </Touchable>
   )
 })
 
-export const FormError = ({ message, ...props }) => {
-  if (['number', 'string', 'undefined'].includes(typeof message)) {
-    const text = message ? `${message.charAt(0).toUpperCase() + message.slice(1)}` : ' '
-    return <Text text={text} variants={['p2', 'marginTop:1']} {...props} />
+export const FormError:React.FC<TextProps> = ({ text, ...props }) => {
+  let message = text
+  if (TypeGuards.isNumber(message)) {
+    message = message.toString()
+  }
+  if (typeof message === 'undefined') {
+    message = ''
   }
-  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>
+  if (TypeGuards.isString(message)) {
+    const text = message ? `${message.charAt(0).toUpperCase() + message.slice(1)}` : ' '
+    return <Text text={text} {...props} />
   }
-  return <Icon name={name} style={style} />
+  return <>
+    {text}
+  </>
 }
 
-export const InputLabel = ({ label, variants = [], styles = {}, style, asteriskStyle = null, required = false, wrapperStyle = null }) => {
-  const labelStyles = useDefaultComponentStyle('TextInput', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
+type InputIconProps = {
+  styles: StylesOf<InputIconComposition>
+  commonStyles: StylesOf<InputIconComposition>
+  isFocused: boolean
+  showError: boolean
+} & Omit<ActionIconProps, 'styles'>
 
-  if (!label) return null
+export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFocused, showError, ...props }) => {
+  if (!props.icon) 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(k: ActionIconParts | '') {
+    let key = k
+    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'),
+    touchableFeedback: getStyles('touchableFeedback'),
+  }
+
+  return <ActionIcon
+    styles={iconStyles}
+    {...props}
+  />
 }