@codeleap/mobile 2.2.11 → 2.3.0

package/src/components/View/index.tsx

@@ -1,103 +0,0 @@
-import * as React from 'react'
-import * as Animatable from 'react-native-animatable'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  ViewStyles,
-  BaseViewProps,
-  useCodeleapContext,
-} from '@codeleap/common'
-import { View as NativeView } from 'react-native'
-import { MotiView, MotiProps } from 'moti'
-import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
-
-export * from './styles'
-
-export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
-  ComponentVariants<typeof ViewStyles> & {
-    ref?: any
-    component?: any
-    animated?: boolean
-    keyboardAware?: GetKeyboardAwarePropsOptions
-  } & BaseViewProps
-
-export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeView, ViewProps & Partial<MotiProps>>((viewProps, ref) => {
-  const {
-    responsiveVariants = {},
-    variants = [],
-    children,
-    style,
-    keyboardAware,
-    component,
-    animated = false,
-    ...props
-  } = viewProps
-
-  const variantStyles = useDefaultComponentStyle('View', {
-    responsiveVariants,
-    variants,
-  })
-  const Component = animated ? MotiView : (component || NativeView)
-  const keyboard = useKeyboardAwareView()
-  const _props = keyboard.getKeyboardAwareProps(
-    {
-      style: [variantStyles.wrapper, style], ref: ref, ...props,
-    },
-    {
-      adapt: 'paddingBottom',
-      baseStyleProp: 'style',
-
-      enabled: false,
-      ...keyboardAware,
-    },
-  )
-  return (
-    <Component {..._props}>
-      {children}
-    </Component>
-  )
-})
-
-export const AnimatedView = Animatable.createAnimatableComponent(
-  View,
-) as unknown as React.ForwardRefExoticComponent<
-  { transition?: any; animation?: any } & ViewProps
->
-
-type GapProps = ViewProps & {
-  value: number
-
-  defaultProps?: any
-}
-
-export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
-  const { Theme } = useCodeleapContext()
-  const horizontal = props.variants?.includes('row')
-  return (
-    <View {...props}>
-      {
-        React.Children.toArray(children).map((Element, idx, childArr) => {
-          if (React.isValidElement(Element)) {
-            const props = { ...Element.props, ...defaultProps }
-
-            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
-            switch (idx) {
-              case 0:
-                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
-                break
-              case childArr.length - 1:
-                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
-                break
-              default:
-                break
-            }
-            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
-            return React.cloneElement(Element, props)
-          }
-          return Element
-        })
-      }
-    </View>
-  )
-}

package/src/components/View/styles.ts

@@ -1,24 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type ViewComposition = 'wrapper'
-
-const createViewStyle = createDefaultVariantFactory<ViewComposition>()
-
-const presets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })),
-)
-
-export const ViewStyles = {
-  ...presets,
-  default: createViewStyle((t) => ({
-    // wrapper: {
-    //   display: 'flex',
-    // },
-  })),
-  separator: createViewStyle((t) => ({
-    wrapper: {
-      width: '100%',
-      height: t.values.pixel,
-      backgroundColor: t.colors.borders,
-    },
-  })),
-}

package/src/components/components.ts

