@codeleap/mobile 2.3.0 → 2.3.1

package/src/components/Slider/index.tsx

@@ -0,0 +1,130 @@
+import { SliderMark } from './Mark'
+import { ThumbTooltip } from './Thumb'
+import * as React from 'react'
+import { Slider as RNSlider } from '@miblanchard/react-native-slider'
+
+import { useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { View } from '../View'
+import {
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+
+import { SliderProps } from './types'
+import { InputLabel } from '../InputLabel'
+import { SliderStyles } from './styles'
+
+export * from './styles'
+
+export const Slider: React.FC<SliderProps> = (sliderProps) => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false)
+
+  const {
+    debounce,
+    onValueChange,
+    labels,
+    value,
+    label,
+    valueOverThumb,
+    formatTooltip,
+    styles = {},
+    style,
+    tooltipVisibilityWindow = 830,
+    variants,
+    ...props
+  } = sliderProps
+
+  const changeDebounce = typeof debounce === 'number' ? debounce : 100
+
+  const debounceTimeout = useRef(null)
+  const toggleTooltipTimeout = useRef(null)
+  const valueRef = useRef(value)
+
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderStyles>('u:Slider', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  function setValue() {
+    onValueChange(valueRef.current)
+  }
+
+  function onChange(val) {
+    let eventValue = val
+
+    if (Array.isArray(val) && typeof value === 'number') {
+      eventValue = val[0]
+    }
+
+    if (eventValue === value) return
+
+    valueRef.current = eventValue as number
+
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current)
+
+    debounceTimeout.current = setTimeout(() => {
+      setValue()
+    }, changeDebounce)
+  }
+
+  return (
+    <View style={[variantStyles.wrapper, style]}>
+      <InputLabel label={label} styles={getNestedStylesByKey('label', variantStyles)} />
+      <RNSlider
+        value={value}
+        onSlidingStart={() => {
+          if (toggleTooltipTimeout.current) { clearTimeout(toggleTooltipTimeout.current) }
+
+          setTooltipVisible(true)
+        }}
+        onSlidingComplete={() => {
+          toggleTooltipTimeout.current = setTimeout(
+            () => setTooltipVisible(false),
+            tooltipVisibilityWindow,
+          )
+        }}
+        onValueChange={onChange}
+        renderAboveThumbComponent={(idx) => {
+          if (!valueOverThumb) return null
+          const thisValue = Array.isArray(value) ? value[idx] : value
+          return (
+            <ThumbTooltip
+              visible={tooltipVisible}
+              variantStyles={variantStyles}
+              styles={styles}
+            >
+              {formatTooltip ? formatTooltip(thisValue) : thisValue.toString()}
+            </ThumbTooltip>
+          )
+        }}
+        renderTrackMarkComponent={(idx) => (
+          <SliderMark
+            index={idx}
+            sliderProps={sliderProps}
+            styles={styles}
+            variantStyles={variantStyles}
+          />
+        )}
+        maximumValue={labels ? labels.length - 1 : 10}
+        trackMarks={labels ? Object.keys(labels).map((z) => parseInt(z)) : []}
+        containerStyle={
+            [variantStyles.inputContainer] as any
+        }
+        thumbStyle={
+            StyleSheet.flatten([variantStyles.handle]) as any
+        }
+        trackStyle={[variantStyles.track] as any}
+        minimumTrackTintColor={
+          StyleSheet.flatten([
+            variantStyles.selectedTrack,
+
+          ])?.backgroundColor
+        }
+        {...props}
+      />
+    </View>
+  )
+}
+

package/src/components/Slider/styles.ts

@@ -0,0 +1,76 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+
+export type SliderComposition =
+  | 'wrapper'
+  | 'handle'
+  | 'track'
+  | `label${Capitalize<InputLabelComposition>}`
+  | '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

@@ -0,0 +1,30 @@
+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'
+import { ViewProps } from '../View'
+export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & {
+    debounce?: number
+    labels: string[]
+    value: number
+    valueOverThumb?: boolean
+    showMarks?: boolean
+    onValueChange: (val: number) => void
+    label: Form.Label
+    formatTooltip?: (val: number) => React.ReactNode
+    variants?: ComponentVariants<typeof SliderStyles>['variants']
+    styles?: StylesOf<SliderComposition>
+    style?: ViewProps['style']
+    tooltipVisibilityWindow?: number
+}
+
+export type SliderMarkProps = {
+    sliderProps: SliderProps
+    index: number
+    styles: SliderProps['styles']
+    variantStyles: SliderProps['styles']
+}

