@codeleap/mobile 2.3.0 → 2.3.1

package/src/components/Button/index.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+
+  IconPlaceholder,
+  GetRefType,
+  SmartOmit,
+  TypeGuards,
+  deepMerge,
+  PropsOf,
+} from '@codeleap/common'
+
+import {
+  ButtonStyles,
+  ButtonComposition,
+  ButtonParts,
+} from './styles'
+import { forwardRef } from 'react'
+import { StylesOf } from '../../types/utility'
+import { Text } from '../Text'
+import { Touchable, TouchableProps } from '../Touchable'
+import { Icon } from '../Icon'
+import { View, ViewProps } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { StyleSheet } from 'react-native'
+export * from './styles'
+
+type ChildProps = {
+  styles: StylesOf<ButtonParts>
+  pressed: boolean
+  props: Omit<ButtonProps, 'children'>
+}
+
+type BadgeProps = Partial<ViewProps> & {
+  text?: string
+  children?: React.ReactElement | ((props: Partial<SmartOmit<BadgeProps, 'children'>>) => React.ReactElement)
+  styles?: StylesOf<'text'|'wrapper'>
+  position?: [number, number]
+  textProps?: Partial<PropsOf<typeof Text>>
+}
+
+export type ButtonProps = Omit<TouchableProps, 'variants'> &
+  ComponentVariants<typeof ButtonStyles> & {
+    text?: string
+    rightIcon?: IconPlaceholder
+    icon?: IconPlaceholder
+    styles?: StylesOf<ButtonComposition>
+    loading?: boolean
+    debounce?: number
+    debugName: string
+    badge?: React.ReactElement | BadgeProps
+    children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
+  }
+
+export const Badge = forwardRef<GetRefType<ViewProps['ref']>, BadgeProps>((props, ref) => {
+  const {
+    children = null,
+    styles,
+    text,
+    textProps = {},
+    ...viewProps
+  } = props
+
+  return <View style={[styles.wrapper]} {...viewProps} ref={ref}>
+    {text && <Text text={text} style={styles.text} {...textProps}/>}
+    {(TypeGuards.isFunction(children) ? children({ ...viewProps, styles, text }) : children)}
+  </View>
+})
+
+export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>((buttonProps, ref) => {
+  const {
+    variants = [],
+    children,
+    icon,
+    text,
+    loading,
+    styles = {},
+    onPress,
+    disabled,
+    badge = null,
+    rightIcon,
+    debounce = 600,
+    style,
+    ...props
+  } = buttonProps
+  const [pressed, setPressed] = React.useState(false)
+
+  const variantStyles = useDefaultComponentStyle('u: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],
+      key === 'wrapper' && style,
+      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)
+
+  const _styles = {
+    wrapper: getStyles('wrapper'),
+    loader: getStyles('loader'),
+    leftIcon: leftIconStyle,
+    rightIcon: rightIconStyle,
+    text: getStyles('text'),
+    icon: getStyles('icon'),
+
+  }
+
+  const childrenContent = typeof children === 'function' ?
+    children({ styles: _styles, props: buttonProps, pressed })
+    : children
+
+  let _badge = null
+
+  if (badge) {
+    _badge = React.isValidElement(badge) ? badge : <Badge {...badge} styles={deepMerge({
+      text: variantStyles.badgeText,
+      wrapper: variantStyles.badgeWrapper,
+    }, badge?.styles || {})}/>
+
+  }
+
+  return (
+    <Touchable
+      style={_styles.wrapper}
+      onPress={handlePress}
+      ref={ref}
+      disabled={disabled}
+      styles={{
+        feedback: variantStyles.feedback,
+      }}
+      debugComponent={'Button'}
+      noFeedback={!onPress}
+      {...props}
+    >
+      {_badge}
+      {loading && <ActivityIndicator style={_styles.loader} />}
+      {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText && !!rightIcon}/>}
+      {text ? <Text text={text} style={_styles.text} /> : null}
+      {childrenContent}
+      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={(hasText && !!icon) || loading} />
+    </Touchable>
+  )
+})

package/src/components/Button/styles.ts

