@codeleap/web 3.25.0 → 3.25.2

package/src/components/TextInput/mask.tsx

@@ -1,5 +1,53 @@
-import { TypeGuards } from '@codeleap/common'
-import { FormatChar, InputMaskProps, MaskProps, TextInputMaskTypeProp } from './types'
+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 {

package/src/components/TextInput/styles.ts

@@ -1,10 +1,15 @@
+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
+export type TextInputComposition =  `${TextInputParts}:${TextInputStates}` | TextInputParts
+
+const createTextInputStyle =
+  createDefaultVariantFactory<TextInputComposition>()
+
+export const TextInputPresets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))

package/src/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Provider as TooltipContainer,
   Root as TooltipWrapper,
@@ -6,30 +6,72 @@ import {
   Portal as TooltipPortal,
   Content as TooltipContent,
   Arrow as TooltipArrow,
+  TooltipProps as PrimitiveTooltipProps,
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipArrowProps,
+  TooltipTriggerProps,
+  TooltipProviderProps,
 } from '@radix-ui/react-tooltip'
-import { TypeGuards, useConditionalState } from '@codeleap/common'
-import { View } from '../View'
+
+import { AnyFunction, ComponentVariants, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { TooltipComposition, TooltipPresets } from './styles'
+import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types/utility'
+import { View, ViewProps } from '../View'
 import { useClickOutsideElement } from '../../lib'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { TooltipProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
 
-export * from './styles'
-export * from './types'
+type TooltipComponentProps = {
+  contentProps?: TooltipContentProps
+  portalProps?: TooltipPortalProps
+  arrowProps?: TooltipArrowProps
+  triggerProps?: TooltipTriggerProps
+  providerProps?: TooltipProviderProps
+}
 
-export const Tooltip = (props: TooltipProps) => {
+export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
+  toggle?: AnyFunction
+  visible?: boolean
+  content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
+  triggerWrapper?: React.ElementType
+  triggerWrapperProps?: Partial<ViewProps<'div'>>
+  styles?: StylesOf<TooltipComposition>
+  side?: 'left' | 'right' | 'bottom' | 'top'
+  openOnPress?: boolean
+  openOnHover?: boolean
+  disabled?: boolean
+  delayDuration?: number
+  closeOnClickOutside?: boolean
+  onOpen?: AnyFunction
+  onClose?: AnyFunction
+  onValueChange?: (value: boolean) => void
+  onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void
+  onPress?: (value: boolean) => void
+  children?: React.ReactNode
+  style?: React.CSSProperties
+} & ComponentVariants<typeof TooltipPresets> & ComponentCommonProps
+
+const defaultProps: Partial<TooltipProps> = {
+  openOnPress: true,
+  openOnHover: true,
+  disabled: false,
+  delayDuration: 0,
+  closeOnClickOutside: false,
+  side: 'bottom',
+  triggerWrapper: View as unknown as React.ElementType,
+}
+
+export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipProps) => {
   const allProps = {
     ...Tooltip.defaultProps,
     ...props,
   }
 
   const {
-    toggle: _toggle,
-    visible: _visible,
+    toggle: _toggle = null,
+    visible: _visible = null,
     children,
     content: Content,
-    triggerWrapperProps,
+    triggerWrapperProps = {},
     triggerWrapper: TriggerWrapper,
     side,
     disabled,
@@ -41,23 +83,32 @@ export const Tooltip = (props: TooltipProps) => {
     onValueChange,
     onHover,
     onPress,
-    contentProps,
-    portalProps,
-    arrowProps,
-    triggerProps,
-    providerProps,
+    contentProps = {},
+    portalProps = {},
+    arrowProps = {},
+    triggerProps = {},
+    providerProps = {},
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
     closeOnClickOutside,
     style,
     ...rest
   } = allProps
 
-  const styles = useStylesFor(Tooltip.styleRegistryName, style)
+  const variantsStyles = useDefaultComponentStyle<'u:Tooltip', typeof TooltipPresets>('u:Tooltip', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+
+  const hasStateProps = !TypeGuards.isNil(_visible) && TypeGuards.isFunction(_toggle)
 
-  const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false })
+  const [visible, toggle] = hasStateProps ? [_visible, _toggle] : useState(false)
 
   const tooltipDirectionStyle = React.useMemo(() => {
-    return side ? styles[`content:${side}`] : styles.content
-  }, [side, styles])
+    return side ? variantsStyles[`content:${side}`] : variantsStyles.content
+  }, [side, variantsStyles])
 
   function handleToggle(_value: boolean, isToggle = true) {
     if (disabled) return
@@ -112,7 +163,8 @@ export const Tooltip = (props: TooltipProps) => {
         open={visible}
         onOpenChange={onOpenChange}
         {...rest}
-        // @ts-ignore
+        // @ts-ignore expected error
+        css={[variantsStyles.wrapper, style]}
       >
         <TooltipTrigger
           onClick={_onPress}
@@ -121,35 +173,29 @@ export const Tooltip = (props: TooltipProps) => {
           asChild
           ref={triggerRef}
           {...triggerProps}
-          //@ts-expect-error
-          css={styles.triggerWrapper}
+          style={variantsStyles.triggerWrapper}
         >
-          <TriggerWrapper
-            {...allProps as any}
+          <TriggerWrapper 
+            {...allProps as any} 
             {...triggerWrapperProps}
-            css={styles.triggerInnerWrapper}
+            style={variantsStyles.triggerInnerWrapper}
           >
             {children}
           </TriggerWrapper>
         </TooltipTrigger>
         <TooltipPortal {...portalProps}>
-          {/* @ts-expect-error icss type */}
-          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, styles.content]} sideOffset={2} side={side} {...contentProps}>
+          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.content]} sideOffset={2} side={side} {...contentProps}>
             {
               TypeGuards.isFunction(Content)
                 ? <Content
                   {...allProps}
                   visible={visible}
                   toggle={toggle}
-                  variantsStyles={styles}
+                  variantsStyles={variantsStyles}
                 />
                 : Content
             }
