@codeleap/web 3.1.2 → 3.2.1

package/src/components/Slider/index.tsx

@@ -1,4 +1,7 @@
-import * as React from 'react'
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import React from 'react'
+
 import { ComponentVariants, onMount, PropsOf, TypeGuards, useDefaultComponentStyle, useRef } from '@codeleap/common'
 import { SliderComposition } from './styles'
 import { StylesOf } from '../../types'
@@ -7,12 +10,12 @@ import { concatStyles, InputBaseProps, InputBase, selectInputBaseProps } from '.
 import { SliderPresets } from './styles'
 import { Text } from '../Text'
 
-import { 
-  Root as SliderContainer, 
-  Track as SliderTrack, 
-  Thumb as SliderThumb, 
+import {
+  Root as SliderContainer,
+  Track as SliderTrack,
+  Thumb as SliderThumb,
   Range as SliderRange,
-  SliderProps as PrimitiveSliderProps
+  SliderProps as PrimitiveSliderProps,
 } from '@radix-ui/react-slider'
 
 export * from './styles'
@@ -42,13 +45,13 @@ export type TrackMarkProps = {
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   const { index, content, style } = props
 
-  if(!TypeGuards.isString(props.content)){
-    return <>
+  if (!TypeGuards.isString(props.content)) {
+    return <React.Fragment>
       {props.content}
-    </>
+    </React.Fragment>
   }
 
-  return <Text 
+  return <Text
     text={props.content}
     css={style}
   />
@@ -57,7 +60,7 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
 export const Slider = (props: SliderProps) => {
   const {
     inputBaseProps,
-    others
+    others,
   } = selectInputBaseProps(props)
 
   const {
@@ -109,7 +112,7 @@ export const Slider = (props: SliderProps) => {
     const hasLeftThumb = i !== 0
     const hasRightThumb = i + 1 < newValue.length
 
-    const previousThumbValue = hasLeftThumb ? (copyValue[i -1] + minStepsBetweenThumbs) : null
+    const previousThumbValue = hasLeftThumb ? (copyValue[i - 1] + minStepsBetweenThumbs) : null
     const nextThumbValue = hasRightThumb ? (copyValue[i + 1] - minStepsBetweenThumbs) : null
 
     if (previousThumbValue && _newValue <= previousThumbValue) {
@@ -133,7 +136,7 @@ export const Slider = (props: SliderProps) => {
       variantStyles.thumb,
       disabled && variantStyles['thumb:disabled'],
     ])
-  }, []) 
+  }, [])
 
   const trackStyle = React.useMemo(() => {
     return concatStyles([
@@ -141,16 +144,16 @@ export const Slider = (props: SliderProps) => {
       disabled && variantStyles['track:disabled'],
       variantStyles.unselectedTrack,
       disabled && variantStyles['unselectedTrack:disabled'],
-    ])  
-  }, [disabled]) 
+    ])
+  }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
     return concatStyles([
       variantStyles.selectedTrack,
       disabled && variantStyles['selectedTrack:disabled'],
-    ])  
+    ])
   }, [disabled])
