@codeleap/mobile 1.9.31 → 2.0.0

package/src/components/Select/index.tsx

@@ -1,14 +1,32 @@
-import { IconPlaceholder, useBooleanToggle, getNestedStylesByKey, useDefaultComponentStyle, TypeGuards } from '@codeleap/common'
+import { IconPlaceholder,
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+  TypeGuards } from '@codeleap/common'
 import React, { useMemo } from 'react'
-import { Modal, StyleSheet } from 'react-native'
-import { Button } from '../Button'
-import { Scroll } from '../Scroll'
-import { InputLabel, TextInput } from '../TextInput'
+import { StyleSheet } from 'react-native'
+import { List } from '../List'
+import { Text } from '../Text'
+import { TextInput } from '../TextInput'
 import { Touchable } from '../Touchable'
-import { AnimatedView, View } from '../View'
-import { MobileSelectStyles } from './styles'
+import { SelectStyles } from './styles'
 import { CustomSelectProps } from './types'
+import { ModalManager } from '../../utils'
+import { Icon } from '../Icon'
+
+export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
+  return <Touchable style={[
+    styles.itemWrapper,
+    isSelected && styles['itemWrapper:selected'],
+  ]} onPress={onPress} debugName={`Select ${item.value}`}>
+    <Text text={item.label} style={[
+      styles.itemText,
+      isSelected && styles['itemText:selected'],
+    ]}/>
+    {icon ? <Icon name={icon} style={[styles?.itemIcon, isSelected && styles?.['itemIcon:selected']]}/> : null}
+  </Touchable>
+}
 
+export * from './styles'
 export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
   const {
     value,
@@ -20,29 +38,15 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     variants,
     renderItem,
     closeOnSelect = true,
-    scroll = false,
-    showClose = true,
-    showLabelOnModal = true,
+    listProps,
     placeholder = 'Select',
     arrowIconName = 'selectArrow',
-    footer,
-    modalCloseIconName = 'close',
-    header,
-    closeButtonProps,
-    modalLabel,
-    textInputProps = {},
-    visible = null,
-    toggle = null,
-    renderList,
-    ...props
+    inputProps = {},
+    hideInput = false,
+    ...drawerProps
   } = selectProps
 
-  const [_isModalVisible, _setModalVisibility] = useBooleanToggle(false)
-
-  const isModalVisible = visible ?? _isModalVisible
-  const setModalVisibility = toggle ?? _setModalVisibility
-
-  const variantStyles = useDefaultComponentStyle<'u:MobileSelect', typeof MobileSelectStyles>('u:MobileSelect', {
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectStyles>('u:Select', {
     transform: StyleSheet.flatten,
     rootElement: 'inputWrapper',
     styles,
@@ -54,21 +58,16 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     [variantStyles],
   )
 
-  const closeButtonStyles = useMemo(
-    () => getNestedStylesByKey('modalCloseButton', variantStyles),
-    [variantStyles],
-  )
+  const close = () => drawerProps?.toggle?.()
 
-  const ListComponent = scroll ? Scroll : View
-
-  const close = () => setModalVisibility()
   const select = (value) => {
 
     onValueChange(value)
     if (closeOnSelect) {
-      close()
+      close?.()
     }
   }
+
   const selectedLabel:string = useMemo(() => {
     const current = options.find(o => o.value === value)
 
@@ -77,116 +76,52 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     return TypeGuards.isString(display) ? display : ''
   }, [value, placeholder, options])
 
-  return <>
-    <TextInput
+  const Item = renderItem || SelectItem
 
-      caretHidden
-      value={selectedLabel}
-      rightIcon={{
-        name: arrowIconName as IconPlaceholder,
-      }}
-      editable={false}
-      touchableWrapper
-      wrapperProps={{
-        debugName: 'Select',
-        onPress: close,
-      }}
-      pointerEvents={'none'}
-      label={label}
-      debugName={'Select input'}
-      styles={inputStyles}
-      style={style}
-      {...textInputProps}
+  const renderListItem = ({ item }) => {
+    return <Item
+      isSelected={value === item.value}
+      item={item}
+      onPress={() => select(item.value)}
+      styles={variantStyles}
     />
-    <AnimatedView pointerEvents={'none'} transition='opacity' style={[
-      {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-      },
-      variantStyles.backdrop,
-      isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],
-    ]} />
+  }
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: arrowIconName as IconPlaceholder,
+          }}
+          editable={false}
+          touchableWrapper
+          wrapperProps={{
+            debugName: 'Select',
+            onPress: close,
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          {...inputProps}
+        />
+      )
+    }
 