@@ -1,42 +0,0 @@
-export * from './View'
-export * from './Animated'
-export * from './Icon'
-export * from './Touchable'
-export * from './Text'
-export * from './Image'
-export * from './Checkbox'
-export * from './TextInput'
-export * from './RadioInput'
-export * from './Switch'
-export * from './ContentView'
-export * from './Sections'
-export * from './Select'
-export * from './FileInput'
-export * from './Slider'
-export * from './SegmentedControl'
-export * from './Navigation'
-export * from './Scroll'
-export * from './List'
-export * from './ActivityIndicator'
-export * from './Button'
-export * from './ContentView'
-export * from './Modal'
-export * from './Calendar'
-export * from './ImageView'
-export * from './Navigation'
-export * from './Pager'
-export * from './EmptyPlaceholder'
-export * from './Backdrop'
-export * from './Drawer'
-export * from './MultiSelect'
-export * from './AutoComplete'
-export * from './Grid'
-export * from './InputLabel'
-export * from './ActionIcon'
-
-import * as Legacy from './legacy'
-export {
-  Legacy,
-}
-
-export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -1,62 +0,0 @@
-import { ViewStyles } from './View'
-import { IconStyles } from './Icon'
-import { TouchableStyles } from './Touchable'
-import { TextStyles } from './Text'
-import { ImageStyles } from './Image'
-import { CheckboxStyles } from './Checkbox'
-import { TextInputStyles } from './TextInput'
-import { RadioInputStyles } from './RadioInput'
-import { SwitchStyles } from './Switch'
-import { SelectStyles } from './Select'
-import { FileInputStyles } from './FileInput'
-import { SliderStyles } from './Slider'
-import { SegmentedControlStyles } from './SegmentedControl'
-import { ActivityIndicatorStyles } from './ActivityIndicator'
-import { ButtonStyles } from './Button'
-import { ContentViewStyles } from './ContentView'
-import { ModalStyles } from './Modal'
-import { EmptyPlaceholderStyles } from './EmptyPlaceholder'
-import { BackdropStyles } from './Backdrop'
-import { PagerStyles } from './Pager'
-import { CalendarStyles } from './Calendar'
-import { DrawerStyles } from './Drawer/styles'
-import { ListStyles, PaginationIndicatorStyles } from './List'
-import { AutoCompleteStyles } from './AutoComplete'
-import { MultiSelectStyles } from './MultiSelect'
-import { ScrollStyles } from './Scroll'
-import { ActionIconStyles } from './ActionIcon'
-import { GridStyles } from './Grid'
-import { InputLabelStyles } from './InputLabel'
-
-export const defaultStyles = {
-  View: ViewStyles,
-  Icon: IconStyles,
-  Touchable: TouchableStyles,
-  Text: TextStyles,
-  Image: ImageStyles,
-  Checkbox: CheckboxStyles,
-  TextInput: TextInputStyles,
-  RadioInput: RadioInputStyles,
-  Switch: SwitchStyles,
-  Select: SelectStyles,
-  FileInput: FileInputStyles,
-  List: ListStyles,
-  Slider: SliderStyles,
-  SegmentedControl: SegmentedControlStyles,
-  ActivityIndicator: ActivityIndicatorStyles,
-  Button: ButtonStyles,
-  ContentView: ContentViewStyles,
-  Modal: ModalStyles,
-  EmptyPlaceholder: EmptyPlaceholderStyles,
-  Backdrop: BackdropStyles,
-  Calendar: CalendarStyles,
-  Pager: PagerStyles,
-  Drawer: DrawerStyles,
-  AutoComplete: AutoCompleteStyles,
-  MultiSelect: MultiSelectStyles,
-  Scroll: ScrollStyles,
-  PaginationIndicator: PaginationIndicatorStyles,
-  ActionIcon: ActionIconStyles,
-  Grid: GridStyles,
-  InputLabel: InputLabelStyles,
-}

package/src/components/legacy/Modal/index.tsx