-  
+
   const containerStyle = React.useMemo(() => {
     return concatStyles([
       variantStyles.sliderContainer,
@@ -161,11 +164,11 @@ export const Slider = (props: SliderProps) => {
   const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
 
   const trackMarksProp = React.useMemo(() => {
-    if(!trackMarksHaveContent){
+    if (!trackMarksHaveContent) {
       return trackMarks
     }
     return Object.keys(trackMarks).map((key) => Number(key))
-  },[trackMarksHaveContent])
+  }, [trackMarksHaveContent])
 
   const trackMarkStyle = React.useMemo(() => {
     return concatStyles([
@@ -194,12 +197,12 @@ export const Slider = (props: SliderProps) => {
 
       indicatorLabel?.order?.forEach((idx, i) => {
         const valueLabel = value[idx]
-        
+
         if (TypeGuards.isNil(valueLabel)) return
-  
+
         str = i === 0 ? String(valueLabel) : `${str}${indicatorLabel?.separator ?? ' - '}${valueLabel}`
       })
-  
+
       return str
     } else {
       return description
@@ -237,8 +240,10 @@ export const Slider = (props: SliderProps) => {
         </SliderTrack>
 
         {defaultValue.map((_thumbValue, i) => (
-          <SliderThumb 
-            key={i} 
+          <SliderThumb
+            key={i}
+            // @ts-ignore
+            index={i}
             style={thumbStyle}
             onClick={() => currentThumbRef.current = i}
             onMouseEnter={() => currentThumbRef.current = i}
@@ -247,56 +252,56 @@ export const Slider = (props: SliderProps) => {
       </SliderContainer>
 
       {trackMarksProp ?
-          <View css={trackMarkWrapperStyle}>
-            {
-              trackMarksProp.map((_, idx) => {
-                let idxStyle = {}
-
-                const relativeValue = Number(trackMarksProp[idx])
-    
-                if(idx === 0){
-                  idxStyle = variantStyles.firstTrackMark
-                } else if(idx === trackMarksProp.length - 1){
-                  idxStyle = variantStyles.lastTrackMark
-                } else {
-                  const markerPosition = (relativeValue / max) * 100
-
-                  idxStyle = { 
-                    position: 'absolute', 
-                    left: `${markerPosition}%`, 
-                    top: '50%', 
-                    transform: `translate(-50%, -50%)`,
-                  }
-                }
-
-                const style = [
-                  trackMarkStyle,
-                  idxStyle,
-                ]
-    
-                if (!trackMarksHaveContent){
-                  return <SliderTrackMark
-                    index={idx} 
-                    style={style}
-                    key={idx}
-                  />
+        <View css={trackMarkWrapperStyle}>
+          {
+            trackMarksProp.map((_, idx) => {
+              let idxStyle = {}
+
+              const relativeValue = Number(trackMarksProp[idx])
+
+              if (idx === 0) {
+                idxStyle = variantStyles.firstTrackMark
+              } else if (idx === trackMarksProp.length - 1) {
+                idxStyle = variantStyles.lastTrackMark
+              } else {
+                const markerPosition = (relativeValue / max) * 100
+
+                idxStyle = {
+                  position: 'absolute',
+                  left: `${markerPosition}%`,
+                  top: '50%',
+                  transform: `translate(-50%, -50%)`,
                 }
-                
-                const content = trackMarks[relativeValue]
-            
-                return (
-                  <SliderTrackMark
-                    index={idx} 
-                    content={content}
-                    style={style} 
-                    key={idx}
-                  />
-                )
-              })
-            }
-          </View>
+              }
+
+              const style = [
+                trackMarkStyle,
+                idxStyle,
+              ]
+
+              if (!trackMarksHaveContent) {
+                return <SliderTrackMark
+                  index={idx}
+                  style={style}
+                  key={idx}
+                />
+              }
+
+              const content = trackMarks[relativeValue]
+
+              return (
+                <SliderTrackMark
+                  index={idx}
+                  content={content}
+                  style={style}
+                  key={idx}
+                />
+              )
+            })
+          }
+        </View>
         : null}
-    </InputBase>    
+    </InputBase>
   )
 }
 

package/src/components/Switch/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import * as React from 'react'
 import { ComponentVariants, useDefaultComponentStyle, StylesOf, PropsOf } from '@codeleap/common'
 import { View } from '../View'
@@ -7,16 +9,16 @@ import { useAnimatedVariantStyles } from '../..'
 import { motion } from 'framer-motion'
 
 export * from './styles'
-  
+
 export type SwitchProps = Pick<
   InputBaseProps,
   'debugName' | 'disabled' | 'label'
-> &  {
+> & {
   variants?: ComponentVariants<typeof SwitchPresets>['variants']
   styles?: StylesOf<SwitchComposition>
   value: boolean
   onValueChange: (value: boolean) => void
-  onChange?:  (value: boolean) => void
+  onChange?: (value: boolean) => void
   style?: PropsOf<typeof View>['style']
   switchOnLeft?: boolean
 }
@@ -24,105 +26,106 @@ export type SwitchProps = Pick<
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
 export const Switch = (props: SwitchProps) => {
-    const {
-      inputBaseProps,
-      others
-    } = selectInputBaseProps(props)
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      value,
-      disabled,
-      debugName,
-      onValueChange,
-      onChange,
-      switchOnLeft,
-    } = others
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps(props)
+  const {
+    variants = [],
+    style = {},
+    styles = {},
+    value,
+    disabled,
+    debugName,
+    onValueChange,
+    onChange,
+    switchOnLeft,
+  } = others
+
+  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
-    const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
-      variants,
-      styles, 
-      rootElement: 'wrapper',
-    })
-    
-    const trackAnimation = useAnimatedVariantStyles({
-      variantStyles,
-      animatedProperties: ['track:off','track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
-      updater: () =>{
-        'worklet'
-        let disabledStyle = {}
-        if(disabled){
-          disabledStyle =  value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
-        }
-        const style =  value ? variantStyles['track:on'] : variantStyles['track:off']
+  const trackAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
+      }
+      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
 
-        return {
-          ...style,
-          ...disabledStyle
-        }
-      },
-      dependencies: [value, disabled],
-    })
+      return {
+        ...style,
+        ...disabledStyle,
+      }
+    },
+    dependencies: [value, disabled],
+  })
 
-    const thumbAnimation = useAnimatedVariantStyles({
-      variantStyles,
-      animatedProperties: ['thumb:off','thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
-      updater: () =>{
-        'worklet'
-        let disabledStyle = {}
-        if(disabled){
-          disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
-        }
-        const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
-        return {
-          ...style,
-          ...disabledStyle
-        }
-      },
-      dependencies: [value, disabled],
-    })
+  const thumbAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
+      }
+      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
+      return {
+        ...style,
+        ...disabledStyle,
+      }
+    },
+    dependencies: [value, disabled],
+  })
 
-    const _switchOnLeft = switchOnLeft ?? variantStyles['__props']?.switchOnLeft
+  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
-    const handleChange = () => {
-      if (disabled) return
-      if(onValueChange) onValueChange?.(!value)
-      if(onChange) onChange?.(!value)
-    }
+  const handleChange = () => {
+    if (disabled) return
+    if (onValueChange) onValueChange?.(!value)
+    if (onChange) onChange?.(!value)
+  }
 
-    return <InputBase
-      {...inputBaseProps}
-      debugName={debugName}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-        ],
-      }}
-      order={_switchOnLeft ?  reversedOrder : InputBaseDefaultOrder}
-      style={style}
-      disabled={disabled} 
+  return <InputBase
+    {...inputBaseProps}
+    debugName={debugName}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+      ],
+    }}
+    order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
+    disabled={disabled}
+    noError
+  >
+    <motion.div
+      css={[
+        variantStyles.track,
+        disabled && variantStyles['track:disabled'],
+      ]}
+      initial={false}
+      animate={trackAnimation}
+      transition={variantStyles['track:transition']}
+      onClick={handleChange}
     >
       <motion.div
         css={[
-          variantStyles.track, 
-          disabled && variantStyles['track:disabled'],
+          variantStyles.thumb,
+          disabled && variantStyles['thumb:disabled'],
         ]}
         initial={false}