-            <TooltipArrow
-              {...arrowProps}
-              //@ts-expect-error icss type
-              css={styles.arrow}
-            />
+            <TooltipArrow {...arrowProps} style={variantsStyles.arrow} />
           </TooltipContent>
         </TooltipPortal>
       </TooltipWrapper>
@@ -158,29 +204,6 @@ export const Tooltip = (props: TooltipProps) => {
   )
 }
 
-Tooltip.styleRegistryName = 'Tooltip'
+Tooltip.defaultProps = defaultProps
 
-Tooltip.elements = [
-  'content',
-  'arrow',
-  'triggerWrapper',
-  'triggerInnerWrapper',
-]
-
-Tooltip.rootElement = 'content'
-
-Tooltip.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Tooltip as (props: StyledComponentProps<TooltipProps, typeof styles>) => IJSX
-}
-
-Tooltip.defaultProps = {
-  openOnPress: true,
-  openOnHover: true,
-  disabled: false,
-  delayDuration: 0,
-  closeOnClickOutside: false,
-  side: 'bottom',
-  triggerWrapper: View as unknown as React.ElementType,
-} as Partial<TooltipProps>
-
-WebStyleRegistry.registerComponent(Tooltip)
+export * from './styles'

package/src/components/Tooltip/styles.ts

@@ -1,11 +1,18 @@
-export type TooltipSide = 'left' | 'right' | 'bottom' | 'top'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
+export type TooltipSide = 'left' | 'right' | 'bottom' | 'top'
 export type TooltipState = 'delayed-open' | 'closed' | 'instant-open' | 'disabled'
-
-export type TooltipParts =
+export type TooltipParts = 
+  'wrapper' | 
   'arrow' |
   'content' |
   'triggerWrapper' |
   'triggerInnerWrapper'
 
 export type TooltipComposition = `content:${TooltipSide}` | TooltipParts
+
+const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
+
+export const TooltipPresets = includePresets((styles) => createTooltipStyle(() => ({
+  wrapper: styles,
+})))

package/src/components/Touchable/index.tsx

