@codeleap/mobile 2.3.0 → 2.3.2

package/src/components/TextInput/styles.ts

@@ -0,0 +1,127 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconParts } from '../ActionIcon'
+import { InputLabelComposition } from '../InputLabel'
+
+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'
+  | 'innerWrapper'
+  | 'error'
+  | 'subtitle'
+  | 'subtitleWrapper'
+  | 'placeholder'
+  | 'selection'
+  | `label${Capitalize<InputLabelComposition>}`
+
+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',
+    },
+
+    labelWrapper: {
+      ...theme.spacing.marginBottom(1),
+
+    },
+    labelText: {
+      ...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(0.5),
+    },
+    rightIconTouchableWrapper: {
+      // ...theme.spacing.marginLeft(0.5),
+    },
+    error: {
+      color: theme.colors.negative,
+
+    },
+    subtitleWrapper: {
+      ...theme.spacing.marginTop(0.2),
+      ...theme.presets.row,
+      ...theme.presets.justifySpaceBetween,
+      ...theme.presets.alignCenter,
+    },
+    subtitle: {
+      ...theme.presets.textRight,
+    },
+    'labelText:error': {
+      color: theme.colors.negative,
+    },
+
+    'innerWrapper:error': {
+      ...theme.border.negative(1),
+    },
+    'innerWrapper:focus': {
+      ...theme.border.primary(1),
+    },
+
+  })),
+  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,174 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+
+  useCodeleapContext,
+  AnyFunction,
+  TypeGuards,
+} from '@codeleap/common'
+import { 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'
+import { usePressableFeedback } from '../../utils'
+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
+  onPress?: AnyFunction
+  noFeedback?: boolean
+  debounce?: number
+  styles?: StylesOf<TouchableComposition>
+} & BaseViewProps
+export * from './styles'
+
+export const Touchable: React.FC<TouchableProps> = forwardRef<
+  RNView,
+  TouchableProps
+>((touchableProps, ref) => {
+  const {
+    variants = [],
+    children,
+    onPress,
+    style,
+    debugName,
+    debugComponent,
+    debounce = 1000,
+    noFeedback = false,
+    styles,
+    ...props
+  } = touchableProps
+  const pressed = React.useRef(false)
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+    styles,
+  })
+
+  const { logger } = useCodeleapContext()
+
+  const press = () => {
+    if (!onPress) {
+      logger.warn('No onPress passed to touchable', {
+        touchableProps,
+      }, 'User Interaction')
+      return
+    }
+    const _onPress = () => {
+      logger.log(
+        `<${debugComponent || 'Touchable'}/>  pressed`,
+        debugName || variants,
+        'User interaction',
+      )
+      onPress && onPress()
+    }
+    if (TypeGuards.isNumber(debounce)) {
+      if (pressed.current) {
+        return
+      }
+      pressed.current = true
+      _onPress()
+      setTimeout(() => {
+        pressed.current = false
+      }, debounce)
+    } else {
+      _onPress()
+    }
+
+  }
+
+  const _styles = StyleSheet.flatten([variantStyles.wrapper, style])
+
+  const disableFeedback = !onPress || noFeedback
+
+  const { rippleConfig, getFeedbackStyle } = usePressableFeedback(_styles, {
+    hightlightPropertyIn: 'backgroundColor',
+    hightlightPropertyOut: 'backgroundColor',
+    disabled: disableFeedback,
+    feedbackConfig: variantStyles?.feedback,
+  })
+
+  const Wrapper = View
+
+  const { wrapperStyle, pressableStyle } = React.useMemo(() => {
+    const wrapperkeys = [
+      'margin',
+      'alignSelf',
+      'border',
+      'top!',
+      'left!',
+      'right!',
+      'bottom!',
+      'position!',
+      // 'flex!',
+    ]
+    const sharedKeys = [
+      'width!',
+      'height!',
+      'flex!',
+      'backgroundColor!',
+
+    ]
+
+    const wrapperStyle = {} as any
+    const pressableStyle = {} as any
+    const match = (k, key) => {
+      if (k.endsWith('!')) {
+        return key === k.substring(0, k.length - 1)
+      } else {
+
+        return key.startsWith(k)
+      }
+    }
+    Object.entries(_styles).forEach(([key, value]) => {
+
+      if (wrapperkeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+      } else if (sharedKeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+
+        pressableStyle[key] = value
+      } else {
+        pressableStyle[key] = value
+      }
+    })
+
+    wrapperStyle.overflow = 'hidden'
+    // wrapperStyle.flexDirection = 'row'
+    // wrapperStyle.alignItems = 'stretch'
+
+    return {
+      wrapperStyle,
+      pressableStyle,
+    }
+  }, [JSON.stringify(_styles)])
+
+  return (
+    <Wrapper style={[wrapperStyle]}>
+      <Pressable onPress={press} style={({ pressed }) => ([
+
+        // defaultPressableStyles,
+        pressableStyle,
+        // !!rippleConfig && ripplePressableStyles,
+        getFeedbackStyle(pressed),
+        variantStyles.pressable,
+      ])} 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,28 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { TouchableFeedbackConfig } from '../../utils'
+
+export type TouchableComposition = 'wrapper' | 'feedback' | 'pressable'
+
+export type TouchableStylesGen<TCSS = any> = StylesOf<Exclude<TouchableComposition, 'feedback'>> & {
+  feedback?: TouchableFeedbackConfig
+}
+
+const createTouchableStyle = createDefaultVariantFactory<
+  TouchableComposition,
+  TouchableStylesGen
+>()
+
+const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })),
+)
+
+export const TouchableStyles = {
+  ...presets,
+  default: createTouchableStyle((t) => ({
+    feedback: {
+      type: 'opacity',
+      value: 0.5,
+    },
+  })),
+
+}