-        animate={trackAnimation}
-        transition={variantStyles['track:transition']}
-        onClick={handleChange}
-      >
-        <motion.div 
-          css={[
-            variantStyles.thumb, 
-            disabled && variantStyles['thumb:disabled'],
-          ]}
-          initial={false}
-          animate={thumbAnimation}
-          transition={variantStyles['thumb:transition']}
-        />
-      </motion.div>
-    </InputBase>
+        animate={thumbAnimation}
+        transition={variantStyles['thumb:transition']}
+      />
+    </motion.div>
+  </InputBase>
 }

package/src/components/Text/index.tsx

@@ -2,61 +2,46 @@
 import { jsx } from '@emotion/react'
 import {
   ComponentVariants,
-  useCodeleapContext,
   useDefaultComponentStyle,
 } from '@codeleap/common'
-import { ComponentPropsWithoutRef, ElementType } from 'react'
-import { StylesOf } from '../../types/utility'
-import { TextComposition, TextPresets } from './styles'
+import { NativeHTMLElement } from '../../types/utility'
+import { TextPresets } from './styles'
+import { View, ViewProps } from '../View'
 
 export * from './styles'
 
-export type TextProps<T extends ElementType> = {
-  component?: T
-  text?: string
-  message?: string // is required
-  styles?: StylesOf<TextComposition>
-  debug?: boolean
-  debugName?: string
-} & ComponentPropsWithoutRef<T> &
-  ComponentVariants<typeof TextPresets>
+export type TextProps<T extends NativeHTMLElement> =
+  Omit<ViewProps<T>, 'variants'|'responsiveVariants'> &
+  ComponentVariants<typeof TextPresets> &
+  {
+    text?: string
+  }
 
