@codeleap/mobile 2.3.0 → 2.3.2

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

package/src/components/ContentView/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {
+
+  ComponentVariants,
+  useDefaultComponentStyle,
+
+} from '@codeleap/common'
+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'
+> & {
+  message?: 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, message, 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={message} />
+    </WrapContent>
+  )
+}

package/src/components/ContentView/styles.ts

@@ -0,0 +1,24 @@
+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,
+    },
+    loader: {
+      alignSelf: 'center',
+      height: theme.values.width * 0.15,
+      width: theme.values.width * 0.15,
+    },
+  })),
+}

package/src/components/Drawer/index.tsx

@@ -0,0 +1,33 @@
+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, scrollProps, ...modalProps } = props
+
+  const variantStyles = useDefaultComponentStyle('u:Drawer', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  return <Modal
+    styles={variantStyles}
+    scroll={false}
+
+    {...modalProps}
+    scrollProps={{
+      ...scrollProps,
+      keyboardAware: {
+
+        enabled: false,
+        ...scrollProps?.keyboardAware,
+      },
+    }}
+  />
+}

package/src/components/Drawer/styles.ts

@@ -0,0 +1,43 @@
+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%',
+        paddingBottom: 0,
+        paddingTop: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        maxHeight: '100%',
+
+      },
+      innerWrapper: {
+        ...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/index.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react'
+import { Icon } from '../Icon'
+import { View } from '../View'
+import { Text } from '../Text'
+import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
+import {
+  ComponentVariants,
+
+  getNestedStylesByKey,
+  IconPlaceholder,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+
+import {
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderStyles,
+} from './styles'
+
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+
+export * from './styles'
+
+export type EmptyPlaceholderProps = {
+  itemName?: string
+  title?: React.ReactElement
+  loading?: boolean
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
+  emptyIconName?: IconPlaceholder
+  renderEmpty?: (props: {
+    emptyText:string | React.ReactElement
+    emptyIconName?: IconPlaceholder
+    styles: StylesOf<EmptyPlaceholderComposition> & {activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>}
+  }) => React.ReactElement
+}
+
+export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
+  const {
+    itemName,
+    title,
+    loading,
+    styles = {},
+    variants = [],
+    emptyIconName = 'placeholder',
+    renderEmpty,
+  } = props
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const componentStyles = useDefaultComponentStyle('EmptyPlaceholder', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
+    , [componentStyles])
+
+  if (loading) {
+    return (
+      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
+        <ActivityIndicator styles={activityIndicatorStyles}/>
+      </View>
+    )
+  }
+
+  if (renderEmpty) {
+    return (
+      <View style={componentStyles.wrapper}>
+        {renderEmpty({
+          emptyText,
+          emptyIconName: emptyIconName as IconPlaceholder,
+          styles: {
+            ...componentStyles,
+            activityIndicatorStyles,
+          },
+        })}
+      </View>
+    )
+  }
+
+  return (
+    <View style={componentStyles.wrapper}>
+      <Icon name={emptyIconName as IconPlaceholder} style={componentStyles.icon}/>
+      <Text text={emptyText} style={componentStyles.text}/>
+    </View>
+  )
+}

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.window.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,
+    },
+  })),
+}