-    <Modal
-      animationType='slide'
-      transparent={true}
-      visible={isModalVisible}
-      onRequestClose={() => {
-        setModalVisibility()
-      }}
-      pointerEvents={isModalVisible ? 'auto' : 'none'}
-    >
-      <Touchable
-        onPress={close}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          left: 0,
-          bottom: 0,
-        }}
-        debugName={`Close modal`}
+    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+      <List<CustomSelectProps<any>['options']>
+        data={options}
+        style={variantStyles.list}
+        contentContainerStyle={variantStyles.listContent}
+        keyExtractor={(i) => i.value}
+        renderItem={renderListItem}
+        {...listProps}
       />
-      <View style={variantStyles.modalWrapper}>
-
-        <View style={variantStyles.modalBox}>
-          {
-            (showClose || showLabelOnModal || header) && (
-              <View style={variantStyles.modalHeader}>
-                {
-                  header ? header : <>
-                    {showLabelOnModal && <InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
-                    {showClose && <Button
-                      icon={modalCloseIconName as IconPlaceholder}
-                      onPress={close}
-                      styles={closeButtonStyles}
-                      debugName={'Close modal'}
-                      {...closeButtonProps}
-                    />}
-                  </>
-                }
-              </View>
-            )
-          }
-          <ListComponent style={variantStyles.modalList}>
-            {
-              renderList ? renderList({
-                ...selectProps,
-                isEmpty: !options.length,
-
-              }) : options.map((item, idx) => {
-                const isSelected = value === item.value
-                if (renderItem) {
-                  return renderItem({
-                    ...item,
-                    index: idx,
-                    selected: isSelected,
-                    onPress: close,
-                    styles: variantStyles,
-                  })
-                }
-
-                return <Touchable key={idx} style={[
-                  variantStyles.modalItem,
-                  isSelected && variantStyles['modalItem:selected'],
-                ]} onPress={() => select(item.value)} debugName={`Select ${item.value}`}>
-                  <InputLabel label={item.label} style={[variantStyles.modalItemText, isSelected && variantStyles['modalItemText:selected']]}/>
-                </Touchable>
-              })
-            }
-          </ListComponent>
+    </ModalManager.Drawer>
 
-          {
-            footer && <View style={variantStyles.modalFooter}>
-              {footer}
-            </View>
-          }
-        </View>
-      </View>
-    </Modal>
   </>
 }
 

package/src/components/Select/styles.ts

