@codeleap/mobile 2.4.6 → 3.0.2

package/src/components/Checkbox/styles.ts

@@ -1,81 +1,21 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
 
-type CheckboxParts =
-  | 'wrapper'
-  | 'input'
-  | 'inputFeedback'
-  | 'checkmark'
-  | 'checkmarkWrapper'
-  | 'error'
-  | `label${Capitalize<InputLabelComposition>}`
+type AnimatableParts = 'checkmarkWrapper' | 'box'
+export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
 
-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
+export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
 
-    const markHeight = size * 0.5
-    const markWidth = size * 0.25
+export type CheckboxStates = InputBaseStates
 
-    const translateX = -(markWidth / 2)
-    const translateY = -(markHeight / 2)
-    return {
-      wrapper: {},
-      input: {
-        flexDirection: 'row',
-        ...theme.presets.alignCenter,
-
-      },
-      labelWrapper: {
-        // flex: 1,
-        ...theme.spacing.marginLeft(1),
+export type CheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:${CheckboxStates}`
+  | `${AnimatableParts}:transition`
+  | `${AnimatableParts}:${CheckboxAnimationStates}`
+  | '__props'
 
-      },
-      inputFeedback: {
-        type: 'opacity',
-        value: 0.5,
-      },
+const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
 
-      checkmark: {
-        position: 'absolute',
-        top: '40%',
-        left: '50%',
+export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
 
-        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

@@ -6,7 +6,7 @@ import {
 
 } from '@codeleap/common'
 import {
-  ContentViewStyles,
+  ContentViewPresets,
 } from './styles'
 import { ViewProps, View, ViewComposition } from '../View'
 import { Text } from '../Text'
@@ -23,7 +23,7 @@ export type ContentViewProps = Omit<
   message?: string
   loading?: boolean
   styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
+} & ComponentVariants<typeof ContentViewPresets>
 
 const WrapContent = ({ children, ...props }) => (
   <View {...props}>{children}</View>

package/src/components/ContentView/styles.ts

@@ -5,20 +5,4 @@ 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,
-    },
-  })),
-}
+export const ContentViewPresets = includePresets((styles) => createContentViewStyle(() => ({ wrapper: styles })))

package/src/components/DatePickerModal/index.tsx

@@ -0,0 +1,240 @@
+import React, { useRef } from 'react'
+import { useState, useCodeleapContext, useDefaultComponentStyle, TypeGuards, useBooleanToggle, useNestedStylesByKey, useI18N } from '@codeleap/common'
+import { DatePickerModalPresets } from './styles'
+import DatePicker from 'react-native-date-picker'
+import { TextInput } from '../TextInput'
+import { ModalManager } from '../../utils'
+import { Button } from '../Button'
+import { StyleSheet } from 'react-native'
+import { DatePickerModalProps } from './types'
+
+export * from './styles'
+export * from './types'
+
+const OuterInputComponent:DatePickerModalProps['outerInputComponent'] = (props) => {
+  const {
+    debugName,
+    toggle,
+    valueLabel,
+    placeholder,
+    ...otherProps
+  } = props
+
+  return <TextInput
+    debugName={`${debugName} outer input`}
+    onPress={toggle}
+    {...otherProps}
+    value={TypeGuards.isString(valueLabel) ? valueLabel : ''}
+    placeholder={TypeGuards.isString(placeholder) ? placeholder : ''}
+  />
+}
+
+const defaultFormatDate:DatePickerModalProps['formatDate'] = (date) => {
+  if (!date) return null
+  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
+}
+
+const DefaultFooter:DatePickerModalProps['footerComponent'] = (props) => {
+  const {
+    debugName,
+    commitDate,
+    showDoneButton,
+    styles,
+    confirm,
+    confirmButtonProps = {},
+    cancelButtonProps = {},
+    toggle,
+  } = props
+
+  if (commitDate == 'onConfirm') {
+    return <>
+      <Button
+        debugName={`${debugName} cancel button`}
+        styles={styles.cancel}
+        variants={['flex']}
+        text={`Cancel`}
+        onPress={toggle}
+        {...cancelButtonProps}
+      />
+      <Button
+        debugName={`${debugName} confirm button`}
+        variants={['flex']}
+        styles={styles.confirm}
+        text={`Confirm`}
+        onPress={confirm}
+        {...confirmButtonProps}
+      />
+    </>
+
+  }
+
+  if (!showDoneButton) return null
+
+  return <Button
+    debugName={`${debugName} done button`}
+    onPress={confirm}
+    text={'Done'}
+    styles={styles.done}
+
+  />
+}
+
+const defaultProps:Partial<DatePickerModalProps> = {
+  outerInputComponent: OuterInputComponent,
+  formatDate: defaultFormatDate,
+  footerComponent: DefaultFooter,
+  mode: 'date',
+  commitDate: 'onConfirm',
+  showDoneButton: true,
+  isCustomModal: true,
+}
+
+export const DatePickerModal = (props: DatePickerModalProps) => {
+
+  const { currentTheme } = useCodeleapContext()
+
+  const allProps = {
+    ...defaultProps,
+    ...props,
+  }
+
+  const {
+    isCustomModal,
+    hideInput,
+    visible: _visible,
+    toggle: _toggle,
+    value: _value,
+    onValueChange,
+    formatDate,
+    debugName,
+    cancelButtonProps = {},
+    confirmButtonProps = {},
+    outerInputComponent,
+    footer,
+    variants = [],
+    styles = {},
+    placeholder = '',
+    datePickerProps,
+    mode,
+    label,
+    commitDate,
+    description,
+    showDoneButton,
+    style,
+    footerComponent,
+    ...modalProps
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<'u:DatePickerModal', typeof DatePickerModalPresets>('u:DatePickerModal', {
+    variants,
+    styles,
+    rootElement: 'inputWrapper',
+    transform: StyleSheet.flatten,
+  })
+
+  const [visible, toggle] = !TypeGuards.isNil(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
+  const [value, setValue] = [_value, onValueChange]
+  //const [value, setValue] = _value && onValueChange ? [_value, onValueChange] : useState(_value ?? new Date())
+
+  const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment
+
+  const OuterInput = outerInputComponent
+  const Footer = footerComponent
+
+  const inputStyle = useNestedStylesByKey('input', variantStyles)
+  const doneStyle = useNestedStylesByKey('doneButton', variantStyles)
+  const cancelStyle = useNestedStylesByKey('cancelButton', variantStyles)
+  const confirmStyle = useNestedStylesByKey('confirmButton', variantStyles)
+
+  const formattedDate = value ? formatDate(value) : placeholder
+  const { locale } = useI18N()
+
+  const tempDate = useRef<Date|null>(null)
+
+  const onConfirm = () => {
+    if (commitDate == 'onConfirm') {
+      setValue(tempDate.current)
+    }
+
+    if (isCustomModal) {
+      toggle()
+    }
+  }
+
+  const modalFooter = footer || <Footer
+    {...allProps}
+    confirm={onConfirm}
+    styles={{
+      done: doneStyle,
+      cancel: cancelStyle,
+      confirm: confirmStyle,
+    }}
+    confirmButtonProps={confirmButtonProps}
+    cancelButtonProps={cancelButtonProps}
+    showDoneButton={showDoneButton}
+    value={value}
+    debugName={debugName}
+    visible={visible}
+    toggle={toggle}
+    onValueChange={setValue}
+    valueLabel={formattedDate}
+  />
+
+  const wrapperProps = isCustomModal ? {
+    title: label,
+    description: description,
+    debugName: `${debugName} Modal`,
+    visible: visible,
+    toggle: toggle,
+    styles: variantStyles,
+    footer: modalFooter,
+    ...modalProps,
+    id: null,
+  } : {}
+
+  return (
+    <>
+      {!hideInput && <OuterInput
+        {...allProps}
+        styles={inputStyle}
+        value={value}
+        debugName={debugName}
+        visible={visible}
+        toggle={toggle}
+        onValueChange={setValue}
+        valueLabel={formattedDate}
+        style={style}
+
+      />}
+      {/* @ts-expect-error */}
+      <Wrapper {...wrapperProps} >
+        <DatePicker
+          modal={!isCustomModal}
+          open={visible}
+          onCancel={toggle}
+          date={value ?? new Date()}
+          onDateChange={(date) => {
+            if (commitDate === 'onChange') {
+              setValue(date)
+              return
+            }
+
+            tempDate.current = date
+          }}
+          locale={locale}
+          theme={currentTheme === 'dark' ? 'dark' : 'light' }
+          textColor={variantStyles?.picker?.color}
+          androidVariant='iosClone'
+          onConfirm={setValue}
+          {...datePickerProps}
+          mode={mode}
+
+        />
+      </Wrapper>
+
+    </>
+  )
+
+}
+
+DatePickerModal.defaultProps = defaultProps

package/src/components/DatePickerModal/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ButtonComposition } from '../Button'
+import { ModalComposition } from '../Modal'
+import { TextInputComposition } from '../TextInput'
+
+export type DatePickerModalComposition =
+    ModalComposition | 
+    `input${Capitalize<TextInputComposition>}` | 
+    `picker` | 
+    `doneButton${Capitalize<ButtonComposition>}` | 
+    `confirmButton${Capitalize<ButtonComposition>}` | 
+    `cancelButton${Capitalize<ButtonComposition>}`
+
+const createDatePickerModalStyle = createDefaultVariantFactory<DatePickerModalComposition>()
+export const DatePickerModalPresets = includePresets((styles) => createDatePickerModalStyle(() => ({ inputWrapper: styles })))

package/src/components/DatePickerModal/types.ts

@@ -0,0 +1,55 @@
+import React from 'react'
+import { ComponentVariants, StylesOf, FormTypes } from '@codeleap/common'
+import { DatePickerModalComposition, DatePickerModalPresets } from './styles'
+import { DatePickerProps } from 'react-native-date-picker'
+import { TextInputComposition } from '../TextInput'
+import { ButtonComposition, ButtonProps } from '../Button'
+import { ModalProps } from '../Modal'
+
+type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
+    valueLabel: FormTypes.Label
+    styles?: StylesOf<TextInputComposition>
+}
+
+type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
+  valueLabel: FormTypes.Label
+  styles?: Record<
+    'confirm' | 'cancel' | 'done',
+    StylesOf<ButtonComposition>
+  >
+  confirm: () => void
+}
+
+export type DatePickerModalProps = Omit<ModalProps, 'styles' | 'variants' | 'ref'> & {
+  hideInput?: boolean
+  debugName: string
+
+  value: Date
+
+  label?: FormTypes.Label
+
+  placeholder?: FormTypes.Label
+
+  onValueChange: (date: Date) => void
+
+  styles?: StylesOf<DatePickerModalComposition>
+
+  isCustomModal?: boolean
+  mode?: DatePickerProps['mode']
+
+  cancelButtonProps?: Partial<ButtonProps>
+  confirmButtonProps?: Partial<ButtonProps>
+
+  datePickerProps?: Partial<DatePickerProps>
+
+  outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
+
+  formatDate?: (date: Date) => FormTypes.Label
+
+  commitDate?: 'onConfirm' | 'onChange'
+
+  showDoneButton?: boolean
+
+  footerComponent?: React.ComponentType<DatePickerModalFooterProps>
+
+} & ComponentVariants<typeof DatePickerModalPresets>

package/src/components/Drawer/index.tsx

@@ -3,9 +3,9 @@ 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'
+import { DrawerPresets } from './styles'
 export * from './styles'
-export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerStyles>
+export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerPresets>
 
 export const Drawer:React.FC<DrawerProps> = (props) => {
   const { variants, styles, scrollProps, ...modalProps } = props

package/src/components/Drawer/styles.ts

@@ -1,43 +1,8 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
-import { ModalComposition, ModalStyles } from '../Modal'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ModalComposition } from '../Modal'
 
 export type DrawerComposition = ModalComposition
-const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
 
-export const DrawerStyles = {
-  ...ModalStyles,
-  default: createDrawerStyle((theme) => {
-    const defaultStyle = ModalStyles.default(theme)
+const createModalStyle = createDefaultVariantFactory<DrawerComposition>()
 
-    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,
-      },
-    }
-  }),
-}
+export const DrawerPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/EmptyPlaceholder/index.tsx

@@ -13,7 +13,7 @@ import {
 
 import {
   EmptyPlaceholderComposition,
-  EmptyPlaceholderStyles,
+  EmptyPlaceholderPresets,
 } from './styles'
 
 import { ImageSourcePropType, StyleSheet, Image as RNImage } from 'react-native'
@@ -33,7 +33,7 @@ export type EmptyPlaceholderProps = {
   loading?: boolean
 
   styles?: StylesOf<EmptyPlaceholderComposition>
-  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
+  variants?: ComponentVariants<typeof EmptyPlaceholderPresets>['variants']
 
   renderEmpty?: (props: {
     emptyText:string | React.ReactElement
@@ -56,7 +56,7 @@ export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPla
   } = props
   const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
 
-  const componentStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderStyles>('u:EmptyPlaceholder', {
+  const componentStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
     variants,
     transform: StyleSheet.flatten,
     styles,

package/src/components/EmptyPlaceholder/styles.ts

@@ -1,4 +1,4 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type EmptyPlaceholderComposition =
@@ -13,49 +13,4 @@ export type EmptyPlaceholderComposition =
 
 const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
 
-const presets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })),
-)
-
-export const EmptyPlaceholderStyles = {
-  ...presets,
-  default: createEmptyPlaceholderStyle((theme) => ({
-    wrapper: {
-      flexGrow: 1,
-      ...theme.presets.center,
-    },
-    title: {
-      ...assignTextStyle('h3')(theme).text,
-      ...theme.spacing.marginBottom(theme.values.innerSpacing.Y),
-    },
-    description: {
-      ...assignTextStyle('p1')(theme).text,
-    },
-    imageWrapper: {
-      ...theme.spacing.paddingBottom(theme.values.innerSpacing.Y * 2),
-      ...theme.presets.fullWidth,
-      ...theme.presets.alignCenter,
-      height: '45%',
-    },
-    image: {
-      ...theme.presets.fullHeight,
-    },
-  })),
-  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,
-    },
-  })),
-}
+export const EmptyPlaceholderPresets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })))

package/src/components/FileInput/styles.ts

@@ -5,11 +5,4 @@ export type FileInputComposition = 'label' | 'wrapper' | 'input'
 const createFileInputStyle =
   createDefaultVariantFactory<FileInputComposition>()
 
-const presets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })),
-)
-
-export const FileInputStyles = {
-  ...presets,
-  default: createFileInputStyle((theme) => ({})),
-
-}
+export const FileInputPresets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })))