@codeleap/mobile 2.2.11 → 2.3.0

package/src/components/Button/index.tsx

@@ -1,167 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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,
-      },
-    }
-  }),
-}