@codeleap/web 3.24.2 → 3.25.0

package/src/components/TextEditor/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
-import { onUpdate, useCallback, useDefaultComponentStyle, useState, useValidate } from '@codeleap/common'
+import { onUpdate, useCallback, useState, useValidate } from '@codeleap/common'
 import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
 import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
-import { TextEditorPresets } from './styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+
 export * from './styles'
 export * from './types'
 
@@ -11,17 +14,19 @@ export const TextEditor = (props: TextEditorProps) => {
   const {
     children,
     editor,
-    variants = [],
-    styles = {},
-    responsiveVariants = {},
-    style = {},
+    style,
     bubbleMenuProps,
     floatingMenuProps,
     toolbarComponent,
     fileInputRef,
     _error,
     validate,
-  } = props
+  } = {
+    ...TextEditor.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(TextEditor.styleRegistryName, style)
 
   const [_isFocused, setIsFocused] = useState(false)
   const validation = useValidate(editor?.getText() ?? '', validate)
@@ -30,12 +35,6 @@ export const TextEditor = (props: TextEditorProps) => {
   const errorMessage = validation.message || _error
   const isDisabled = !editor?.isEditable ?? null
 
-  const variantStyles = useDefaultComponentStyle<'u:TextEditor', typeof TextEditorPresets>('u:TextEditor', {
-    variants,
-    styles,
-    responsiveVariants,
-  })
-
   const handleBlur = React.useCallback(() => {
     validation?.onInputBlurred()
     setIsFocused(false)
@@ -58,8 +57,9 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const _BubbleMenu = useCallback(() => {
     return (
-      <BubbleMenu css={[variantStyles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
-        <View style={variantStyles.bubbleMenuInnerWrapper}>
+      // @ts-expect-error icss type
+      <BubbleMenu css={[styles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
+        <View style={styles.bubbleMenuInnerWrapper}>
           {bubbleMenuProps?.renderContent}
         </View>
       </BubbleMenu>
@@ -68,8 +68,9 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const _FloatingMenu = useCallback(() => {
     return (
-      <FloatingMenu css={[variantStyles.floatingMenu]} {...floatingMenuProps} editor={editor}>
-        <View style={variantStyles.floatingMenuInnerWrapper}>
+      // @ts-expect-error icss type
+      <FloatingMenu css={[styles.floatingMenu]} {...floatingMenuProps} editor={editor}>
+        <View style={styles.floatingMenuInnerWrapper}>
           {floatingMenuProps?.renderContent}
         </View>
       </FloatingMenu>
@@ -77,21 +78,21 @@ export const TextEditor = (props: TextEditorProps) => {
   }, [editor])
 
   const editorStyles = [
-    variantStyles.editor,
-    hasError && variantStyles['editor:error'],
-    isDisabled && variantStyles['editor:disabled'],
+    styles.editor,
+    hasError && styles['editor:error'],
+    isDisabled && styles['editor:disabled'],
   ]
 
   if (!editor) return null
+
   return (
     <View
-      css={[
-        variantStyles.wrapper,
-        hasError && variantStyles['wrapper:error'],
+      style={[
+        styles.wrapper,
+        hasError && styles['wrapper:error'],
         {
           '.tiptap': editorStyles,
         },
-        style,
       ]}
     >
       {toolbarComponent}
@@ -99,10 +100,30 @@ export const TextEditor = (props: TextEditorProps) => {
       <_BubbleMenu />
       <_FloatingMenu />
       <EditorContent editor={editor} />
-      {hasError ? <Text text={errorMessage as string} css={variantStyles['errorMessage:error']} /> : null}
-      <FileInput
-        ref={fileInputRef}
-      />
+      {hasError ? <Text text={errorMessage as string} style={styles['errorMessage:error']} /> : null}
+      <FileInput ref={fileInputRef} />
     </View>
   )
 }
+
+TextEditor.styleRegistryName = 'TextEditor'
+
+TextEditor.elements = [
+  'wrapper',
+  'editor',
+  'floatingMenu',
+  'bubbleMenu',
+  'bubbleMenuInnerWrapper',
+  'floatingMenuInnerWrapper',
+  'errorMessage',
+]
+
+TextEditor.rootElement = 'wrapper'
+
+TextEditor.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return TextEditor as (props: StyledComponentProps<TextEditorProps, typeof styles>) => IJSX
+}
+
+TextEditor.defaultProps = {} as Partial<TextEditorProps>
+
+WebStyleRegistry.registerComponent(TextEditor)

package/src/components/TextEditor/styles.ts

@@ -1,12 +1,5 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
 export type TextEditorStates = 'error' | 'disabled'
+
 export type TextEditorParts = 'wrapper' | 'editor' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper' | 'errorMessage'
 
 export type TextEditorComposition = `${TextEditorParts}:${TextEditorStates}` | TextEditorParts
-
-const createTextEditorStyle = createDefaultVariantFactory<TextEditorComposition>()
-
-export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({
-  wrapper: styles,
-})))

package/src/components/TextEditor/types.ts

@@ -1,17 +1,22 @@
 import { RefObject } from 'react'
-import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
+import { AnyFunction, FormTypes, yup } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
 import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
-import { TextEditorComposition, TextEditorPresets } from './styles'
+import { TextEditorComposition } from './styles'
 
 export type TextEditorProps = React.PropsWithChildren<{
-  editor: Editor
-  styles?: StylesOf<TextEditorComposition>
-  style?: React.CSSProperties
+  editor: Editor & {
+    getText: AnyFunction
+    isEditable: boolean
+    on: AnyFunction
+    off: AnyFunction
+  }
+  style?: StyledProp<TextEditorComposition>
   bubbleMenuProps?: BubbleMenuProps & { renderContent: React.ReactNode }
   floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
   toolbarComponent?: JSX.Element
   fileInputRef?: RefObject<FileInputRef>
   _error?: boolean
   validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-} & ComponentVariants<typeof TextEditorPresets>>
+}>

package/src/components/TextInput/index.tsx

@@ -1,17 +1,4 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-  TextInputComposition,
-  TypeGuards,
-  useBooleanToggle,
-  useDefaultComponentStyle,
-  useValidate,
-  yup,
-} from '@codeleap/common'
+import { TypeGuards, useBooleanToggle, useValidate } from '@codeleap/common'
 import React, {
   forwardRef,
   useImperativeHandle,
@@ -20,53 +7,21 @@ import React, {
 } from 'react'
 import TextareaAutosize from 'react-autosize-textarea'
 import InputMask from 'react-input-mask'
-import { Touchable, TouchableProps } from '../Touchable'
-import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/utility'
-import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
-import { TextInputPresets } from './styles'
-import { getMaskInputProps, TextInputMaskingProps } from './mask'
+import { Touchable } from '../Touchable'
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import { getMaskInputProps } from './mask'
 import { getTestId } from '../../lib/utils/test'
+import { InputRef, TextInputProps } from './types'
+import { FileInputRef } from '../FileInput'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 
+export * from './types'
 export * from './styles'
 export * from './mask'
 
-type NativeTextInputProps = HTMLProps<'input'>
-
-export type TextInputProps =
-  Omit<InputBaseProps, 'styles' | 'variants'> &
-  Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref'> & {
-    styles?: StylesOf<TextInputComposition>
-    password?: boolean
-    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-    debugName?: string
-    visibilityToggle?: boolean
-    value?: NativeTextInputProps['value']
-    multiline?: boolean
-    onPress?: TouchableProps['onPress']
-    onChangeText?: (textValue: string) => void
-    caretColor?: string
-    focused?: boolean
-    _error?: boolean
-    rows?: number
-    masking?: TextInputMaskingProps
-    visibleIcon?: IconPlaceholder
-    hiddenIcon?: IconPlaceholder
-  } & ComponentVariants<typeof TextInputPresets>
-
-type InputRef = {
-  isTextInput?: boolean
-  focus: () => void
-  getInputRef: () => HTMLInputElement
-}
-
-const defaultProps: Partial<TextInputProps> = {
-  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
-  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
-}
-
-export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
-  const innerInputRef = useRef<InputRef>(null)
-
+export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputRef) => {
   const {
     inputBaseProps,
     others,
@@ -76,9 +31,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
   })
 
   const {
-    variants = [],
-    responsiveVariants = {},
-    styles = {},
+    style,
     value,
     validate,
     debugName,
@@ -89,12 +42,16 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
     caretColor,
     focused,
     _error,
-    masking = null,
+    masking,
     visibleIcon,
     hiddenIcon,
     ...textInputProps
   } = others as TextInputProps
 
+  const innerInputRef = useRef<InputRef>(null)
+
+  const styles = useStylesFor(TextInput.styleRegistryName, style)
+
   const [_isFocused, setIsFocused] = useState(false)
 
   const isFocused = _isFocused || focused
@@ -108,12 +65,6 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
 
   const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
 
-  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
-
   // @ts-ignore
   useImperativeHandle(inputRef, () => {
     return {
@@ -122,7 +73,6 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
           // @ts-expect-error
           innerInputRef.current?.getInputDOMNode()?.focus()
         }
-        
         innerInputRef.current?.focus?.()
       },
       isTextInput: true,
@@ -166,7 +116,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
     debugName: `${debugName} toggle visibility`,
   } : null
 
@@ -185,17 +135,17 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
   const errorMessage = validation.message || _error
 
   const placeholderStyles = [
-    variantStyles.placeholder,
-    isFocused && variantStyles['placeholder:focus'],
-    hasError && variantStyles['placeholder:error'],
-    isDisabled && variantStyles['placeholder:disabled'],
+    styles.placeholder,
+    isFocused && styles['placeholder:focus'],
+    hasError && styles['placeholder:error'],
+    isDisabled && styles['placeholder:disabled'],
   ]
 
   const selectionStyles = [
-    variantStyles.selection,
-    isFocused && variantStyles['selection:focus'],
-    hasError && variantStyles['selection:error'],
-    isDisabled && variantStyles['selection:disabled'],
+    styles.selection,
+    isFocused && styles['selection:focus'],
+    hasError && styles['selection:error'],
+    isDisabled && styles['selection:disabled'],
   ]
 
   const secureTextProps = (password && secureTextEntry) && {
@@ -208,7 +158,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
 
   const inputBaseAction = isPressable ? 'onPress' : 'onClick'
 
-  const testId = getTestId(others)
+  const testId = getTestId(textInputProps)
 
   return (
     <InputBase
@@ -216,13 +166,13 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
       {...inputBaseProps}
       debugName={debugName}
       error={hasError ? errorMessage : null}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-          isMultiline && variantStyles['innerWrapper:multiline'],
-          hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
-        ],
+      style={{
+        ...styles,
+        innerWrapper: {
+          ...styles.innerWrapper,
+          ...(isMultiline ? styles['innerWrapper:multiline'] : {}),
+          ...(hasMultipleLines ? styles['innerWrapper:hasMultipleLines'] : {}),
+        },
       }}
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
@@ -236,10 +186,9 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
         },
         debugName,
       }}
-      rightIcon={rightIcon}
+      rightIcon={rightIcon as any}
       focused={isFocused}
     >
-
       <InputElement
         editable={`${!isPressable && !isDisabled}`}
         {...buttonModeProps}
@@ -252,12 +201,12 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
         // @ts-ignore
         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'],
+          styles.input,
+          isMultiline && styles['input:multiline'],
+          isFocused && styles['input:focus'],
+          hasError && styles['input:error'],
+          isDisabled && styles['input:disabled'],
+          hasMultipleLines && styles['input:hasMultipleLines'],
           {
             '&::placeholder': placeholderStyles,
           },
@@ -267,7 +216,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
           {
             '&:focus': [
               { outline: 'none', borderWidth: 0, borderColor: 'transparent' },
-              isFocused && variantStyles['input:focus'],
+              isFocused && styles['input:focus'],
               caretColorStyle,
             ],
           },
@@ -278,8 +227,21 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
       />
     </InputBase>
   )
-})
 
-export const TextInput = TextInputComponent as unknown as ComponentWithDefaultProps<TextInputProps>
+}) as StyledComponentWithProps<TextInputProps>
+
+TextInput.styleRegistryName = 'TextInput'
+TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
+TextInput.rootElement = 'wrapper'
+
+TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return TextInput as (props: StyledComponentProps<TextInputProps, typeof styles>) => IJSX
+}
+
+TextInput.defaultProps = {
+  hiddenIcon: 'input-visiblity:hidden' as AppIcon,
+  visibleIcon: 'input-visiblity:visible' as AppIcon,
+  masking: null,
+} as TextInputProps
 
-TextInput.defaultProps = defaultProps as TextInputProps
+WebStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/mask.tsx

@@ -1,53 +1,5 @@
-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
-}
+import { TypeGuards } from '@codeleap/common'
+import { FormatChar, InputMaskProps, MaskProps, TextInputMaskTypeProp } from './types'
 
 export const getMaskInputProps = ({ masking }: InputMaskProps): MaskProps & { notSaveFormatted: boolean } => {
   const {

package/src/components/TextInput/styles.ts

@@ -1,15 +1,10 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActionIconParts } from '../ActionIcon'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
-type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
+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 })))
+export type TextInputComposition = `${TextInputParts}:${TextInputStates}` | TextInputParts