@@ -0,0 +1,129 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { TouchableStylesGen } from '../Touchable'
+
+export type ButtonStates = 'disabled'
+export type ButtonParts =
+| 'text'
+| 'inner'
+| 'wrapper'
+| 'icon'
+| 'leftIcon'
+| 'rightIcon'
+| 'loader'
+| `loader${Capitalize<ActivityIndicatorComposition>}`
+| 'badgeText'
+| 'badgeWrapper'
+
+export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+
+export type ButtonStylesGen<TCSS = any> = StylesOf<ButtonComposition, TCSS> & {
+  feedback?: TouchableStylesGen['feedback']
+}
+
+const createButtonStyle = createDefaultVariantFactory<ButtonComposition, ButtonStylesGen >()
+
+const presets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))
+
+export const ButtonStyles = {
+  ...presets,
+  default: createButtonStyle((theme) => ({
+    wrapper: {
+
+      flexDirection: 'row',
+      backgroundColor: theme.colors.primary,
+      ...theme.presets.justifyCenter,
+      ...theme.presets.alignCenter,
+      ...theme.spacing.paddingHorizontal(2.5),
+    },
+    text: {
+      textAlign: 'center',
+      // ...theme.spacing.marginHorizontal(2.5),
+    },
+    loader: {
+      height: 20,
+      width: 20,
+    },
+
+    loaderFrontCircle: {
+      borderTopColor: theme.colors.white,
+    },
+    'wrapper:disabled': {
+      backgroundColor: theme.colors.disabled,
+      opacity: 0.9,
+      cursor: 'auto',
+
+    },
+    badgeWrapper: {
+      backgroundColor: theme.colors.negative,
+      position: 'absolute',
+      ...theme.spacing.padding(2.5),
+    },
+    badgeText: {
+      color: theme.colors.white,
+    },
+
+    leftIcon: {
+      ...theme.sized(4),
+      ...theme.spacing.marginRight('auto'),
+      // ...theme.spacing.marginLeft(2.5),
+    },
+    rightIcon: {
+      ...theme.spacing.marginLeft('auto'),
+      // ...theme.spacing.marginRight(2.5),
+      ...theme.sized(4),
+    },
+
+  })),
+  negative: createButtonStyle((theme) => ({
+    wrapper: {
+      backgroundColor: theme.colors.negative,
+
+    },
+
+  })),
+
+  circle: createButtonStyle((theme) => ({
+    wrapper: {
+      borderRadius: 100,
+      ...theme.spacing.padding(1),
+    },
+  })),
+  pill: createButtonStyle((theme) => ({
+    wrapper: {
+      borderRadius: theme.borderRadius.medium,
+      ...theme.spacing.paddingHorizontal(1),
+      ...theme.spacing.paddingVertical(0.5),
+    },
+  })),
+  icon: createButtonStyle((theme) => ({
+    wrapper: {
+      backgroundColor: 'transparent',
+      aspectRatio: 1,
+      display: 'flex',
+      ...theme.presets.center,
+      ...theme.spacing.padding(0),
+
+    },
+    text: {
+      flex: 1,
+      textAlign: 'center',
+    },
+    loader: {
+      ...theme.spacing.margin(0),
+    },
+    icon: {
+      ...theme.spacing.margin(0),
+      ...theme.presets.center,
+      height: null,
+      width: null,
+      color: theme.colors.icon,
+    },
+    leftIcon: {
+      ...theme.spacing.marginRight(0),
+    },
+    rightIcon: {
+      ...theme.spacing.marginRight(0),
+    },
+  })),
+}

package/src/components/Calendar/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { ComponentVariants, PropsOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { format, formatISO } from 'date-fns'
+// @ts-ignore
+import { Calendar as RNCalendar, CalendarProps as RNCalendarProps, DateData } from 'react-native-calendars'
+
+import { View } from '../View'
+import { CalendarStyles } from './style'
+import { TCalendarStyles } from './types'
+export type CalendarProps = PropsOf<typeof View> & {
+  styles?: TCalendarStyles
+  onValueChange?: (date: Date|string) => any
+  value?: Date|string
+  calendarProps?: RNCalendarProps
+} & ComponentVariants<typeof CalendarStyles>
+export * from './style'
+export * from './types'
+
+export const Calendar = (props:CalendarProps) => {
+  const {
+    variants = [],
+    style,
+    styles = {},
+    calendarProps,
+    value,
+    onValueChange,
+    ...viewProps
+  } = props
+  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarStyles>('u:Calendar', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+  })
+  const isDateObject = TypeGuards.isInstance(value, Date)
+  const stringValue:string = isDateObject ? format(value, 'yyyy/MM/dd') : value
+
+  function handleChange(date:DateData) {
+    if (!onValueChange) return
+    if (isDateObject) {
+      onValueChange(new Date(date.timestamp))
+    } else {
+      onValueChange(date.dateString)
+    }
+  }
+
+  return <View style={[variantStyles.wrapper, style]} {...viewProps}>
+    <RNCalendar
+      onDayPress={handleChange}
+      current={new Date(value).toISOString()}
+      monthFormat={'MMMM yyyy'}
+      markedDates={{
+        [stringValue]: { selected: true },
+      }}
+      theme={{
+        ...variantStyles.theme,
+        stylesheet: {
+          ...variantStyles,
+        },
+      }}
+      {...calendarProps}
+    />
+  </View>
+}

