@codeleap/web 3.3.2 → 3.5.0

package/src/components/Select/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
 import React, { useRef, forwardRef, useImperativeHandle } from 'react'
-import { FormTypes, useValidate, useState, TypeGuards, onUpdate } from '@codeleap/common'
+import { FormTypes, useValidate, useState, TypeGuards, onUpdate, IconPlaceholder } from '@codeleap/common'
 import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
 import Async from 'react-select/async'
 import { useSelectStyles } from './styles'
@@ -18,7 +18,7 @@ export * from './styles'
 export * from './types'
 
 const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
-  const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused } = props
+  const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused, debugName } = props
 
   const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.styles ?? {}) })
 
@@ -30,6 +30,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         text={label}
         // @ts-ignore
         rightIcon={isSelected && selectedIcon}
+        debugName={debugName}
         {...itemProps}
         styles={styles}
       />
@@ -69,13 +70,13 @@ const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React
 }
 
 const DefaultPlaceholder = (props: PlaceholderProps) => {
-  const { text: TextPlaceholder, defaultStyles, icon: IconPlaceholder } = props
+  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, debugName } = props
 
   const _Text = () => {
     if (TypeGuards.isNil(TextPlaceholder)) return null
 
     if (TypeGuards.isString(TextPlaceholder)) {
-      return <Text text={TextPlaceholder} css={[defaultStyles.text]} />
+      return <Text debugName={debugName} text={TextPlaceholder} css={[defaultStyles.text]} />
     } else if (React.isValidElement(TextPlaceholder)) {
       return TextPlaceholder as JSX.Element
     } else if (TypeGuards.isFunction(TextPlaceholder)) {
@@ -84,22 +85,22 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
   }
 
   const _Image = () => {
-    if (TypeGuards.isNil(IconPlaceholder)) return null
+    if (TypeGuards.isNil(_IconPlaceholder)) return null
 
-    if (TypeGuards.isString(IconPlaceholder)) {
-      return <Icon name={TextPlaceholder as any} forceStyle={defaultStyles.icon} />
-    } else if (React.isValidElement(IconPlaceholder)) {
+    if (TypeGuards.isString(_IconPlaceholder)) {
+      return <Icon debugName={debugName} name={_IconPlaceholder as IconPlaceholder} forceStyle={defaultStyles.icon as React.CSSProperties} />
+    } else if (React.isValidElement(_IconPlaceholder)) {
       // @ts-ignore
       return <View style={defaultStyles.icon}>
-        { IconPlaceholder}
+        {_IconPlaceholder}
       </View>
-    } else if (TypeGuards.isFunction(IconPlaceholder)) {
-      return <IconPlaceholder {...props} />
+    } else if (TypeGuards.isFunction(_IconPlaceholder)) {
+      return <_IconPlaceholder {...props} />
     }
   }
 
   return (
-    <View css={[defaultStyles.wrapper]}>
+    <View style={defaultStyles.wrapper as React.CSSProperties}>
       <_Image />
       <_Text />
     </View>
@@ -107,11 +108,11 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
 }
 
 const LoadingIndicator = (props: LoadingIndicatorProps) => {
-  const { defaultStyles } = props
+  const { defaultStyles, debugName } = props
 
   return (
     <View css={[defaultStyles.wrapper]}>
-      <ActivityIndicator />
+      <ActivityIndicator debugName={debugName} />
     </View>
   )
 }
@@ -317,6 +318,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
     error: !!hasError,
     disabled: isDisabled,
     variantStyles,
+    debugName: debugName,
   }
 
   const _Placeholder = (props: NoticeProps) => {
@@ -332,6 +334,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
     }
 
     if (!hasInputValue) {
+      
       return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
     } else {
       const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
@@ -407,6 +410,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
               {...props}
               defaultStyles={loadingStyles}
               size={loadingIndicatorSize}
+              debugName={debugName}
             />
           ),
           DropdownIndicator: props => showDropdownIcon ? <components.DropdownIndicator {...props} /> : null,

package/src/components/Select/styles.ts

@@ -3,10 +3,9 @@ import { CSSInterpolation } from '@emotion/css'
 import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
 import { ButtonParts as _ButtonParts } from '../Button'
 import { InputBaseParts } from '../InputBase'
-import { LoadingOverlayComposition } from '../LoadingOverlay'
 import { SelectProps } from './types'
 
-type ButtonParts = Exclude<_ButtonParts, `loading${Capitalize<LoadingOverlayComposition>}` | 'badgeText' | 'badgeWrapper'>
+type ButtonParts = _ButtonParts
 
 export type ItemParts = `item${Capitalize<ButtonParts>}`
 
@@ -62,6 +61,7 @@ export type OptionState = {
 
 export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T, Multi>, state: ComponentState) {
   const {
+    responsiveVariants = {},
     variants,
     styles,
   } = props
@@ -75,6 +75,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T,
   const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>(
     'u:Select',
     {
+      responsiveVariants,
       variants,
       styles,
     },
@@ -109,7 +110,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T,
     text: optionStyleKey('text', state),
     leftIcon: optionStyleKey('leftIcon', state),
     icon: optionStyleKey('icon', state),
-    inner: optionStyleKey('inner', state),
+    loaderWrapper: optionStyleKey('loaderWrapper', state),
   })
 
   const placeholderStyles = {

package/src/components/Select/types.ts

@@ -3,6 +3,7 @@ import { CSSInterpolation } from '@emotion/css'
 import { CSSObject } from '@emotion/react'
 import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
 import { AsyncProps } from 'react-select/async'
+import { ComponentCommonProps } from '../../types'
 import { ButtonProps } from '../Button'
 import { InputBaseProps } from '../InputBase'
 import { SelectPresets, SelectComposition, OptionState } from './styles'
@@ -40,7 +41,7 @@ export type ComponentPartProps = {
   variantStyles: Record<SelectComposition, React.CSSProperties>
 }
 
-export type TCustomOption = OptionProps & ComponentPartProps & {
+export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
   optionsStyles: (state: OptionState) => OptionState['baseStyles']
   selectedIcon?: string
   itemProps?: ButtonProps
@@ -57,12 +58,12 @@ export type PlaceholderProps = NoticeProps & ComponentPartProps & {
     icon: CSSInterpolation
   }
   icon: SelectPlaceholderElement
-}
+} & ComponentCommonProps
 
 export type LoadingIndicatorProps = NoticeProps & {
   defaultStyles: { wrapper: CSSInterpolation }
   size?: number
-}
+} & ComponentCommonProps
 
 export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWithChildren<
   {

package/src/components/Slider/index.tsx

@@ -29,12 +29,11 @@ export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueC
   }
   value: number[]
   onValueChange: (val: number[]) => void