package/src/components/TextInput/types.ts

@@ -0,0 +1,85 @@
+import { FormTypes, yup } from '@codeleap/common'
+import { TouchableProps } from '../Touchable'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { InputBaseProps } from '../InputBase'
+import { HTMLProps } from '../../types'
+import { TextInputComposition } from './styles'
+
+type NativeTextInputProps = HTMLProps<'input'>
+
+export type TextInputProps =
+  Omit<InputBaseProps, 'style'> &
+  Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref' | 'style'> &
+  {
+    style?: StyledProp<TextInputComposition>
+    password?: boolean
+    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+    debugName?: string
+    visibilityToggle?: boolean
+    value?: NativeTextInputProps['value']
+    multiline?: boolean
+    onPress?: TouchableProps['onPress']
+    onChangeText?: (textValue: string) => void
+    caretColor?: string
+    focused?: boolean
+    _error?: boolean
+    rows?: number
+    masking?: TextInputMaskingProps
+    visibleIcon?: AppIcon
+    hiddenIcon?: AppIcon
+  }
+
+export type InputRef = {
+  isTextInput?: boolean
+  focus: () => void
+  getInputRef: () => HTMLInputElement
+}
+
+type beforeMaskedValueChangeArgs = {
+  state: {
+    value: string | undefined
+    selection: {
+      start: number
+      end: number
+      length?: number
+    }
+  }
+  userInput: null | string
+}
+
+export 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
+}
+
+export type InputMaskProps = {
+  masking: TextInputMaskingProps
+}