@@ -1,45 +1,77 @@
-import { onMount, TypeGuards, useGlobalContext } from '@codeleap/common'
-import React, { ComponentType, ElementType, forwardRef, HTMLAttributes } from 'react'
+import { AnyFunction, ComponentVariants, onMount, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react'
 import { stopPropagation } from '../../lib'
+import { View } from '../View'
+import { TouchableComposition, TouchablePresets } from './styles'
+import { CSSInterpolation } from '@emotion/css'
+import { StylesOf, NativeHTMLElement } from '../../types'
 import { getTestId } from '../../lib/utils/test'
-import { TouchableProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-
 export * from './styles'
-export * from './types'
 
-export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchableProps: TouchableProps, ref) => {
-  const allProps = {
-    ...Touchable.defaultProps,
-    ...touchableProps,
+export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {
+  css?: CSSInterpolation | CSSInterpolation[]
+  component?: T
+  disabled?: boolean
+  propagate?: boolean
+  style?: React.CSSProperties
+  onPress?: AnyFunction
+  debugName: string
+  debugComponent?: string
+  styles?: StylesOf<TouchableComposition>
+  debounce?: number
+  leadingDebounce?: boolean
+  setPressed?: (pressed: boolean) => void
+  analyticsEnabled?: boolean
+  analyticsName?: string
+  analyticsData?: Record<string, any>
+} & ComponentVariants<typeof TouchablePresets>
+
+const defaultProps: Partial<TouchableProps<'button'>> = {
+  propagate: true,
+  debounce: null,
+  component: View as unknown as 'button',
+  style: {},
+  styles: {},
+  responsiveVariants: {},
+  variants: [],
+  css: [],
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+  tabIndex: 0,
+}
+export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
+  touchableProps: TouchableProps<T>,
+  ref,
+) => {
+  const mergedProps = {
+    ...(defaultProps),
+    ...(touchableProps),
   }
-
   const {
     propagate,
     debounce,
     leadingDebounce,
     setPressed,
-    component,
+    component: Component,
     disabled,
     onPress,
     onClick,
     debugName,
     debugComponent,
     style,
+    styles,
+    responsiveVariants,
+    variants,
+    css,
     analyticsEnabled,
     analyticsName,
     analyticsData,
     ...props
-  } = allProps
-
-  const styles = useStylesFor(Touchable.styleRegistryName, style)
+  } = mergedProps
 
   const pressed = React.useRef(!!leadingDebounce)
 
-  const { logger } = useGlobalContext()
-
   onMount(() => {
     if (!!leadingDebounce && !!debounce) {
       setTimeout(() => {
@@ -48,7 +80,14 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
     }
   })
 
-  const Component = component as unknown as ComponentType<HTMLAttributes<HTMLButtonElement>>
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const { logger } = useCodeleapContext()
 
   const notPressable = !TypeGuards.isFunction(onPress) && !TypeGuards.isFunction(onClick)
 
@@ -57,7 +96,14 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
 
     if (!propagate) stopPropagation(event)
 
-    if (notPressable) return
+    if (notPressable) {
+      logger.warn(
+        'No onPress passed to touchable',
+        touchableProps,
+        'User interaction',
+      )
+      return
+    }
 
     const _onPress = () => {
       if (event && (event?.type !== 'click' && event?.keyCode !== 13 && event?.key !== 'Enter')) return null
@@ -94,37 +140,34 @@ export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchabl
     }
   }
 
-  const testId = getTestId(allProps)
+  const _styles = React.useMemo(() => ([
+    variantStyles.wrapper,
+    disabled && variantStyles['wrapper:disabled'],
+    css,
+    style,
+  ]), [variantStyles, disabled, style])
+
+  const testId = getTestId(mergedProps)
 
   return (
-    <Component
+    // @ts-ignore
+    <View
+      component={Component || 'button'}
       {...props}
+      debugName={debugName}
       onClick={handleClick}
       onKeyDown={handleClick}
       ref={ref}
-      // @ts-expect-error icss type
-      css={[styles.wrapper, disabled && styles['wrapper:disabled']]}
+      css={_styles}
       data-testid={testId}
     />
   )
-}) as StyledComponentWithProps<TouchableProps>
-
-Touchable.styleRegistryName = 'Touchable'
-Touchable.elements = ['wrapper']
-Touchable.rootElement = 'wrapper'
-
-Touchable.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Touchable as <T extends ElementType = 'button'>(props: StyledComponentProps<TouchableProps<T>, typeof styles>) => IJSX
 }
 
-Touchable.defaultProps = {
-  propagate: true,
-  debounce: null,
-  component: 'div',
-  analyticsEnabled: false,
-  analyticsName: null,
-  analyticsData: {},
-  tabIndex: 0,
-} as Partial<TouchableProps>
+export const Touchable = forwardRef(TouchableCP) as (<T extends NativeHTMLElement = 'button'>(
+  touchableProps: TouchableProps<T>
+) => JSX.Element) & {
+  defaultProps: Partial<TouchableProps<'button'>>
+}
 
-WebStyleRegistry.registerComponent(Touchable)
+Touchable.defaultProps = defaultProps

package/src/components/Touchable/styles.ts