@@ -1,81 +1,49 @@
-import { assignTextStyle, ButtonParts, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
-import { MobileModalStyles } from '../Modal'
-type ModalParts =
-  'Box' |
-  'Wrapper' |
-  'Header' |
-  'Footer' |
-  'List' |
-  'Item' |
-  'ItemText' |
-  'Item:selected' |
-  'ItemText:selected' |
-  'LabelText' |
-  `CloseButton${Capitalize<ButtonParts>}`
+import { createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { DrawerComposition, DrawerStyles } from '../Drawer'
+type ItemStates = '' | ':selected'
+export type SelectComposition =
+  DrawerComposition |
+  `input${TextInputComposition}` |
+  'list' |
+  'listContent' |
+  `itemWrapper${ItemStates}` |
+  `itemText${ItemStates}` |
+  'scroll' |
+  'scrollContent'
 
-type InputParts = `input${Capitalize<TextInputComposition>}`
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 
-export type MobileSelectParts = InputParts
-| `backdrop`
-| `backdrop:visible`
-| `backdrop:hidden`
-| `modal${ModalParts}`
+export const SelectStyles = {
+  ...DrawerStyles,
+  default: createSelectStyle((theme) => {
+    const defaultStyle = DrawerStyles.default(theme)
+    return {
+      ...defaultStyle,
+      box: {
+        ...theme.spacing.paddingHorizontal(0),
 
-export type MobileSelectComposition = MobileSelectParts
+      },
+      itemWrapper: {
+        ...theme.spacing.padding(2),
+        ...theme.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemText:selected': {
+        color: theme.colors.white,
 
-const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
+      },
+      list: {
+        height: 'auto',
 
-export const MobileSelectStyles = {
-  default: createSelectStyle((theme) => ({
-    modalBox: {
-      // ...MobileModalStyles.default(theme).box,
-      backgroundColor: theme.colors.background,
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-      zIndex: 1,
-      elevation: 5,
-    },
-    modalWrapper: {
-      // ...MobileModalStyles.default(theme).wrapper,
-      flex: 1,
-      alignItems: 'stretch',
-      justifyContent: 'flex-end',
-    },
-    modalItem: {
-      ...theme.spacing.paddingVertical(1),
-      ...theme.spacing.paddingHorizontal(2),
-      color: theme.colors.text,
-    },
-    'modalItemText:selected': {
-      color: theme.colors.primary,
-    },
-    modalList: {
-      ...theme.spacing.marginVertical(0.6),
-    },
-    backdrop: {
-      // ...MobileModalStyles.default(theme).overlay,
-      zIndex: 10,
-      flex: 1,
+      },
+      listContent: {
+        paddingBottom: theme.values.bottomNavHeight + theme.spacing.value(1),
+      },
 
-      backgroundColor: theme.colors.black,
-    },
-    'backdrop:hidden': {
-      opacity: 0,
-    },
-    'backdrop:visible': {
-      opacity: 0.4,
-    },
-    modalHeader: {
-      ...theme.spacing.padding(2),
-      flexDirection: 'row',
-      ...theme.presets.alignCenter,
-      ...theme.presets.justifySpaceBetween,
-    },
-    modalLabelText: {
-      ...assignTextStyle('p2')(theme).text,
-    },
-    modalCloseButtonWrapper: {
-      backgroundColor: 'transparent',
-    },
-  })),
+    }
+  }),
 }

package/src/components/Select/types.ts

@@ -3,44 +3,37 @@ import {
   FormTypes,
   IconPlaceholder,
 } from '@codeleap/common'
-import { ReactElement } from 'react'
 import { StylesOf } from '../../types/utility'
-import { ButtonProps } from '../Button'
+import { DrawerProps } from '../Drawer'
+import { FlatListProps } from '../List'
 import { TextInputProps } from '../TextInput'
-import { MobileSelectComposition, MobileSelectStyles } from './styles'
+import { SelectComposition, SelectStyles } from './styles'
 
-export type SelectRenderFNProps<T> = FormTypes.Options<T>[number] & {
-  styles: StylesOf<MobileSelectComposition>
+export type SelectRenderFNProps<T> = & {
+  styles: StylesOf<SelectComposition>
   onPress: () => void
-  selected?: boolean
-  index: number
+  isSelected?: boolean
+  item: FormTypes.Options<T>[number]
 }
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
 
-export type CustomSelectProps<T> = {
+type SelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
+
+export type CustomSelectProps<T> = SelectDrawerProps & {
     value: T
     placeholder?: FormTypes.Label
     label?: FormTypes.Label
     options?: FormTypes.Options<T>
-    onDropdownToggle?: (isOpen?: boolean) => void
     onValueChange?: (value: T) => void
     renderItem?: SelectRenderFN<T>
-    styles?: StylesOf<MobileSelectComposition>
+    styles?: StylesOf<SelectComposition>
     style?: any
+    hideInput?: boolean
+
     arrowIconName?: IconPlaceholder
-    scroll?: boolean
     closeOnSelect?: boolean
-    footer?: ReactElement
-    header?: ReactElement
-    showLabelOnModal?: boolean
-    modalCloseIconName?: IconPlaceholder
-    showClose?: boolean
-    modalLabel?: string
-    textInputProps?: Partial<TextInputProps>
-    closeButtonProps?: Partial<ButtonProps>
-    toggle: (isOpen?: boolean) => void
-    visible: boolean
-    renderList?: (props:CustomSelectProps<T> & {isEmpty: boolean}) => JSX.Element
-  } & ComponentVariants<typeof MobileSelectStyles> & TextInputProps
+    inputProps?: Partial<TextInputProps>
+    listProps?: Partial<FlatListProps>
+  } & ComponentVariants<typeof SelectStyles>
 

package/src/components/Slider/index.tsx

@@ -12,6 +12,8 @@ import {
 import { InputLabel } from '../TextInput'
 import { SliderProps } from './types'
 
+export * from './styles'
+
 export const Slider: React.FC<SliderProps> = (sliderProps) => {
   const [tooltipVisible, setTooltipVisible] = React.useState(false)
 

package/src/components/Slider/styles.ts

@@ -0,0 +1,75 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SliderComposition =
+  | 'wrapper'
+  | 'handle'
+  | 'track'
+  | 'label'
+  | 'selectedTrack'
+  | 'inputContainer'
+  | 'tooltip'
+  | 'tooltip:visible'
+  | 'tooltip:hidden'
+  | 'trackLabels'
+  | 'mark'
+  | 'tooltipArrow'
+  | 'tooltipText'
+
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+
+const presets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })),
+)
+
+export const SliderStyles = {
+  ...presets,
+  default: createSliderStyle((theme) => ({
+    wrapper: {},
+    handle: {
+      backgroundColor: theme.colors.primary,
+    },
+    selectedTrack: {
+      backgroundColor: theme.colors.primary,
+    },
+    track: {
+      backgroundColor: theme.colors.gray,
+    },
+    tooltip: {
+      padding: theme.spacing.value(0.5),
+      backgroundColor: theme.colors.primary,
+      position: 'relative',
+      borderRadius: theme.borderRadius.small,
+    },
+    'tooltip:visible': {
+      opacity: 1,
+    },
+    'tooltip:hidden': {
+      opacity: 0,
+    },
+    mark: {
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      borderRadius: 29,
+      height: 10,
+      width: 10,
+      top: -5,
+    },
+    trackLabels: {
+      position: 'absolute',
+      top: 8,
+      ...assignTextStyle('p3')(theme).text,
+    },
+    tooltipArrow: {
+      height: 6,
+      width: 6,
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      transform: [{ rotate: '45deg' }],
+      bottom: -3,
+      left: '50%',
+    },
+    tooltipText: {
+      color: theme.colors.white,
+      ...assignTextStyle('p3')(theme).text,
+    },
+  })),
+}

package/src/components/Slider/types.ts

@@ -1,6 +1,11 @@
-import { ComponentVariants, Form, SliderComposition, SliderStyles } from '@codeleap/common'
+import { ComponentVariants, Form } from '@codeleap/common'
+
+import {
+  SliderComposition, SliderStyles,
+} from './styles'
+
 import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
-import { StylesOf } from '../../types/utility'
+import { StylesOf } from '../../types'
 import { ViewProps } from '../View'
 export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & {
     debounce?: number

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

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import {
-  SwitchStyles,
-  SwitchComposition,
+
   ComponentVariants,
   useDefaultComponentStyle,
   StylesOf,
@@ -11,9 +10,14 @@ import {
 } from '@codeleap/common'
 import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
 import { StyleSheet, Switch as NativeSwitch } from 'react-native'
-import { InputLabel, FormError } from './TextInput'
-import { View } from './View'
+import { InputLabel, FormError } from '../TextInput'
+import { View } from '../View'
 
+import {
+  SwitchStyles,
+  SwitchComposition,
+} from './styles'
+export * from './styles'
 type NativeSwitchProps = Omit<
   ComponentPropsWithRef<typeof NativeSwitch>,
   'thumbColor' | 'trackColor'
@@ -70,6 +74,7 @@ export const Switch = forwardRef<NativeSwitch, SwitchProps>(
             trackColor={{ false: trackColor, true: trackColor }}
             ios_backgroundColor={trackColor}
             value={value}
+            ref={ref}
             {...props}
           />
           <InputLabel label={label} style={getStyles('label')} />

package/src/components/Switch/styles.ts

@@ -0,0 +1,37 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SwitchParts = 'wrapper' | 'label' | 'input' | 'error' | 'inputWrapper'
+export type SwitchComposition =
+  | SwitchParts
+  | `${SwitchParts}:disabled`
+  | `${SwitchParts}:on`
+
+const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
+
+const presets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })),
+)
+
+export const SwitchStyles = {
+  ...presets,
+  default: createSwitchStyle((theme) => ({
+    wrapper: {},
+    inputWrapper: {
+      ...theme.presets.row,
+      ...theme.presets.alignCenter,
+    },
+    label: {
+      ...theme.spacing.marginLeft(0.5),
+    },
+    input: {
+      color: theme.colors.white,
+      backgroundColor: theme.colors.gray,
+    },
+    'input:on': {
+      color: theme.colors.primary,
+      backgroundColor: theme.colors.gray,
+    },
+    error: {
+      color: theme.colors.negative,
+    },
+  })),
+}

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

@@ -4,13 +4,17 @@ import {
   ComponentVariants,
   useDefaultComponentStyle,
   BaseViewProps,
-  TextStyles,
+
 } from '@codeleap/common'
 import { Animated, StyleSheet, Text as NativeText } from 'react-native'
 import { MotiText as _MotiText, MotiProps } from 'moti'
-import { useAnimateColor } from '../utils/hooks'
+import { useAnimateColor } from '../../utils'
+import { TextStyles } from './styles'
+
+export * from './styles'
+
 export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
-  text?: string
+  text?: React.ReactNode
   variants?: ComponentVariants<typeof TextStyles>['variants']
   animated?: boolean
   colorChangeConfig?: Partial<Animated.TimingAnimationConfig>

package/src/components/Text/styles.ts

@@ -0,0 +1,34 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type TextComposition = 'text'
+const createTextStyle = createDefaultVariantFactory<TextComposition>()
+
+const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
+)
+
+export const TextStyles = {
+  ...presets,
+  default: createTextStyle((theme) => ({
+    text: {
+      fontFamily: theme.typography.fontFamily,
+      ...assignTextStyle('p1')(theme).text,
+    },
+  })),
+  h1: assignTextStyle('h1'),
+  h2: assignTextStyle('h2'),
+  h3: assignTextStyle('h3'),
+  h4: assignTextStyle('h4'),
+  h5: assignTextStyle('h5'),
+  h6: assignTextStyle('h6'),
+  p1: assignTextStyle('p1'),
+  p2: assignTextStyle('p2'),
+  p3: assignTextStyle('p3'),
+  p4: assignTextStyle('p4'),
+  link: assignTextStyle('p1'),
+  OSAlertBody: createTextStyle((theme) => ({
+    text: {
+      ...assignTextStyle('p1')(theme).text,
+      ...theme.presets.textCenter,
+    },
+  })),
+}