-  variants?: ComponentVariants<typeof SliderPresets>['variants']
   styles?: StylesOf<SliderComposition>
   style?: PropsOf<typeof View>['style']
   trackMarks?: Record<number, string>
   trackMarkComponent?: React.ComponentType<TrackMarkProps>
-}
+} & ComponentVariants<typeof SliderPresets>
 
 export type TrackMarkProps = {
   index: number
@@ -70,6 +69,7 @@ export const Slider = (props: SliderProps) => {
     label,
     debugName,
     styles = {},
+    responsiveVariants = {},
     style,
     disabled,
     variants,
@@ -127,6 +127,7 @@ export const Slider = (props: SliderProps) => {
   }
 
   const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
+    responsiveVariants,
     variants,
     styles,
   })

package/src/components/Switch/index.tsx

@@ -14,14 +14,13 @@ 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
   style?: PropsOf<typeof View>['style']
   switchOnLeft?: boolean
-}
+} & ComponentVariants<typeof SwitchPresets>
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
@@ -30,7 +29,9 @@ export const Switch = (props: SwitchProps) => {
     inputBaseProps,
     others,
   } = selectInputBaseProps(props)
+
   const {
+    responsiveVariants = {},
     variants = [],
     style = {},
     styles = {},
@@ -43,6 +44,7 @@ export const Switch = (props: SwitchProps) => {
   } = others
 
   const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
+    responsiveVariants,
     variants,
     styles,
     rootElement: 'wrapper',

package/src/components/Text/index.tsx

@@ -1,47 +1,120 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { NativeHTMLElement } from '../../types/utility'
-import { TextPresets } from './styles'
-import { View, ViewProps } from '../View'
+import { ComponentVariants, TypeGuards, useDefaultComponentStyle, useI18N } from '@codeleap/common'
+import React, { ComponentPropsWithoutRef, ElementType } from 'react'
+import { StylesOf } from '../../types/utility'
+import { TextComposition, TextPresets } from './styles'
 
 export * from './styles'
 
-export type TextProps<T extends NativeHTMLElement> =
-  Omit<ViewProps<T>, 'variants'|'responsiveVariants'> &
-  ComponentVariants<typeof TextPresets> &
-  {
-    text?: string
+export type TextProps<T extends ElementType> =
+  ComponentPropsWithoutRef<T> &
+  ComponentVariants<typeof TextPresets> & {
+    component?: T
+    text: string
+    styles?: StylesOf<TextComposition>
+    msg?: string
+    debugName?: string
+    debounce?: number
+    pressDisabled?: boolean
+    onPress?: (event: React.MouseEventHandler<T>) => void
+  }
+
+const defaultProps: Partial<TextProps<'p'>> = {
+  debugName: 'Text component',
+  component: 'p',
+  debounce: null,
+  pressDisabled: false,
+}
+
+export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
+  const allProps = {
+    ...Text.defaultProps,
+    ...textProps,
   }
 
-export const Text = <T extends NativeHTMLElement>(textProps: TextProps<T>) => {
   const {
     variants = [],
     responsiveVariants = {},
+    styles = {},
+    style = {},
+    css,
     text = null,
     children,
-    // style,
+    component: Component,
+    debugName,
+    msg = null,
+    onPress,
+    debounce,
+    pressDisabled,
+    onClick,
     ...props
-  } = textProps
+  } = allProps
+
+  const pressedRef = React.useRef(false)
+
+  const { t } = useI18N()
 
   const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
-    rootElement: 'text',
     responsiveVariants,
     variants,
-
+    styles,
+    rootElement: 'text',
   })
 