package/src/components/View/index.tsx

@@ -0,0 +1,103 @@
+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'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+
+export * from './styles'
+
+export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
+  ComponentVariants<typeof ViewStyles> & {
+    ref?: any
+    component?: any
+    animated?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
+  } & BaseViewProps
+
+export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeView, ViewProps & Partial<MotiProps>>((viewProps, ref) => {
+  const {
+    responsiveVariants = {},
+    variants = [],
+    children,
+    style,
+    keyboardAware,
+    component,
+    animated = false,
+    ...props
+  } = viewProps
+
+  const variantStyles = useDefaultComponentStyle('View', {
+    responsiveVariants,
+    variants,
+  })
+  const Component = animated ? MotiView : (component || NativeView)
+  const keyboard = useKeyboardAwareView()
+  const _props = keyboard.getKeyboardAwareProps(
+    {
+      style: [variantStyles.wrapper, style], ref: ref, ...props,
+    },
+    {
+      adapt: 'paddingBottom',
+      baseStyleProp: 'style',
+
+      enabled: false,
+      ...keyboardAware,
+    },
+  )
+  return (
+    <Component {..._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

@@ -0,0 +1,42 @@
+export * from './View'
+export * from './Animated'
+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 './ContentView'
+export * from './Sections'
+export * from './Select'
+export * from './FileInput'
+export * from './Slider'
+export * from './SegmentedControl'
+export * from './Navigation'
+export * from './Scroll'
+export * from './List'
+export * from './ActivityIndicator'
+export * from './Button'
+export * from './ContentView'
+export * from './Modal'
+export * from './Calendar'
+export * from './ImageView'
+export * from './Navigation'
+export * from './Pager'
+export * from './EmptyPlaceholder'
+export * from './Backdrop'
+export * from './Drawer'
+export * from './MultiSelect'
+export * from './AutoComplete'
+export * from './Grid'
+export * from './InputLabel'
+export * from './ActionIcon'
+
+import * as Legacy from './legacy'
+export {
+  Legacy,
+}
+
+export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -0,0 +1,62 @@
+import { ViewStyles } from './View'
+import { IconStyles } from './Icon'
+import { TouchableStyles } from './Touchable'
+import { TextStyles } from './Text'
+import { ImageStyles } from './Image'
+import { CheckboxStyles } from './Checkbox'
+import { TextInputStyles } from './TextInput'
+import { RadioInputStyles } from './RadioInput'
+import { SwitchStyles } from './Switch'
+import { SelectStyles } from './Select'
+import { FileInputStyles } from './FileInput'
+import { SliderStyles } from './Slider'
+import { SegmentedControlStyles } from './SegmentedControl'
+import { ActivityIndicatorStyles } from './ActivityIndicator'
+import { ButtonStyles } from './Button'
+import { ContentViewStyles } from './ContentView'
+import { ModalStyles } from './Modal'
+import { EmptyPlaceholderStyles } from './EmptyPlaceholder'
+import { BackdropStyles } from './Backdrop'
+import { PagerStyles } from './Pager'
+import { CalendarStyles } from './Calendar'
+import { DrawerStyles } from './Drawer/styles'
+import { ListStyles, PaginationIndicatorStyles } from './List'
+import { AutoCompleteStyles } from './AutoComplete'
+import { MultiSelectStyles } from './MultiSelect'
+import { ScrollStyles } from './Scroll'
+import { ActionIconStyles } from './ActionIcon'
+import { GridStyles } from './Grid'
+import { InputLabelStyles } from './InputLabel'
+
+export const defaultStyles = {
+  View: ViewStyles,
+  Icon: IconStyles,
+  Touchable: TouchableStyles,
+  Text: TextStyles,
+  Image: ImageStyles,
+  Checkbox: CheckboxStyles,
+  TextInput: TextInputStyles,
+  RadioInput: RadioInputStyles,
+  Switch: SwitchStyles,
+  Select: SelectStyles,
+  FileInput: FileInputStyles,
+  List: ListStyles,
+  Slider: SliderStyles,
+  SegmentedControl: SegmentedControlStyles,
+  ActivityIndicator: ActivityIndicatorStyles,
+  Button: ButtonStyles,
+  ContentView: ContentViewStyles,
+  Modal: ModalStyles,
+  EmptyPlaceholder: EmptyPlaceholderStyles,
+  Backdrop: BackdropStyles,
+  Calendar: CalendarStyles,
+  Pager: PagerStyles,
+  Drawer: DrawerStyles,
+  AutoComplete: AutoCompleteStyles,
+  MultiSelect: MultiSelectStyles,
+  Scroll: ScrollStyles,
+  PaginationIndicator: PaginationIndicatorStyles,
+  ActionIcon: ActionIconStyles,
+  Grid: GridStyles,
+  InputLabel: InputLabelStyles,
+}