@codeleap/mobile 2.3.0 → 2.3.1

package/src/components/View/index.tsx

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,125 @@
+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,
+    },
+  })),
+}