@codeleap/web 2.4.6 → 3.0.2

package/src/components/Switch/index.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import { ComponentVariants, useDefaultComponentStyle, StylesOf, PropsOf } from '@codeleap/common'
+import { View } from '../View'
+import { SwitchPresets, SwitchComposition } from './styles'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+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
+  style?: PropsOf<typeof View>['style']
+  switchOnLeft?: boolean
+}
+
+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 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']
+
+        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 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} 
+    >
+      <motion.div
+        css={[
+          variantStyles.track, 
+          disabled && variantStyles['track: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>
+}

package/src/components/Switch/styles.ts

@@ -0,0 +1,20 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
+
+type AnimatableParts = 'track' | 'thumb'
+export type SwitchParts = InputBaseParts | AnimatableParts 
+
+export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
+
+export type SwitchStates = InputBaseStates
+
+export type SwitchComposition =
+  | SwitchParts
+  | `${SwitchParts}:${SwitchStates}`
+  | `${AnimatableParts}:transition`
+  | `${AnimatableParts}:${SwitchAnimationStates}`
+  | '__props'
+
+const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
+
+export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))

package/src/components/Text/index.tsx

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+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'
+
+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 const Text = <T extends ElementType>(textProps: TextProps<T>) => {
+  const {
+    variants = [],
+    responsiveVariants = {},
+    text = null,
+    children,
+    component = 'p',
+    styles,
+    message = null,
+    debug = false,
+    debugName,
+    ...props
+  } = textProps
+
+  const variantStyles = useDefaultComponentStyle('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]}
+      {...props}
+    >
+      {text || children}
+    </Component>
+  )
+}

package/src/components/Text/styles.ts

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

package/src/components/TextInput/index.tsx

