@codeleap/mobile 1.9.31 → 2.0.0

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,7 +67,7 @@ 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')}

package/src/components/Checkbox/styles.ts

@@ -9,18 +9,18 @@ type CheckboxParts =
   | '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

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) => ({})),
+
+}

package/src/components/Grid/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+} from '@codeleap/common'
+
+import { FlatGrid, FlatGridProps, GridRenderItemInfo } from 'react-native-super-grid'
+import { RefreshControl, StyleSheet, RefreshControlProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { GridComposition, GridStyles } from './styles'
+import { StylesOf } from '../../types'
+import { listenToKeyboardEvents } from '../../utils'
+
+export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatGridProps<P, T> = Omit<P, DataboundFlatGridPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: GridRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export * from './styles'
+
+const KeyboardAwareFlatGrid = listenToKeyboardEvents(FlatGrid)
+
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =FlatGridProps<Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    keyboardAware?: boolean
+    styles?: StylesOf<GridComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof GridStyles>
+
+const GridCP = forwardRef<FlatGrid, GridProps>(
+  (flatGridProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      refreshing,
+      placeholder,
+      keyboardAware = true,
+      refreshControlProps = {},
+      ...props
+    } = flatGridProps
+
+    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridStyles>('u:Grid', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    const Component = keyboardAware ? KeyboardAwareFlatGrid : FlatGrid
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+
+    return (
+      <Component
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={variantStyles.content}
+        ref={ref as unknown as FlatGrid}
+        ItemSeparatorComponent={separator}
+        refreshControl={
+          !!onRefresh && (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={refreshStyles?.color}
+              colors={[refreshStyles?.color]}
+              {...refreshControlProps}
+            />
+          )
+        }
+
+        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
+        {...props}
+      />
+    )
+  },
+)
+
+export type GridComponentType = <T extends any[] = any[]>(props: FlatGridProps<T>) => React.ReactElement
+
+export const Grid = GridCP as GridComponentType
+

package/src/components/Grid/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ListComposition, ListStyles } from '../List'
+
+export type GridComposition = ListComposition
+
+const createGridStyle = createDefaultVariantFactory<GridComposition>()
+
+export const GridStyles = {
+  ...ListStyles,
+
+}

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

@@ -1,14 +1,19 @@
 import * as React from 'react'
 import {
   ComponentVariants,
-  IconPlaceholder,
-  IconStyles,
+
   useDefaultComponentStyle,
   useCodeleapContext,
   arePropsEqual,
+  IconPlaceholder,
 } from '@codeleap/common'
 import { StyleSheet } from 'react-native'
-import { View } from './View'
+import { View } from '../View'
+export * from './styles'
+
+import {
+  IconStyles,
+} from './styles'
 
 export type IconProps = {
   name: IconPlaceholder

package/src/components/Icon/styles.ts

@@ -0,0 +1,52 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type IconComposition = 'icon'
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+const presets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
+
+export const IconStyles = {
+  ...presets,
+  default: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.icon,
+    },
+  })),
+  white: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.white,
+    },
+  })),
+
+  primary: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.primary,
+    },
+  })),
+  negative: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.negative,
+    },
+  })),
+  positive: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.positive,
+    },
+  })),
+  small: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(1),
+    },
+  })),
+  medium: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(2),
+    },
+  })),
+  large: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(3),
+    },
+  })),
+}