@codeleap/mobile 1.9.33 → 2.0.2

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

@@ -5,6 +5,8 @@ import {
   StylesOf,
   Form,
   useValidate,
+  GetRefType,
+  PropsOf,
 } from '@codeleap/common'
 import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
 import { Switch as NativeCheckbox } from 'react-native'
@@ -12,8 +14,8 @@ import { InputLabel, FormError } from '../TextInput'
 import { View } from '../View'
 import { Touchable } from '../Touchable'
 import {
-  MobileCheckboxStyles as CheckboxStyles,
-  MobileCheckboxComposition as CheckboxComposition,
+  CheckboxStyles,
+  CheckboxComposition,
 } from './styles'
 export * from './styles'
 
@@ -29,7 +31,7 @@ type CheckboxProps = NativeCheckboxProps & {
   required?: boolean
 }
 
-export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
+export const Checkbox = forwardRef<GetRefType<PropsOf<typeof View>['ref']>, CheckboxProps>(
   (checkboxProps, ref) => {
     const {
       variants = [],
@@ -65,11 +67,14 @@ export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
     }
 
     return (
-      <View style={getStyles('wrapper')} {...props}>
+      <View style={getStyles('wrapper')} 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')} />
@@ -78,7 +83,7 @@ export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
             <InputLabel label={label} style={getStyles('label')} required={required}/>
           </View>
         </Touchable>
-        <FormError message={error.message} style={getStyles('error')} />
+        <FormError text={error.message} style={getStyles('error')} />
       </View>
     )
   },

package/src/components/Checkbox/styles.ts

@@ -5,22 +5,23 @@ type CheckboxParts =
   | 'label'
   | 'labelWrapper'
   | 'input'
+  | 'inputFeedback'
   | 'checkmark'
   | 'checkmarkWrapper'
   | 'error'
 
-export type MobileCheckboxComposition =
+export type CheckboxComposition =
   | CheckboxParts
   | `${CheckboxParts}:checked`
   | `${CheckboxParts}:disabled`
   | `${CheckboxParts}:error`
 const createCheckboxStyle =
-  createDefaultVariantFactory<MobileCheckboxComposition>()
+  createDefaultVariantFactory<CheckboxComposition>()
 
 const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
 )
 