@@ -1,3 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
 export type TouchableState = 'disabled'
 export type TouchableParts = 'wrapper'
 export type TouchableComposition = TouchableParts | `${TouchableParts}:${TouchableState}`
+
+const createTouchableStyle = createDefaultVariantFactory<TouchableComposition>()
+
+export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles })))

package/src/components/View/index.tsx

@@ -1,19 +1,25 @@
-import { useMemo, TypeGuards } from '@codeleap/common'
-import React, { ElementType, forwardRef } from 'react'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
+import { useDefaultComponentStyle, useCodeleapContext, useMemo, TypeGuards } from '@codeleap/common'
+import React, { forwardRef, Ref } from 'react'
+import { ViewPresets } from './styles'
 import { useMediaQuery } from '../../lib/hooks'
+import { NativeHTMLElement } from '../../types'
 import { motion } from 'framer-motion'
 import { ViewProps } from './types'
 import { getTestId } from '../../lib/utils/test'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps, useTheme } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
+export const ViewCP = (
+  viewProps: ViewProps<'div'>,
+  ref: React.Ref<any>,
+) => {
   const {
-    component,
+    responsiveVariants = {},
+    variants = [],
+    component = 'div',
     children,
     is,
     not,
@@ -21,28 +27,32 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
     onHover,
     debugName,
     down,
+    scroll = false,
+    debug = false,
     style,
-    animated,
-    animatedProps,
+    animated = false,
+    animatedProps = {},
+    css = [],
     ...props
-  } = {
-    ...View.defaultProps,
-    ...viewProps,
-  }
+  } = viewProps
 
-  const styles = useStylesFor(View.styleRegistryName, style)
+  const Component = animated ? (motion?.[component] || motion.div) : (component || 'div')
 
-  const Component: ElementType = animated ? (motion?.[component as string] || motion.div) : (component || 'div')
+  const variantStyles = useDefaultComponentStyle<'u:View', typeof ViewPresets>('u:View', {
+    responsiveVariants,
+    variants,
+    styles: { wrapper: style },
+    rootElement: 'wrapper',
+  })
 
-  const theme = useTheme(store => store.current)
+  const { Theme, logger } = useCodeleapContext()
 
   function handleHover(isMouseOverElement: boolean) {
     onHover?.(isMouseOverElement)
   }
 
   const platformMediaQuery = useMemo(() => {
-    // @ts-expect-error theme type
-    return theme?.media?.renderToPlatformQuery({
+    return Theme.media.renderToPlatformQuery({
       is,
       not,
       up,
@@ -52,38 +62,42 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
 
   const matches = useMediaQuery(platformMediaQuery)
 
-  const hoverProps = TypeGuards.isFunction(onHover) && {
+  const componentStyles = useMemo(() => {
+    return [
+      variantStyles.wrapper,
+      scroll && { overflowY: 'scroll' },
+      matches && { display: 'none' },
+      style,
+      css,
+    ]
+  }, [variantStyles, scroll, matches, css])
+
+  const onHoverProps = TypeGuards.isFunction(onHover) && {
     onMouseEnter: () => handleHover(true),
     onMouseLeave: () => handleHover(false),
   }
 
+  if (debug) {
+    logger.log(debugName, { componentStyles, platformMediaQuery, matches })
+  }
+
   const testId = getTestId(viewProps)
 
   return (
     <Component
-      {...hoverProps}
+      css={componentStyles}
+      // @ts-expect-error
+      ref={ref}
+      {...onHoverProps}
       {...props}
       {...animatedProps}
-      ref={ref}
       data-testid={testId}
-      css={[styles.wrapper, matches && { display: 'none' }]}
     >
       {children}
     </Component>
   )
-}) as StyledComponentWithProps<ViewProps>
-
-View.styleRegistryName = 'View'
-View.elements = ['wrapper']
-View.rootElement = 'wrapper'
-
-View.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return View as <T extends ElementType = 'div'>(props: StyledComponentProps<ViewProps<T>, typeof styles>) => IJSX
 }
 
-View.defaultProps = {
-  component: 'div',
-  animated: false,
-} as Partial<ViewProps>
-
-WebStyleRegistry.registerComponent(View)
+export const View = forwardRef(ViewCP) as unknown as <T extends NativeHTMLElement = 'div'>(
+  props: ViewProps<T>
+) => JSX.Element

package/src/components/View/styles.ts

@@ -1 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
 export type ViewComposition = 'wrapper'
+
+const createViewStyle = createDefaultVariantFactory<ViewComposition>()
+
+export const ViewPresets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })))