@codeleap/mobile 2.0.6 → 2.1.1

package/src/components/Checkbox/index.tsx

@@ -9,14 +9,15 @@ import {
   PropsOf,
 } from '@codeleap/common'
 import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { Switch as NativeCheckbox } from 'react-native'
-import { InputLabel, FormError } from '../TextInput'
+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<
@@ -45,29 +46,25 @@ export const Checkbox = forwardRef<GetRefType<PropsOf<typeof View>['ref']>, Chec
       ...props
     } = checkboxProps
 
-    const variantStyles = useDefaultComponentStyle('Checkbox', {
-      // @ts-ignore
+    const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxStyles>('u:Checkbox', {
       variants,
+      styles,
+      transform: StyleSheet.flatten,
     })
 
     const { error, showError } = useValidate(value, validate)
 
-    function getStyles(key: CheckboxComposition) {
+    function getStyles(key: CheckboxComposition, styleObj = variantStyles) {
       return [
-        variantStyles[key],
-        variantStyles[key],
-        key === 'wrapper' ? style : {},
-        value ? variantStyles[key + ':checked'] : {},
-        value ? styles[key + ':checked'] : {},
-        showError ? variantStyles[key + ':error'] : {},
-        showError ? styles[key + ':error'] : {},
-        checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
-        checkboxProps.disabled ? styles[key + ':disabled'] : {},
+        styleObj[key],
+        value ? styleObj[key + ':checked'] : {},
+        showError ? styleObj[key + ':error'] : {},
+        checkboxProps.disabled ? styleObj[key + ':disabled'] : {},
       ]
     }
 
     return (
-      <View style={getStyles('wrapper')} ref={ref} {...props}>
+      <View style={[getStyles('wrapper'), style]} ref={ref} {...props}>
         <Touchable
           debugName={`Set checkbox value to ${!value}`}
           style={getStyles('input')}
@@ -79,9 +76,13 @@ export const Checkbox = forwardRef<GetRefType<PropsOf<typeof View>['ref']>, Chec
           <View style={getStyles('checkmarkWrapper')}>
             <View style={getStyles('checkmark')} />
           </View>
-          <View style={getStyles('labelWrapper')}>
-            <InputLabel label={label} style={getStyles('label')} required={required}/>
-          </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

@@ -1,14 +1,14 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
 
 type CheckboxParts =
   | 'wrapper'
-  | 'label'
-  | 'labelWrapper'
   | 'input'
   | 'inputFeedback'
   | 'checkmark'
   | 'checkmarkWrapper'
   | 'error'
+  | `label${Capitalize<InputLabelComposition>}`
 
 export type CheckboxComposition =
   | CheckboxParts
@@ -36,18 +36,17 @@ export const CheckboxStyles = {
       input: {
         flexDirection: 'row',
         ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.small,
+
       },
       labelWrapper: {
-        flex: 1,
+        // flex: 1,
+        ...theme.spacing.marginLeft(1),
+
       },
       inputFeedback: {
         type: 'opacity',
         value: 0.5,
       },
-      label: {
-        ...theme.spacing.marginLeft(0.5),
-      },
 
       checkmark: {
         position: 'absolute',
@@ -67,6 +66,7 @@ export const CheckboxStyles = {
       checkmarkWrapper: {
         position: 'relative',
         width: size,
+        borderRadius: theme.borderRadius.small,
         height: size,
         ...theme.border.neutral(1),
       },

package/src/components/ContentView/index.tsx

@@ -20,7 +20,7 @@ export type ContentViewProps = Omit<
   ViewProps,
   'variants' | 'responsiveVariants'
 > & {
-  placeholderMsg: string
+  message?: string
   loading?: boolean
   styles?: StylesOf<ViewComposition>
 } & ComponentVariants<typeof ContentViewStyles>
@@ -30,7 +30,7 @@ const WrapContent = ({ children, ...props }) => (
 )
 
 export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const { children, placeholderMsg, loading, variants, styles, ...props } =
+  const { children, message, loading, variants, styles, ...props } =
     rawProps
 
   const variantStyle = useDefaultComponentStyle('ContentView', {
@@ -57,7 +57,7 @@ export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
 
   return (
     <WrapContent {...props} style={styles}>
-      <Text text={placeholderMsg} />
+      <Text text={message} />
     </WrapContent>
   )
 }

package/src/components/ContentView/styles.ts

@@ -14,12 +14,11 @@ export const ContentViewStyles = {
     wrapper: {
       display: 'flex',
       ...theme.presets.column,
-      ...theme.presets.alignCenter,
     },
     loader: {
       alignSelf: 'center',
-      height: 100,
-      width: 100,
+      height: theme.values.width * 0.15,
+      width: theme.values.width * 0.15,
     },
   })),
 }

package/src/components/EmptyPlaceholder/index.tsx

@@ -23,7 +23,7 @@ export * from './styles'
 
 export type EmptyPlaceholderProps = {
   itemName?: string
-  title?: string
+  title?: React.ReactElement
   loading?: boolean
   styles?: StylesOf<EmptyPlaceholderComposition>
   variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']

package/src/components/FileInput/index.tsx

@@ -1,45 +1,28 @@
 import React, { forwardRef, useImperativeHandle } from 'react'
 import { DocumentPicker, ImageCropPicker } from '../../modules/documentPicker'
 import {
-  ComponentVariants,
-
-  IconPlaceholder,
   MobileInputFile,
   parseFilePathData,
-  useDefaultComponentStyle,
   useCodeleapContext,
   MobileFile,
 } from '@codeleap/common'
-import { StylesOf } from '../../types'
-import { Button, ButtonProps } from '../Button'
-import { View } from '../View'
-import { InputLabel } from '../TextInput'
 import { OSAlert } from '../../utils'
 import { Options } from 'react-native-image-crop-picker'
 import { DocumentPickerOptions } from '../../modules/types/documentPicker'
 
 export * from './styles'
 
-import {
-  FileInputComposition,
-  FileInputStyles,
-} from './styles'
-
 export type FileInputRef = {
   openFilePicker: (string?: 'camera' | 'library') => void
 }
 
 export type FileInputProps = {
-  label?: string
-  iconName?: IconPlaceholder
-  styles?: StylesOf<FileInputComposition>
   mode: 'hidden' | 'button'
-  variants?: ComponentVariants<typeof FileInputStyles>['variants']
   onFileSelect(files: MobileInputFile[]): void
   options?: DocumentPickerOptions<any>
-  buttonProps?: ButtonProps
+
   ref?: FileInputRef
-  placeholder?: string
+
   type?: 'image' | 'anyFile'
   alertProps?: Parameters<typeof OSAlert.ask>[0]
   pickerOptions?: Partial<Options>
@@ -76,27 +59,21 @@ export const FileInput = forwardRef<
   FileInputProps
 >((fileInputProps, ref) => {
   const {
-    mode = 'hidden',
+
     onFileSelect,
-    iconName,
-    styles,
-    label,
-    variants,
+
     options,
     type = 'image',
     alertProps,
-    placeholder = 'Select a file',
+
     pickerOptions,
-    required,
-    buttonProps,
+
     onOpenCamera = null,
     onOpenGallery = null,
     onOpenFileSystem = null,
     onError,
   } = fileInputProps
 
-  const [file, setFile] = React.useState(null)
-
   const { logger } = useCodeleapContext()
 
   async function openFileSystem() {
@@ -105,7 +82,6 @@ export const FileInput = forwardRef<
       if (!Array.isArray(files)) {
         files = [files]
       }
-      setFile(files)
       onFileSelect(files.map((file) => ({ preview: file.uri, file })))
     } catch (err) {
       handleError(err)
@@ -191,31 +167,9 @@ export const FileInput = forwardRef<
 
   }
 
-  const variantStyles = useDefaultComponentStyle('FileInput', {
-    styles,
-    variants,
-  })
-
   useImperativeHandle(ref, () => ({
     openFilePicker,
   }))
 
-  const filenames = file ? file.map((f) => f.name) : ''
-  if (mode === 'button') {
-    return (
-      <View style={variantStyles.wrapper}>
-        <InputLabel label={label} style={variantStyles.label} required={required}/>
-        <Button
-          onPress={() => openFilePicker()}
-          text={filenames || placeholder}
-          debugName={'Open file picker'}
-          icon={iconName || ('fileInputButton' as IconPlaceholder)}
-          variants={filenames ? '' : 'icon'}
-          {...buttonProps}
-        />
-      </View>
-    )
-  }
-
   return null
 })

package/src/components/InputLabel/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { View, ViewProps } from '../View'
+import { InputLabelComposition, InputLabelStyles } from './styles'
+import { Text } from '../Text'
+import { StyleSheet } from 'react-native'
+
+export type InputLabelProps = ViewProps & {
+    styles?: StylesOf<InputLabelComposition>
+    label?: FormTypes.Label
+    required?: boolean
+} & ComponentVariants<typeof InputLabelStyles>
+
+export * from './styles'
+
+export const InputLabel:React.FC<InputLabelProps> = (props) => {
+  const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelStyles>('u:InputLabel', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <View {...viewProps} style={[variantStyles.wrapper, style]}>
+        <Text style={variantStyles.text} text={label} />
+        {required && <Text style={variantStyles.asterisk} text={' *'} />}
+      </View>
+    case 'object':
+      return <>
+        {label as React.ReactNode}
+      </>
+    default:
+      return null
+  }
+}

package/src/components/InputLabel/styles.ts

@@ -0,0 +1,19 @@
+import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
+
+export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
+
+const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
+
+export const InputLabelStyles = {
+  default: createInputLabelStyle((theme) => ({
+    asterisk: {
+      color: theme.colors.negative,
+    },
+    wrapper: {
+      ...theme.presets.row,
+    },
+    text: {
+      ...assignTextStyle('h5')(theme).text,
+    },
+  })),
+}

package/src/components/RadioInput/index.tsx

@@ -5,11 +5,13 @@ import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import {
   ComponentVariants,
+  getNestedStylesByKey,
   StylesOf,
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import { View } from '../View'
 import { RadioInputComposition, RadioInputStyles } from './styles'
+import { InputLabel } from '../InputLabel'
 
 export * from './styles'
 
@@ -18,7 +20,7 @@ type RadioItem<T extends unknown = any> = {
   label: ReactNode
 }
 
-const getRadioStyle = (props) => useDefaultComponentStyle('RadioInput', props)
+const getRadioStyle = (props) => useDefaultComponentStyle<'u:RadioInput', typeof RadioInputStyles>('u:RadioInput', props)
 
 export type RadioButtonProps = Omit<
   ComponentPropsWithoutRef<typeof Touchable>,
@@ -35,6 +37,7 @@ export type RadioGroupProps<T> = {
   options: RadioItem<T>[]
   value: T
   onValueChange(value: T): void
+  required?: boolean
   label: ReactNode
   styles?: StylesOf<RadioInputComposition>
 } & ComponentVariants<typeof RadioInputStyles>
@@ -73,6 +76,7 @@ export const RadioGroup = <T extends unknown>(
     onValueChange,
     label,
     responsiveVariants,
+    required = false,
     variants,
     styles,
   } = radioGroupProps
@@ -84,8 +88,8 @@ export const RadioGroup = <T extends unknown>(
   })
   return (
     <View style={radioStyle.wrapper}>
-      {typeof label === 'string' ? <Text text={label} /> : label}
-      <View style={radioStyle.listWrapper}>
+      <InputLabel required={required} label={label} styles={getNestedStylesByKey('label', radioStyle)}/>
+      <View style={radioStyle.list}>
         {options?.map((item, idx) => (
           <RadioButton
             debugName={'RadioButton'}

package/src/components/RadioInput/styles.ts

@@ -1,9 +1,10 @@
 import {
   createDefaultVariantFactory, includePresets,
 } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
 type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark' | 'buttonFeedback'
 
-type RadioGroupParts = 'label' | 'wrapper' | 'list'
+type RadioGroupParts = `label${Capitalize<InputLabelComposition>}` | 'wrapper' | 'list'
 
 export type RadioInputComposition =
   | `${RadioParts}:checked`

package/src/components/SegmentedControl/index.tsx

@@ -2,13 +2,14 @@ import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react
 import { Scroll, ScrollProps } from '../Scroll'
 
 import { Easing, EasingFunction, StyleSheet } from 'react-native'
-import { PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { FormTypes, getNestedStylesByKey, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
 import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
 import { Touchable } from '../Touchable'
 import { StylesOf } from '../../types/utility'
 import { Text, TextProps } from '../Text'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { View } from '../View'
+import { InputLabel } from '../InputLabel'
 export * from './styles'
 export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
   scrollTo: (index: number) => void
@@ -28,6 +29,7 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
     touchableProps?: Partial<PropsOf<typeof Touchable>>
     styles?: StylesOf<SegmentedControlComposition>
     scrollProps?: any
+    label?: FormTypes.Label
     RenderButton?: (props: SegmentedControlProps & {
       touchableProps: PropsOf<typeof Touchable>
       textProps: PropsOf<typeof Text>
@@ -48,6 +50,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     options = [],
     onValueChange,
     debugName,
+    label,
     value,
     styles = {},
     animation = {},
@@ -56,7 +59,6 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     getItemWidth = (i) => i.label.length * 20,
     RenderAnimatedView,
     RenderButton,
-    ...viewProps
   } = props
 
   let _animation = {
@@ -119,7 +121,10 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   const AnimatedView = RenderAnimatedView || View
   variantStyles = JSON.parse(JSON.stringify(variantStyles))
   _animation = JSON.parse(JSON.stringify(_animation))
-  return (
+
+  const labelStyles = getNestedStylesByKey('label', variantStyles)
+  return (<>
+    <InputLabel label={label} styles={labelStyles} required={false}/>
     <Scroll
       horizontal
       showsHorizontalScrollIndicator={false}
@@ -186,6 +191,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
         })}
       </View>
     </Scroll>
+  </>
   )
 
 })

package/src/components/SegmentedControl/styles.ts

@@ -1,4 +1,5 @@
 import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
 import { TouchableStylesGen } from '../Touchable'
 
 export type SegmentedControlStates = 'selected'
@@ -12,7 +13,8 @@ export type SegmentedControlComposition =
  `text:${SegmentedControlStates}` |
  'button' |
  'buttonFeedback' |
- `button:${SegmentedControlStates}`
+ `button:${SegmentedControlStates}` |
+ `label${Capitalize<InputLabelComposition>}`
 
 export type SegmentedControlStylesGen<TCSS = any> =
   StylesOf<

package/src/components/Slider/index.tsx

@@ -7,10 +7,13 @@ import { useRef } from 'react'
 import { StyleSheet } from 'react-native'
 import { View } from '../View'
 import {
+  getNestedStylesByKey,
   useDefaultComponentStyle,
 } from '@codeleap/common'
-import { InputLabel } from '../TextInput'
+
 import { SliderProps } from './types'
+import { InputLabel } from '../InputLabel'
+import { SliderStyles } from './styles'
 
 export * from './styles'
 
@@ -38,8 +41,10 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
   const toggleTooltipTimeout = useRef(null)
   const valueRef = useRef(value)
 
-  const variantStyles = useDefaultComponentStyle('Slider', {
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderStyles>('u:Slider', {
     variants,
+    styles,
+    transform: StyleSheet.flatten,
   })
 
   function setValue() {
@@ -66,7 +71,7 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
 
   return (
     <View style={[variantStyles.wrapper, style]}>
-      <InputLabel label={label} style={[variantStyles.label, styles.label]} />
+      <InputLabel label={label} styles={getNestedStylesByKey('label', variantStyles)} />
       <RNSlider
         value={value}
         onSlidingStart={() => {
@@ -105,16 +110,16 @@ export const Slider: React.FC<SliderProps> = (sliderProps) => {
         maximumValue={labels ? labels.length - 1 : 10}
         trackMarks={labels ? Object.keys(labels).map((z) => parseInt(z)) : []}
         containerStyle={
-            [variantStyles.inputContainer, styles.inputContainer] as any
+            [variantStyles.inputContainer] as any
         }
         thumbStyle={
-            StyleSheet.flatten([variantStyles.handle, styles.handle]) as any
+            StyleSheet.flatten([variantStyles.handle]) as any
         }
-        trackStyle={[variantStyles.track, styles.track] as any}
+        trackStyle={[variantStyles.track] as any}
         minimumTrackTintColor={
           StyleSheet.flatten([
             variantStyles.selectedTrack,
-            styles.selectedTrack,
+
           ])?.backgroundColor
         }
         {...props}

package/src/components/Slider/styles.ts

@@ -1,10 +1,11 @@
 import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
 
 export type SliderComposition =
   | 'wrapper'
   | 'handle'
   | 'track'
-  | 'label'
+  | `label${Capitalize<InputLabelComposition>}`
   | 'selectedTrack'
   | 'inputContainer'
   | 'tooltip'

package/src/components/Switch/index.tsx

@@ -10,13 +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 { FormError } from '../TextInput'
 import { View } from '../View'
 
 import {
   SwitchStyles,
   SwitchComposition,
 } from './styles'
+import { InputLabel } from '../InputLabel'
 export * from './styles'
 type NativeSwitchProps = Omit<
   ComponentPropsWithRef<typeof NativeSwitch>,
@@ -77,7 +78,11 @@ export const Switch = forwardRef<NativeSwitch, SwitchProps>(
             ref={ref}
             {...props}
           />
-          <InputLabel label={label} style={getStyles('label')} />
+          <InputLabel label={label} styles={{
+            asterisk: getStyles('labelAsterisk'),
+            text: getStyles('labelText'),
+            wrapper: getStyles('labelWrapper'),
+          }} />
         </View>
         <FormError text={error.message} style={getStyles('error')} />
       </View>

package/src/components/Switch/styles.ts

@@ -1,6 +1,7 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
 
-export type SwitchParts = 'wrapper' | 'label' | 'input' | 'error' | 'inputWrapper'
+export type SwitchParts = 'wrapper' | `label${Capitalize<InputLabelComposition>}` | 'input' | 'error' | 'inputWrapper'
 export type SwitchComposition =
   | SwitchParts
   | `${SwitchParts}:disabled`
@@ -19,7 +20,7 @@ export const SwitchStyles = {
       ...theme.presets.row,
       ...theme.presets.alignCenter,
     },
-    label: {
+    labelWrapper: {
       ...theme.spacing.marginLeft(0.5),
     },
     input: {

package/src/components/TextInput/index.tsx

@@ -15,13 +15,10 @@ import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useS
 import { Text, TextProps } from '../Text'
 import { View, ViewProps } from '../View'
 import { StylesOf } from '../../types'
-import { Icon } from '../Icon'
 import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
 import { Touchable, TouchableProps } from '../Touchable'
 import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
-import { InputLabel } from './Label'
-
-export { InputLabel } from './Label'
+import { InputLabel } from '../InputLabel'
 
 export * from './styles'
 
@@ -32,8 +29,6 @@ import {
 } from './styles'
 import { ActionIcon, ActionIconParts, ActionIconProps } from '../ActionIcon'
 
-type IconProp = { name: IconPlaceholder; action?: () => void }
-
 type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
 
 type SubtitleProps = {
@@ -194,9 +189,11 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     >
       <InputLabel
         label={label}
-        style={getStyles('label')}
-        asteriskStyle={getStyles('requiredAsterisk')}
-        wrapperStyle={getStyles('labelWrapper')}
+        styles={{
+          wrapper: getStyles('labelWrapper'),
+          asterisk: getStyles('labelAsterisk'),
+          text: getStyles('labelText'),
+        }}
         required={required}
       />
       <View style={getStyles('innerWrapper')} {...innerWrapperProps}>