+  const _text = TypeGuards.isString(msg) ? msg : text
+
+  let content = t(String(_text))
+
+  if (TypeGuards.isNil(content) || !TypeGuards.isString(content) || content === 'null') {
+    content = text
+  }
+
+  const isPressable = (TypeGuards.isFunction(onPress) || TypeGuards.isFunction(onClick)) && !pressDisabled
+
+  const disabled = isPressable === false
+
+  const _onPress = (e: React.MouseEventHandler<T>) => {
+    if (disabled) return
+
+    const handlePress = () => {
+      onClick?.(e)
+      onPress?.(e)
+    }
+
+    if (TypeGuards.isNumber(debounce)) {
+      if (pressedRef.current) {
+        return
+      }
+
+      pressedRef.current = true
+      handlePress()
+      setTimeout(() => {
+        pressedRef.current = false
+      }, debounce)
+    } else {
+      handlePress()
+    }
+  }
+
+  const _styles = [
+    variantStyles.text,
+    disabled && variantStyles['text:disabled'],
+    css,
+    style,
+  ]
+
+  const pressProps = isPressable ? {
+    onClick: disabled ? null : _onPress,
+  } : {}
+
   return (
-    // @ts-ignore
-    <View
-      css={variantStyles.text}
-      component={'p'}
+    <Component
+      css={_styles}
       {...props}
+      {...pressProps}
     >
-      {text || children}
-    </View>
+      {content || children}
+    </Component>
   )
 }
+
+Text.defaultProps = defaultProps

package/src/components/Text/styles.ts

@@ -1,9 +1,9 @@
 import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
 
-export type TextComposition = 'text'
+export type TextComposition = 'text' | 'text:disabled'
 
 const createTextStyle = createDefaultVariantFactory<TextComposition>()
 
-export const TextPresets = includePresets((styles) =>
-  createTextStyle(() => ({ text: styles }))
-)
+export const TextPresets = includePresets((styles) => createTextStyle(() => ({ 
+  text: styles 
+})))

package/src/components/TextInput/index.tsx

@@ -39,7 +39,6 @@ export type TextInputProps =
     validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
     debugName?: string
     visibilityToggle?: boolean
-    variants?: ComponentVariants<typeof TextInputPresets>['variants']
     value?: NativeTextInputProps['value']
     multiline?: boolean
     onPress?: TouchableProps['onPress']
@@ -49,7 +48,7 @@ export type TextInputProps =
     _error?: boolean
     rows?: number
     masking?: TextInputMaskingProps
-  }
+  } & ComponentVariants<typeof TextInputPresets>
 
 type InputRef = HTMLInputElement & { isTextInput?: boolean }
 
@@ -62,8 +61,9 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
   } = selectInputBaseProps(props)
 
   const {
-    variants,
-    styles,
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
     value,
     validate,
     debugName,
@@ -76,7 +76,7 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
     _error,
     masking = null,
     ...textInputProps
-  } = others
+  } = others as TextInputProps
 
   const [_isFocused, setIsFocused] = useState(false)
 
@@ -92,6 +92,7 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
   const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
 
   const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
+    responsiveVariants,
     variants,
     styles,
   })
@@ -182,12 +183,6 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
 
   const inputBaseAction = isPressable ? 'onPress' : 'onClick'
 
-  const _wrapperOnInputFocus = {
-    [inputBaseAction]: () => {
-      innerInputRef.current?.focus?.()
-    },
-  }
-
   return (
     <InputBase
       innerWrapper={isPressable ? Touchable : undefined}
@@ -213,10 +208,6 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
       }}
       rightIcon={rightIcon}
       focused={isFocused}
-      wrapperProps={{
-        ...(inputBaseProps.wrapperProps || {}),
-        ..._wrapperOnInputFocus,
-      }}
     >
 
       <InputElement