@@ -1,163 +0,0 @@
-import * as React from 'react'
-import { View, ViewProps, AnimatedView } from '../../View'
-import { Button, ButtonProps } from '../../Button'
-import { Scroll } from '../../Scroll'
-import {
-  capitalize,
-  ComponentVariants,
-  IconPlaceholder,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import {
-  MobileModalComposition,
-  MobileModalStyles,
-  MobileModalParts,
-} from './styles'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../../types/utility'
-
-import { Touchable } from '../../Touchable'
-import { Text } from '../../Text'
-import { Animated } from '../../Animated'
-import { GetKeyboardAwarePropsOptions } from '../../../utils'
-
-export * from './styles'
-
-export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
-  styles?: StylesOf<MobileModalComposition>
-  dismissOnBackdrop?: boolean
-  buttonProps?: ButtonProps
-  accessible?: boolean
-  showClose?: boolean
-  closable?: boolean
-  footer?: React.ReactNode
-  title?: React.ReactNode
-  debugName?: string
-  closeIconName?: IconPlaceholder
-  visible: boolean
-  toggle?: () => void
-  zIndex?: number
-  scroll?: boolean
-  keyboardAware?: GetKeyboardAwarePropsOptions
-}
-
-export const Modal: React.FC<ModalProps> = (modalProps) => {
-  const {
-    variants = [],
-    styles = {},
-    visible,
-    showClose,
-    closable = true,
-    title,
-    footer,
-    children,
-    toggle = () => null,
-    dismissOnBackdrop = true,
-    closeIconName = 'close',
-    debugName,
-    scroll = true,
-    keyboardAware,
-    zIndex = null,
-    ...props
-  } = modalProps
-
-  const variantStyles = useDefaultComponentStyle('Modal', {
-    variants: variants as any,
-    transform: StyleSheet.flatten,
-    styles,
-  }) as ModalProps['styles']
-
-  function getStyles(key: MobileModalParts) {
-    const s = [
-      variantStyles[key],
-      styles[key],
-      visible ? variantStyles[key + ':visible'] : {},
-      visible ? styles[key + ':visible'] : {},
-    ]
-
-    return s
-  }
-
-  const buttonStyles = React.useMemo(() => {
-    const buttonEntries = {}
-
-    for (const [key, style] of Object.entries(variantStyles)) {
-      if (key.startsWith('closeButton')) {
-        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
-      }
-    }
-    return buttonEntries
-  }, [variantStyles])
-
-  const boxAnimation = {
-    hidden: {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible: {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    },
-  }
-
-  const wrapperStyle = StyleSheet.flatten(getStyles('wrapper'))
-  return (
-    <View
-      style={[wrapperStyle, { zIndex: typeof zIndex === 'number' ? zIndex : wrapperStyle?.zIndex }]}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
-      <Scroll
-        style={getStyles('innerWrapper')}
-        contentContainerStyle={getStyles('innerWrapperScroll')}
-        scrollEnabled={scroll}
-        keyboardAware={keyboardAware}
-      >
-        {dismissOnBackdrop && (
-          <Touchable
-            debugName={`${debugName} modal backdrop`}
-            activeOpacity={1}
-            onPress={() => toggle()}
-            style={getStyles('touchableBackdrop')}
-          />
-        )}
-        <Animated
-          component='View'
-          config={boxAnimation}
-          pose={visible ? 'visible' : 'hidden'}
-          style={getStyles('box')}
-        >
-          {(title || showClose) && (
-            <View style={getStyles('header')}>
-              {typeof title === 'string' ? (
-                <Text text={title} style={getStyles('title')} />
-              ) : (
-                title
-              )}
-
-              {showClose && closable && (
-                <Button
-                  debugName={`${debugName} modal close button`}
-                  icon={closeIconName as IconPlaceholder}
-                  variants={['icon']}
-                  onPress={toggle}
-                  styles={buttonStyles}
-                />
-              )}
-            </View>
-          )}
-
-          <View style={getStyles('body')}>{children}</View>
-          {footer && (
-            <View style={getStyles('footer')}>
-              {typeof footer === 'string' ? <Text text={footer} /> : footer}
-            </View>
-          )}
-        </Animated>
-      </Scroll>
-    </View>
-  )
-}
-
-export default Modal

package/src/components/legacy/Modal/styles.ts

@@ -1,125 +0,0 @@
-import {
-  ButtonComposition,
-  createDefaultVariantFactory,
-  includePresets,
-  ModalStyles,
-  assignTextStyle,
-} from '@codeleap/common'
-
-export const modalTransition = {
-  duration: 150,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
-
-export type MobileModalParts =
-  | 'wrapper'
-  | 'overlay'
-  | 'innerWrapper'
-  | 'innerWrapperScroll'
-  | 'box'
-  | 'footer'
-  | 'body'
-  | 'header'
-  | 'touchableBackdrop'
-  | 'box:pose'
-  | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`
-
-export type MobileModalComposition =
-  | MobileModalParts
-  | `${MobileModalParts}:visible`
-
-const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
-
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
-
-const defaultModalStyles = ModalStyles
-
-export const MobileModalStyles = {
-  ...defaultModalStyles,
-  ...presets,
-  default: createModalStyle((theme) => {
-    const fullSize = {
-      ...theme.presets.whole,
-      position: 'absolute',
-      width: theme?.values?.width,
-      height: theme?.values?.height,
-    }
-
-    return {
-      wrapper: {
-        zIndex: 1,
-
-        ...fullSize,
-      },
-
-      overlay: {
-        opacity: 0,
-
-        backgroundColor: theme.colors.black,
-        ...fullSize,
-      },
-      'overlay:visible': {
-        opacity: 0.5,
-      },
-      innerWrapper: {},
-      innerWrapperScroll: {
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.presets.justifyCenter,
-        minHeight: theme.values.window.height,
-      },
-      box: {
-        width: '80%',
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(2),
-      },
-      touchableBackdrop: {
-        ...fullSize,
-      },
-      'box:pose': {
-        opacity: 0,
-        scale: 0.8,
-        transition: modalTransition,
-      },
-      'box:pose:visible': {
-        opacity: 1,
-        scale: 1,
-        transition: modalTransition,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-      },
-      closeButtonWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      title: {
-        ...theme.presets.textCenter,
-        ...assignTextStyle('h3')(theme).text,
-        ...theme.spacing.paddingBottom(1),
-        flex: 1,
-      },
-    }
-  }),
-  popup: createModalStyle(() => ({})),
-  fullscreen: createModalStyle((theme) => ({
-    overlay: {
-      backgroundColor: theme.colors.background,
-    },
-    'overlay:visible': {
-      opacity: 1,
-    },
-    box: {
-      flex: 1,
-      borderRadius: 0,
-      width: theme.values.width,
-      height: theme.values.window.height,
-      ...theme.presets.center,
-    },
-  })),
-}