package/src/components/Calendar/style.ts

@@ -0,0 +1,35 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { TCalendarStyles, CalendarComposition } from './types'
+
+const createCalendarStyle = createDefaultVariantFactory<CalendarComposition, TCalendarStyles>()
+
+export const CalendarStyles = {
+  default: createCalendarStyle((theme) => ({
+    theme: {
+      backgroundColor: '#0000',
+      calendarBackground: '#0000',
+      textSectionTitleColor: theme.colors.textH,
+      textSectionTitleDisabledColor: theme.colors.disabled,
+      selectedDayBackgroundColor: theme.colors.primary,
+      selectedDayTextColor: theme.colors.white,
+      todayTextColor: theme.colors.textH,
+      dayTextColor: theme.colors.textP,
+      textDisabledColor: theme.colors.disabled,
+      dotColor: theme.colors.primary,
+      selectedDotColor: theme.colors.primary,
+      arrowColor: theme.colors.primary,
+      disabledArrowColor: theme.colors.disabled,
+      monthTextColor: theme.colors.textH,
+      indicatorColor: theme.colors.backgroundSecondary,
+      textDayFontFamily: theme.typography.fontFamily,
+      textMonthFontFamily: theme.typography.fontFamily,
+      textDayHeaderFontFamily: theme.typography.fontFamily,
+      textDayFontWeight: '400',
+      textMonthFontWeight: 'bold',
+      textDayHeaderFontWeight: '400',
+      textDayFontSize: 16,
+      textMonthFontSize: 22,
+      textDayHeaderFontSize: 15,
+    },
+  })),
+}

package/src/components/Calendar/types.ts

