@codeleap/mobile 1.3.0 → 1.4.1

package/src/components/Button.tsx

@@ -1,62 +1,95 @@
-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])}/>}
-      {text ? <Text text={text} style={[variantStyles.text, styles.text]}/> : null}
-      {children}
-      <Icon name={rightIcon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.rightIcon, styles.rightIcon])}/>
-    </Touchable>
-  )
-})
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  ButtonStyles,
+  ComponentVariants,
+  ButtonComposition,
+  ButtonParts,
+  IconPlaceholder,
+} 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 { 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
+    debounce?: number
+    debugName: string // NOTE this should not be optional
+  }
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>((buttonProps, ref) => {
+  const {
+    variants = [],
+    children,
+    icon,
+    text,
+    loading,
+    styles = {},
+    onPress,
+    disabled,
+    rightIcon,
+    debugName,
+    debounce = 600,
+    ...props
+  } = buttonProps
+  const [pressed, setPressed] = React.useState(false)
+
+  const variantStyles = useDefaultComponentStyle('Button', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  function handlePress() {
+    if (!pressed) {
+      setPressed(true)
+
+      setTimeout(() => setPressed(false), debounce)
+
+      onPress && onPress()
+    }
+  }
+
+  function getStyles(key: ButtonParts) {
+    return [
+      variantStyles[key],
+      disabled && variantStyles[key + ':disabled'],
+      styles[key],
+      disabled && styles[key + ':disabled'],
+    ]
+  }
+
+  const iconStyle = getStyles('icon')
+
+  const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
+  const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
+
+  const hasText = !!(text || children)
+  return (
+    <Touchable
+      style={getStyles('wrapper')}
+      onPress={handlePress}
+      ref={ref}
+      disabled={disabled}
+      debugComponent={'Button'}
+      {...props}
+      debugName={debugName || text || icon || 'Some button'}
+    >
+
+      {loading && <ActivityIndicator style={getStyles('loader')} />}
+      {!loading && <Icon name={icon} style={leftIconStyle} renderEmptySpace={hasText}/>}
+      {text ? <Text text={text} style={getStyles('text')} /> : null}
+      {children}
+      <Icon name={rightIcon} style={rightIconStyle} renderEmptySpace={hasText} />
+    </Touchable>
+  )
+})

package/src/components/Checkbox/index.tsx

@@ -1,68 +1,81 @@
-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>
-})
+import * as React from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  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.ValidatorFunctionWithoutForm | string
+}
+
+export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
+  (checkboxProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      label,
+      value,
+      onValueChange,
+      validate,
+      ...props
+    } = checkboxProps
+
+    const variantStyles = useDefaultComponentStyle('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
+          debugName={`Set checkbox value to ${!value}`}
+          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

@@ -1,63 +1,72 @@
-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
-      }
-    }
-  }),
-
-}
+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.neutral(1),
+      },
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
+      },
+      error: {
+        color: theme.colors.negative,
+      },
+    }
+  }),
+}

package/src/components/ContentView.tsx

@@ -1,52 +1,58 @@
-import React from 'react'
-import { ComponentVariants, ContentViewStyles, useComponentStyle, ViewComposition } from '@codeleap/common'
-import { ViewProps, View } from './View'
-import { Text } from './Text'
-import { StylesOf } from '../types/utility'
-import { ActivityIndicator } from './ActivityIndicator'
-
-export type ContentViewProps = Omit<ViewProps, 'variants' | 'responsiveVariants'> & {
-  placeholderMsg: string
-  loading?: boolean
-  styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
-
-const WrapContent = ({ children, ...props }) => <View {...props}>{children}</View>
-
-export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const {
-    children,
-    placeholderMsg,
-    loading,
-    variants,
-    styles,
-    ...props
-  } = rawProps
-
-  const variantStyle = useComponentStyle('ContentView', {
-    variants,
-    styles,
-  })
-
-  if (loading) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        <ActivityIndicator styles={{wrapper: variantStyle.loader}}/>
-      </WrapContent>
-    )
-  }
-  const hasChildren = Object.keys(children || {}).length > 0
-  if (hasChildren) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        {children}
-      </WrapContent>
-    )
-  }
-
-  return (
-    <WrapContent {...props} style={styles}>
-      <Text text={placeholderMsg} />
-    </WrapContent>
-  )
-}
+import React from 'react'
+import {
+  ComponentVariants,
+  ContentViewStyles,
+  useDefaultComponentStyle,
+  ViewComposition,
+} from '@codeleap/common'
+import { ViewProps, View } from './View'
+import { Text } from './Text'
+import { StylesOf } from '../types/utility'
+import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet } from 'react-native'
+
+export type ContentViewProps = Omit<
+  ViewProps,
+  'variants' | 'responsiveVariants'
+> & {
+  placeholderMsg: string
+  loading?: boolean
+  styles?: StylesOf<ViewComposition>
+} & ComponentVariants<typeof ContentViewStyles>
+
+const WrapContent = ({ children, ...props }) => (
+  <View {...props}>{children}</View>
+)
+
+export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
+  const { children, placeholderMsg, loading, variants, styles, ...props } =
+    rawProps
+
+  const variantStyle = useDefaultComponentStyle('ContentView', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  if (loading) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
+      </WrapContent>
+    )
+  }
+  const hasChildren = Object.keys(children || {}).length > 0
+  if (hasChildren) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        {children}
+      </WrapContent>
+    )
+  }
+
+  return (
+    <WrapContent {...props} style={styles}>
+      <Text text={placeholderMsg} />
+    </WrapContent>
+  )
+}