-export const MobileCheckboxStyles = {
+export const CheckboxStyles = {
   ...presets,
   default: createCheckboxStyle((theme) => {
     const size = theme.typography.baseFontSize * 1.2
@@ -40,6 +41,10 @@ export const MobileCheckboxStyles = {
       labelWrapper: {
         flex: 1,
       },
+      inputFeedback: {
+        type: 'opacity',
+        value: 0.5,
+      },
       label: {
         ...theme.spacing.marginLeft(0.5),
       },

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

@@ -1,16 +1,21 @@
 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 {
+  ContentViewStyles,
+} from './styles'
+import { ViewProps, View, ViewComposition } from '../View'
+import { Text } from '../Text'
+import { StylesOf } from '../../types'
+import { ActivityIndicator } from '../ActivityIndicator'
 import { StyleSheet } from 'react-native'
 
+export * from './styles'
+
 export type ContentViewProps = Omit<
   ViewProps,
   'variants' | 'responsiveVariants'

package/src/components/ContentView/styles.ts

@@ -0,0 +1,25 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ContentViewComposition = 'placeholder' | 'wrapper' | 'loader'
+
+const createContentViewStyle =
+  createDefaultVariantFactory<ContentViewComposition>()
+
+const presets = includePresets((styles) => createContentViewStyle(() => ({ wrapper: styles })),
+)
+
+export const ContentViewStyles = {
+  ...presets,
+  default: createContentViewStyle((theme) => ({
+    wrapper: {
+      display: 'flex',
+      ...theme.presets.column,
+      ...theme.presets.alignCenter,
+    },
+    loader: {
+      alignSelf: 'center',
+      height: 100,
+      width: 100,
+    },
+  })),
+}

package/src/components/Drawer/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { ComponentVariants, useDefaultComponentStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import Modal, { ModalProps } from '../Modal'
+import { DrawerStyles } from './styles'
+export * from './styles'
+export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerStyles>
+
+export const Drawer:React.FC<DrawerProps> = (props) => {
+  const { variants, styles, ...modalProps } = props
+
+  const variantStyles = useDefaultComponentStyle('u:Drawer', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  return <Modal
+    styles={variantStyles}
+
+    {...modalProps}
+  />
+}

package/src/components/Drawer/styles.ts

@@ -0,0 +1,38 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ModalComposition, ModalStyles } from '../Modal'
+
+export type DrawerComposition = ModalComposition
+const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
+
+export const DrawerStyles = {
+  ...ModalStyles,
+  default: createDrawerStyle((theme) => {
+    const defaultStyle = ModalStyles.default(theme)
+
+    return {
+      ...defaultStyle,
+      box: {
+        width: '100%',
+        maxHeight: theme.values.height * 0.7,
+        paddingBottom: (theme.values.bottomNavHeight ?? 0) + theme.spacing.value(1),
+      },
+      innerWrapperScroll: {
+        ...theme.presets.justifyEnd,
+      },
+
+      'box:hidden': {
+        translateY: theme.values.height,
+        opacity: 1,
+        scale: 1,
+      },
+      'box:visible': {
+        translateY: 0,
+        scale: 1,
+        opacity: 1,
+      },
+      'box:transition': {
+        translateY: theme.values.transitions.modal,
+      },
+    }
+  }),
+}

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

@@ -1,18 +1,25 @@
 import React, { useMemo } from 'react'
-import { Icon } from './Icon'
-import { View } from './View'
-import { Text } from './Text'
-import { ActivityIndicator } from './ActivityIndicator'
+import { Icon } from '../Icon'
+import { View } from '../View'
+import { Text } from '../Text'
+import { ActivityIndicator } from '../ActivityIndicator'
 import {
   ComponentVariants,
-  EmptyPlaceholderComposition,
-  EmptyPlaceholderStyles,
+
   getNestedStylesByKey,
   IconPlaceholder,
   useDefaultComponentStyle,
 } from '@codeleap/common'
+
+import {
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderStyles,
+} from './styles'
+
 import { StyleSheet } from 'react-native'
-import { StylesOf } from '../types/utility'
+import { StylesOf } from '../../types'
+
+export * from './styles'
 
 export type EmptyPlaceholderProps = {
   itemName?: string

package/src/components/EmptyPlaceholder/styles.ts

@@ -0,0 +1,58 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type EmptyPlaceholderComposition =
+  | 'wrapper:loading'
+  | `loader${Capitalize<ActivityIndicatorComposition>}`
+  | 'wrapper'
+  | 'text'
+  | 'icon'
+
+const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
+
+const presets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })),
+)
+
+export const EmptyPlaceholderStyles = {
+  ...presets,
+  default: createEmptyPlaceholderStyle((theme) => ({
+    wrapper: {
+      ...theme.presets.center,
+      minHeight: theme.values.height / 2,
+      height: '100%',
+      flex: 1,
+    },
+    loaderWrapper: {
+
+      ...theme.spacing.marginVertical(8),
+      ...theme.presets.center,
+      ...theme.presets.flex,
+    },
+    icon: {
+      color: theme.colors.placeholder,
+      size: theme.spacing.value(24),
+    },
+    text: {
+      ...assignTextStyle('p1')(theme).text,
+      ...theme.presets.textCenter,
+    },
+  })),
+  compact: createEmptyPlaceholderStyle((theme) => ({
+    wrapper: {
+      ...theme.spacing.marginVertical(0),
+      marginBottom: theme.spacing.value(6),
+    },
+  })),
+  absolute: createEmptyPlaceholderStyle((theme) => ({
+    'wrapper:loading': {
+      ...theme.presets.absolute,
+      ...theme.presets.whole,
+      backgroundColor: theme.colors.background,
+    },
+    wrapper: {
+      ...theme.presets.absolute,
+      ...theme.presets.whole,
+      backgroundColor: theme.colors.background,
+    },
+  })),
+}

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

@@ -1,22 +1,29 @@
 import React, { forwardRef, useImperativeHandle } from 'react'
-import { DocumentPicker, ImageCropPicker } from '../modules/documentPicker'
+import { DocumentPicker, ImageCropPicker } from '../../modules/documentPicker'
 import {
   ComponentVariants,
-  FileInputComposition,
-  FileInputStyles,
+
   IconPlaceholder,
   MobileInputFile,
   parseFilePathData,
   useDefaultComponentStyle,
   useCodeleapContext,
+  MobileFile,
 } from '@codeleap/common'
-import { StylesOf } from '../types/utility'
-import { Button, ButtonProps } from './Button'
-import { View } from './View'
-import { InputLabel } from './TextInput'
-import OSAlert from '../utils/OSAlert'
+import { StylesOf } from '../../types'
+import { Button, ButtonProps } from '../Button'
+import { View } from '../View'
+import { InputLabel } from '../TextInput'
+import { OSAlert } from '../../utils'
 import { Options } from 'react-native-image-crop-picker'
-import { DocumentPickerOptions } from '../modules/types/documentPicker'
+import { DocumentPickerOptions } from '../../modules/types/documentPicker'
+
+export * from './styles'
+
+import {
+  FileInputComposition,
+  FileInputStyles,
+} from './styles'
 
 export type FileInputRef = {
   openFilePicker: (string?: 'camera' | 'library') => void
@@ -44,15 +51,13 @@ export type FileInputProps = {
 }
 
 const pickerDefaults = {
-  width: 300,
-  height: 400,
   cropping: true,
 }
 
 function parsePickerData(data:any):MobileInputFile {
 
   const filePathData = parseFilePathData(data.path)
-  const d:MobileInputFile['file'] = {
+  const d:MobileFile = {
     name: filePathData.name,
     size: data.size,
     type: data.mime,
@@ -108,24 +113,10 @@ export const FileInput = forwardRef<
   }
 
   function handleError(err) {
-    const warn = DocumentPicker.isCancel(err) || String(err).includes('Error: User cancelled')
-    if (warn) {
-      // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
-      logger.warn(err)
 
-    } else {
-      // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
-      logger.error(err)
+    logger.warn('File Input Error', err, 'FILE INPUT')
+    onError?.(err)
 
-      if (onError) {
-        onError(err)
-      } else {
-        OSAlert.error({
-          title: 'Error',
-          body: err.message,
-        })
-      }
-    }
   }
 
   const mergedOptions = {

package/src/components/FileInput/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type FileInputComposition = 'label' | 'wrapper' | 'input'
+
+const createFileInputStyle =
+  createDefaultVariantFactory<FileInputComposition>()
+
+const presets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })),
+)
+
+export const FileInputStyles = {
+  ...presets,
+  default: createFileInputStyle((theme) => ({})),
+
+}