package/src/components/Switch/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import {
+
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  useCodeleapContext,
+  FormTypes,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { StyleSheet, Switch as NativeSwitch } from 'react-native'
+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>,
+  'thumbColor' | 'trackColor'
+>
+type SwitchProps = NativeSwitchProps & {
+  variants?: ComponentVariants<typeof SwitchStyles>['variants']
+  label?: ReactNode
+  styles?: StylesOf<SwitchComposition>
+  validate?: FormTypes.ValidatorFunctionWithoutForm | string
+}
+
+export const Switch = forwardRef<NativeSwitch, SwitchProps>(
+  (switchProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      validate,
+      label,
+      value,
+      ...props
+    } = switchProps
+
+    const variantStyles = useDefaultComponentStyle('Switch', {
+      variants,
+    })
+    const { error, showError } = useValidate(switchProps.value, validate)
+    function getStyles(key: SwitchComposition) {
+      return [
+        variantStyles[key],
+        styles[key],
+        key === 'wrapper' ? style : {},
+        showError ? variantStyles[key + ':error'] : {},
+        showError ? styles[key + ':error'] : {},
+        value ? variantStyles[key + ':on'] : {},
+        value ? styles[key + ':on'] : {},
+        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
+        switchProps.disabled ? styles[key + ':disabled'] : {},
+      ]
+    }
+
+    const inputStyles = getStyles('input')
+
+    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
+    const { Theme } = useCodeleapContext()
+
+    const thumbColor = color || Theme.colors.primary
+    const trackColor = backgroundColor || Theme.colors.gray
+    return (
+      <View style={getStyles('wrapper')}>
+        <View style={getStyles('inputWrapper')}>
+          <NativeSwitch
+            thumbColor={thumbColor}
+            trackColor={{ false: trackColor, true: trackColor }}
+            ios_backgroundColor={trackColor}
+            value={value}
+            ref={ref}
+            {...props}
+          />
+          <InputLabel label={label} styles={{
+            asterisk: getStyles('labelAsterisk'),
+            text: getStyles('labelText'),
+            wrapper: getStyles('labelWrapper'),
+          }} />
+        </View>
+        <FormError text={error.message} style={getStyles('error')} />
+      </View>
+    )
+  },
+) as React.FC<SwitchProps>

package/src/components/Switch/styles.ts

@@ -0,0 +1,38 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+
+export type SwitchParts = 'wrapper' | `label${Capitalize<InputLabelComposition>}` | '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,
+    },
+    labelWrapper: {
+      ...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/index.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TypeGuards,
+  useState,
+} from '@codeleap/common'
+import { Animated, GestureResponderEvent, Platform, StyleSheet, Text as NativeText } from 'react-native'
+import { MotiText as _MotiText, MotiProps } from 'moti'
+import { useAnimateColor, usePressableFeedback } from '../../utils'
+import { TextStyles } from './styles'
+import { View } from '../View'
+
+export * from './styles'
+
+export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+  text?: React.ReactNode
+  variants?: ComponentVariants<typeof TextStyles>['variants']
+  animated?: boolean
+  colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+  debugName?: string
+} & BaseViewProps & MotiProps
+
+const MotiText = Animated.createAnimatedComponent(_MotiText)
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { variants = [], text, children, style, colorChangeConfig, ...props } = textProps
+
+  const pressPolyfillEnabled = Platform.OS === 'android' && !!props.onPress
+
+  const [pressed, setPressed] = useState(false)
+  const handlePress = (pressed) => {
+    if (!pressPolyfillEnabled) return
+    return () => {
+      if (props.onPress) {
+        setPressed(pressed)
+
+      }
+    }
+  }
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextStyles>('u:Text', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'text',
+  })
+
+  const styles = StyleSheet.flatten([variantStyles.text, style])
+
+  const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
+
+  if (!!text && !TypeGuards.isString(text)) return <>{text}</>
+
+  const Component = textProps.animated ? MotiText : NativeText
+
+  const colorStyle = { color: props.animated ? animatedColor : styles.color }
+
+  const { getFeedbackStyle } = usePressableFeedback(styles, {
+    disabled: !pressPolyfillEnabled,
+    feedbackConfig: variantStyles.pressFeedback,
+    hightlightPropertyIn: 'color',
+    hightlightPropertyOut: 'backgroundColor',
+  })
+  const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
+
+  return <Component {...props}
+    onPressIn={handlePress(true)} onPressOut={handlePress(false)}
+    style={[styles, colorStyle, feedbackStyle]}
+    // @ts-ignore
+    ref={ref}
+  >
+    {text}
+    {children}
+  </Component>
+
+})
+
+// const childArr = React.Children.toArray([
+//   text,
+//   children,
+// ])
+
+// return <View style={[styles, colorStyle]}>
+//   {
+//     childArr.map((child) => {
+//       if (TypeGuards.isString(child)) {
+//         // @ts-ignore
+//         return <Component {...props} ref={ref}>
+//           {child}
+//         </Component>
+
+//       }
+//       return child
+//     })
+//   }
+// </View>

package/src/components/Text/styles.ts

@@ -0,0 +1,50 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets, shadeColor, StylesOf } from '@codeleap/common'
+import { FeedbackConfig } from '../../utils'
+
+export type TextComposition = 'text' | 'touchFeedback'
+
+export type TextStylesGen<TCSS = any> = StylesOf<'text', TCSS> & {
+  'pressFeedback'?: FeedbackConfig
+}
+
+const createTextStyle = createDefaultVariantFactory<
+  TextComposition, TextStylesGen
+>()
+
+const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
+)
+
+export const TextStyles = {
+  ...presets,
+  default: createTextStyle((theme) => {
+    const defaultStyle = assignTextStyle('p1')(theme).text
+    return {
+      text: {
+        fontFamily: theme.typography.fontFamily,
+        ...defaultStyle,
+      },
+      pressFeedback: {
+        type: 'highlight',
+        brightness: 0,
+        shiftOpacity: 0.3,
+      },
+    }
+  }),
+  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,
+    },
+  })),
+}