@@ -0,0 +1,253 @@
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  TextInputComposition,
+  TypeGuards,
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useValidate,
+  yup,
+} from '@codeleap/common'
+import React, {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import TextareaAutosize from 'react-autosize-textarea'
+import InputMask from 'react-input-mask'
+import { Touchable, TouchableProps } from '../Touchable'
+import { StylesOf } from '../../types/utility'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { TextInputPresets } from './styles'
+import { getMaskInputProps, TextInputMaskingProps } from './mask'
+
+export * from './styles'
+export * from './mask'
+
+type NativeTextInputProps = ComponentPropsWithoutRef<'input'>
+
+export type TextInputProps =
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  Omit<NativeTextInputProps, 'value'|'crossOrigin'> & {
+    styles?: StylesOf<TextInputComposition>
+    password?: boolean
+    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+    debugName?: string
+    visibilityToggle?: boolean
+    variants?: ComponentVariants<typeof TextInputPresets>['variants']
+    value?: NativeTextInputProps['value']
+    multiline?: boolean
+    onPress?: TouchableProps['onPress']
+    onChangeText?: (value: string) => void
+    caretColor?: string
+    focused?: boolean
+    _error?: boolean
+    rows?: number
+    masking?: TextInputMaskingProps
+  }
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, inputRef) => {
+  const innerInputRef = useRef<HTMLInputElement>(null)
+
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps(props)
+
+  const {
+    variants,
+    styles,
+    value,
+    validate,
+    debugName,
+    visibilityToggle,
+    password,
+    onPress,
+    multiline,
+    caretColor,
+    focused,
+    _error,
+    masking = null,
+    ...textInputProps
+  } = others
+
+  const [_isFocused, setIsFocused] = useState(false)
+
+  const isFocused = _isFocused || focused
+
+  const [secureTextEntry, toggleSecureTextEntry] = useBooleanToggle(true)
+
+  const isMultiline = multiline
+
+  const isMasked = !TypeGuards.isNil(masking)
+  const maskProps = isMasked ? getMaskInputProps({ masking }) : null
+
+  const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
+
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
+    variants,
+    styles,
+  })
+
+  useImperativeHandle(inputRef, () => {
+    return {
+      ...innerInputRef.current,
+      focus: () => {
+        innerInputRef.current?.focus?.()
+      },
+      isTextInput: true,
+    }
+  }, [!!innerInputRef?.current?.focus])
+
+  const isPressable = TypeGuards.isFunction(onPress)
+
+  const validation = useValidate(
+    value,
+    TypeGuards.isFunction(maskProps?.validator) ? maskProps?.validator : validate,
+  )
+
+  const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement, Element>) => {
+    validation?.onInputBlurred()
+    setIsFocused(false)
+    props?.onBlur?.(e)
+  }, [validation?.onInputBlurred, props?.onBlur])
+
+  const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement, Element>) => {
+    validation?.onInputFocused()
+    setIsFocused(true)
+    props?.onFocus?.(e)
+  }, [validation?.onInputFocused, props?.onFocus])
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const _text = event?.target?.value
+
+    const _value = isMasked && maskProps?.notSaveFormatted
+      ? maskProps?.getRawValue(_text)
+      : _text
+
+    if (props?.onChange) props?.onChange(event)
+    if (props?.onChangeText) props?.onChangeText(_value)
+  }
+
+  const isDisabled = !!inputBaseProps.disabled
+
+  const visibilityToggleProps = visibilityToggle ? {
+    onPress: toggleSecureTextEntry,
+    icon: (secureTextEntry ? 'input-visiblity:hidden' : 'input-visiblity:visible') as IconPlaceholder,
+    debugName: `${debugName} toggle visibility`,
+  } : null
+
+  const rightIcon = inputBaseProps?.rightIcon ?? visibilityToggleProps
+
+  const buttonModeProps = isPressable ? {
+    editable: false,
+    caretHidden: true,
+  } : {}
+  const rows = textInputProps?.rows ?? (
+    isMultiline ? 2 : undefined
+  )
+  const hasMultipleLines = isMultiline && (String(value)?.includes('\n') || !!rows)
+
+  const hasError = !validation.isValid || _error
+  const errorMessage = validation.message || _error
+
+  const placeholderStyles = [
+    variantStyles.placeholder,
+    isFocused && variantStyles['placeholder:focus'],
+    hasError && variantStyles['placeholder:error'],
+    isDisabled && variantStyles['placeholder:disabled'],
+  ]
+
+  const selectionStyles = [
+    variantStyles.selection,
+    isFocused && variantStyles['selection:focus'],
+    hasError && variantStyles['selection:error'],
+    isDisabled && variantStyles['selection:disabled'],
+  ]
+
+  const secureTextProps = (password && secureTextEntry) && {
+    type: 'password',
+  }
+
+  const caretColorStyle = (caretColor || buttonModeProps.caretHidden) && {
+    caretColor: buttonModeProps.caretHidden ? 'transparent' : caretColor,
+  }
+
+  const inputBaseAction = isPressable ? 'onPress' : 'onClick'
+
+  const _wrapperOnInputFocus = {
+    [inputBaseAction]: () => {
+      innerInputRef.current?.focus?.()
+    },
+  }
+
+  return (
+    <InputBase
+      innerWrapper={isPressable ? Touchable : undefined}
+      {...inputBaseProps}
+      debugName={debugName}
+      error={hasError ? errorMessage : null}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+          isMultiline && variantStyles['innerWrapper:multiline'],
+          hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
+        ],
+      }}
+      innerWrapperProps={{
+        ...(inputBaseProps.innerWrapperProps || {}),
+        [inputBaseAction]: () => {
+          // @ts-ignore
+          if (isMasked) innerInputRef.current?.onFocus?.()
+          innerInputRef.current?.focus?.()
+          if (isPressable) onPress?.()
+        },
+        debugName,
+      }}
+      rightIcon={rightIcon}
+      focused={isFocused}
+      wrapperProps={{
+        ...(inputBaseProps.wrapperProps || {}),
+        ..._wrapperOnInputFocus,
+      }}
+    >
+      <InputElement
+        editable={`${!isPressable && !isDisabled}`}
+        {...buttonModeProps}
+        {...secureTextProps}
+        {...textInputProps}
+        value={value}
+        onChange={(e) => handleChange(e)}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        css={[
+          variantStyles.input,
+          isMultiline && variantStyles['input:multiline'],
+          isFocused && variantStyles['input:focus'],
+          hasError && variantStyles['input:error'],
+          isDisabled && variantStyles['input:disabled'],
+          hasMultipleLines && variantStyles['input:hasMultipleLines'],
+          {
+            '&::placeholder': placeholderStyles,
+          },
+          {
+            '&::selection': selectionStyles,
+          },
+          {
+            '&:focus': [
+              { outline: 'none', borderWidth: 0, borderColor: 'transparent' },
+              isFocused && variantStyles['input:focus'],
+              caretColorStyle,
+            ],
+          },
+        ]}
+        {...maskProps}
+        ref={innerInputRef}
+      />
+    </InputBase>
+  )
+})

package/src/components/TextInput/mask.tsx