-export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
+export const Text = <T extends NativeHTMLElement>(textProps: TextProps<T>) => {
   const {
     variants = [],
     responsiveVariants = {},
     text = null,
     children,
-    component = 'p',
-    styles,
-    message = null,
-    debug = false,
-    debugName,
+    // style,
     ...props
   } = textProps
 
-  const variantStyles = useDefaultComponentStyle('Text', {
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
     rootElement: 'text',
     responsiveVariants,
     variants,
-    styles,
-  })
-
-  const { logger } = useCodeleapContext()
 
-  const Component = component
-
-  if (debug) {
-    logger.log(`Text ${debugName}`, { variantStyles, text })
-  }
+  })
 
   return (
-    //@ts-ignore
-    <Component
-      css={[variantStyles.text, props.style]}
+    // @ts-ignore
+    <View
+      css={variantStyles.text}
+      component={'p'}
       {...props}
     >
       {text || children}
-    </Component>
+    </View>
   )
 }

package/src/components/TextInput/index.tsx

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
 import {
   ComponentVariants,
   FormTypes,
@@ -10,7 +13,6 @@ import {
   yup,
 } from '@codeleap/common'
 import React, {
-  ComponentPropsWithoutRef,
   forwardRef,
   useImperativeHandle,
   useRef,
@@ -19,7 +21,7 @@ import React, {
 import TextareaAutosize from 'react-autosize-textarea'
 import InputMask from 'react-input-mask'
 import { Touchable, TouchableProps } from '../Touchable'
-import { StylesOf } from '../../types/utility'
+import { StylesOf, HTMLProps } from '../../types/utility'
 import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { TextInputPresets } from './styles'
 import { getMaskInputProps, TextInputMaskingProps } from './mask'
@@ -27,7 +29,7 @@ import { getMaskInputProps, TextInputMaskingProps } from './mask'
 export * from './styles'
 export * from './mask'
 
-type NativeTextInputProps = ComponentPropsWithoutRef<'input'>
+type NativeTextInputProps = HTMLProps<'input'>
 
 export type TextInputProps =
   Omit<InputBaseProps, 'styles' | 'variants'> &
@@ -41,7 +43,7 @@ export type TextInputProps =
     value?: NativeTextInputProps['value']
     multiline?: boolean
     onPress?: TouchableProps['onPress']
-    onChangeText?: (value: string) => void
+    onChangeText?: (textValue:string) => void
     caretColor?: string
     focused?: boolean
     _error?: boolean
@@ -49,8 +51,10 @@ export type TextInputProps =
     masking?: TextInputMaskingProps
   }
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, inputRef) => {
-  const innerInputRef = useRef<HTMLInputElement>(null)
+type InputRef = HTMLInputElement & { isTextInput?: boolean }
+
+export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
+  const innerInputRef = useRef<InputRef>(null)
 
   const {
     inputBaseProps,
@@ -201,8 +205,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, in
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
         [inputBaseAction]: () => {
-          // @ts-ignore
-          if (isMasked) innerInputRef.current?.onFocus?.()
+          // if (isMasked) innerInputRef.current?.onFocus?.()
           innerInputRef.current?.focus?.()
           if (isPressable) onPress?.()
         },
@@ -215,6 +218,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, in
         ..._wrapperOnInputFocus,
       }}
     >
+
       <InputElement
         editable={`${!isPressable && !isDisabled}`}
         {...buttonModeProps}
@@ -222,7 +226,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, in
         {...textInputProps}
         value={value}
         onChange={(e) => handleChange(e)}
+        // @ts-ignore
         onBlur={handleBlur}
+        // @ts-ignore
         onFocus={handleFocus}
         css={[
           variantStyles.input,

package/src/components/Tooltip/index.tsx

@@ -90,7 +90,7 @@ const invert = (pos) => {
   }
 }
 
-export const Tooltip: React.FC<TooltipProps> = (props) => {
+export const Tooltip = (props:TooltipProps) => {
   const {
     children,
     position = 'top',