@@ -0,0 +1,102 @@
+import { FilterKeys } from '@codeleap/common'
+import { Paths } from '@codeleap/common/dist/types/pathMapping'
+import { TextStyle, ViewStyle } from 'react-native';
+
+type CalendarTheme = {
+    timelineContainer?: object;
+    contentStyle?: ViewStyle;
+    event?: object;
+    eventTitle?: object;
+    eventSummary?: object;
+    eventTimes?: object;
+    line?: object;
+    verticalLine?: object;
+    nowIndicatorLine?: object;
+    nowIndicatorKnob?: object;
+    timeLabel?: object;
+    todayTextColor?: string;
+    calendarBackground?: string;
+    indicatorColor?: string;
+    textSectionTitleColor?: string;
+    textSectionTitleDisabledColor?: string;
+    dayTextColor?: string;
+    selectedDayTextColor?: string;
+    monthTextColor?: string;
+    selectedDayBackgroundColor?: string;
+    arrowColor?: string;
+    textDisabledColor?: string;
+    textInactiveColor?: string;
+    backgroundColor?: string; //TODO: remove in V2
+    dotColor?: string;
+    selectedDotColor?: string;
+    disabledArrowColor?: string;
+    textDayFontFamily?: TextStyle['fontFamily'];
+    textMonthFontFamily?: TextStyle['fontFamily'];
+    textDayHeaderFontFamily?: TextStyle['fontFamily'];
+    textDayFontWeight?: TextStyle['fontWeight'];
+    textMonthFontWeight?: TextStyle['fontWeight'];
+    textDayHeaderFontWeight?: TextStyle['fontWeight'];
+    textDayFontSize?: number;
+    textMonthFontSize?: number;
+    textDayHeaderFontSize?: number;
+    agendaDayTextColor?: string;
+    agendaDayNumColor?: string;
+    agendaTodayColor?: string;
+    agendaKnobColor?: string;
+    todayButtonFontFamily?: TextStyle['fontFamily'];
+    todayButtonFontWeight?: TextStyle['fontWeight'];
+    todayButtonFontSize?: number;
+    textDayStyle?: TextStyle;
+    dotStyle?: object;
+    arrowStyle?: ViewStyle;
+    todayBackgroundColor?: string;
+    disabledDotColor?: string;
+    inactiveDotColor?: string;
+    todayDotColor?: string;
+    todayButtonTextColor?: string;
+    todayButtonPosition?: string;
+    arrowHeight?: number;
+    arrowWidth?: number;
+    weekVerticalMargin?: number;
+    stylesheet?: {
+      calendar?: {
+        main?: object; 
+        header?: object;
+      };
+      day?: {
+        basic?: object; 
+        period?: object;
+      };
+      dot?: object;
+      marking?: object;
+      'calendar-list'?: {
+        main?: object;
+      };
+      agenda?: {
+        main?: object; 
+        list?: object;
+      };
+      expandable?: {
+        main?: object;
+      };
+    };
+  }
+
+type FlatStyleKeys = 'dot' | 'marking'
+
+type StyleSheetKeys = Exclude<keyof CalendarTheme['stylesheet'], FlatStyleKeys>
+
+type ThemeObjPrimitiveKeys = FilterKeys<CalendarTheme, string|number>
+
+type ThemeObjCompositionKeys = Exclude<keyof CalendarTheme, ThemeObjPrimitiveKeys | 'stylesheet'>
+
+type StyleSheetObjKeys = Exclude<Paths<CalendarTheme['stylesheet']>, StyleSheetKeys>
+
+export type CalendarStyleGen<TCSS = any> = {
+    theme?: Partial<{
+        [P in ThemeObjPrimitiveKeys]: CalendarTheme[P]
+    }>
+} & Partial<Record<StyleSheetObjKeys | 'wrapper' | ThemeObjCompositionKeys, TCSS>>
+
+export type CalendarComposition = keyof CalendarStyleGen
+export type TCalendarStyles = CalendarStyleGen<any>

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  Form,
+  useValidate,
+  GetRefType,
+  PropsOf,
+} from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { StyleSheet, Switch as NativeCheckbox } from 'react-native'
+import { FormError } from '../TextInput'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import {
+  CheckboxStyles,
+  CheckboxComposition,
+} from './styles'
+import { InputLabel } from '../InputLabel'
+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
+  required?: boolean
+}
+
+export const Checkbox = forwardRef<GetRefType<PropsOf<typeof View>['ref']>, CheckboxProps>(
+  (checkboxProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      label,
+      value,
+      onValueChange,
+      validate,
+      required,
+      ...props
+    } = checkboxProps
+
+    const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxStyles>('u:Checkbox', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+    })
+
+    const { error, showError } = useValidate(value, validate)
+
+    function getStyles(key: CheckboxComposition, styleObj = variantStyles) {
+      return [
+        styleObj[key],
+        value ? styleObj[key + ':checked'] : {},
+        showError ? styleObj[key + ':error'] : {},
+        checkboxProps.disabled ? styleObj[key + ':disabled'] : {},
+      ]
+    }
+
+    return (
+      <View style={[getStyles('wrapper'), style]} ref={ref} {...props}>
+        <Touchable
+          debugName={`Set checkbox value to ${!value}`}
+          style={getStyles('input')}
+          onPress={() => onValueChange(!value)}
+          styles={{
+            feedback: getStyles('inputFeedback'),
+          }}
+        >
+          <View style={getStyles('checkmarkWrapper')}>
+            <View style={getStyles('checkmark')} />
+          </View>
+
+          <InputLabel label={label} styles={{
+            asterisk: getStyles('labelAsterisk'),
+            wrapper: getStyles('labelWrapper'),
+            text: getStyles('labelText'),
+          }} required={required}/>
+
+        </Touchable>
+        <FormError text={error.message} style={getStyles('error')} />
+      </View>
+    )
+  },
+)

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,81 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+
+type CheckboxParts =
+  | 'wrapper'
+  | 'input'
+  | 'inputFeedback'
+  | 'checkmark'
+  | 'checkmarkWrapper'
+  | 'error'
+  | `label${Capitalize<InputLabelComposition>}`
+
+export type CheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:checked`
+  | `${CheckboxParts}:disabled`
+  | `${CheckboxParts}:error`
+const createCheckboxStyle =
+  createDefaultVariantFactory<CheckboxComposition>()
+
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
+)
+
+export const CheckboxStyles = {
+  ...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,
+
+      },
+      labelWrapper: {
+        // flex: 1,
+        ...theme.spacing.marginLeft(1),
+
+      },
+      inputFeedback: {
+        type: 'opacity',
+        value: 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,
+        borderRadius: theme.borderRadius.small,
+        height: size,
+        ...theme.border.neutral(1),
+      },
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
+      },
+      error: {
+        color: theme.colors.negative,
+      },
+    }
+  }),
+}