@@ -0,0 +1,165 @@
+import { FormTypes, TypeGuards } from '@codeleap/common'
+
+type beforeMaskedValueChangeArgs = {
+  state: {
+    value: string | undefined
+    selection: {
+      start: number
+      end: number
+      length?: number
+    }
+  }
+  userInput: null | string
+}
+
+type FormatChar = `[${string}]`
+
+export type MaskProps = {
+  obfuscated?: boolean
+  mask?: string
+  placeholder?: string
+  maskChar?: string
+  formatChars?: Record<string, FormatChar>
+  alwaysShowMask?: boolean
+  validator?: FormTypes.ValidatorFunctionWithoutForm
+  maskType?: 'BRL' | 'INTERNATIONAL'
+  getRawValue?: (value: any) => string
+}
+
+export type TextInputMaskTypeProp =
+  | 'credit-card'
+  | 'cpf'
+  | 'cnpj'
+  | 'zip-code'
+  | 'cel-phone'
+  | 'custom'
+
+export interface TextInputMaskingProps {
+  type: TextInputMaskTypeProp
+  options?: MaskProps
+  onChangeMask?: (
+    newState: beforeMaskedValueChangeArgs['state'],
+    oldState: beforeMaskedValueChangeArgs['state'],
+    userInput: beforeMaskedValueChangeArgs['userInput']
+  ) => beforeMaskedValueChangeArgs['state']
+  saveFormatted?: boolean
+}
+
+type InputMaskProps = {
+  masking: TextInputMaskingProps
+}
+
+export const getMaskInputProps = ({ masking }: InputMaskProps): MaskProps & { notSaveFormatted: boolean } => {
+  const {
+    type = 'custom',
+    options = {},
+  } = masking
+
+  const maskType = masking?.options?.maskType ?? 'INTERNATIONAL'
+  const phoneType = maskType === 'INTERNATIONAL' ? 'cel-phone' : 'cel-phone-brl'
+
+  const presetProps = masking?.type === 'cel-phone' ? maskPreset[phoneType] : maskPreset[type]
+
+  const isObfuscated = options?.obfuscated === true && {
+    type: 'password',
+  }
+
+  const notSaveFormatted = (TypeGuards.isBoolean(masking?.saveFormatted) && masking?.saveFormatted === false)
+
+  const props = {
+    ...presetProps,
+    ...options,
+    ...isObfuscated,
+    notSaveFormatted,
+    beforeMaskedValueChange: masking?.onChangeMask,
+  }
+
+  const defaultGetRawValue = (value: string) => {
+    return String(value)?.replace(/\D/g, '')
+  }
+
+  return {
+    ...props,
+    validator: notSaveFormatted ? null : props?.validator,
+    getRawValue: props?.getRawValue ?? defaultGetRawValue,
+  }
+}
+
+const format: Record<string, FormatChar> = {
+  number: "['0123456789']",
+}
+
+const validatorRegExp = (value: string | number, regex: RegExp, error: string) => {
+  const isValid = regex.test(String(value))
+
+  return {
+    valid: isValid,
+    message: error,
+  }
+}
+
+export const maskPreset: Record<TextInputMaskTypeProp | 'cel-phone-brl', MaskProps> = {
+  'credit-card': {
+    mask: '9999 9999 9999 9999',
+    placeholder: 'xxxx xxxx xxxx xxxx',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\d{4}\s?\d{4}\s?\d{4}\s?\d{4}$/, 'Invalid information')
+    },
+  },
+  'cpf': {
+    mask: '999.999.999-99',
+    placeholder: 'xxx.xxx.xxx-xx',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\d{3}\.\d{3}\.\d{3}-\d{2}$/, 'Invalid CPF')
+    },
+  },
+  'cnpj': {
+    mask: '99.999.999/9999-99',
+    placeholder: 'xx.xxx.xxx/xxxx-xx',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/, 'Invalid CNPJ')
+    },
+  },
+  'zip-code': {
+    mask: '99999-999',
+    placeholder: 'xxxxx-xxx',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\d{5}-\d{3}$/, 'Invalid zip code')
+    },
+  },
+  'cel-phone': {
+    mask: '+999 999 999 999',
+    placeholder: '+xxx xxx xxx xxx',
+    maskType: 'INTERNATIONAL',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\+\d{3}\s\d{3}\s\d{3}\s\d{3}$/, 'Invalid phone')
+    },
+  },
+  'cel-phone-brl': {
+    mask: '(99) 99999-9999',
+    placeholder: '(xx) xxxxx-xxxx',
+    maskType: 'BRL',
+    formatChars: {
+      '9': format.number,
+    },
+    validator: (value: string) => {
+      return validatorRegExp(value, /^\(?\d{2}\)?\s?9?\d{4}-\d{4}$/, 'Invalid phone')
+    },
+  },
+  'custom': {},
+}

package/src/components/TextInput/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconParts } from '../ActionIcon'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
+
+type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
+export type TextInputStates = InputBaseStates | 'multiline' | 'hasMultipleLines'
+
+export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
+
+export type TextInputComposition =  `${TextInputParts}:${TextInputStates}` | TextInputParts
+
+const createTextInputStyle =
+  createDefaultVariantFactory<TextInputComposition>()
+
+export const TextInputPresets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))