@codeleap/web 3.18.7 → 3.18.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.18.7",
+  "version": "3.18.9",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/Slider/index.tsx

@@ -27,14 +27,14 @@ export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueC
     separator?: string
     transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
   }
-  value: number[]
-  onValueChange: (val: number[]) => void
+  value: number | number[]
+  onValueChange: (val: number | number[]) => void
   styles?: StylesOf<SliderComposition>
   style?: PropsOf<typeof View>['style']
   trackMarks?: Record<number, string>
   trackMarkComponent?: React.ComponentType<TrackMarkProps>
   onPressThumbSetValue?: boolean
-  onPressThumb?: (value: number, thumbIndex: number) => void
+  onPressThumb?: (value: number | number[], thumbIndex: number) => void
 } & ComponentVariants<typeof SliderPresets>
 
 export type TrackMarkProps = {
@@ -67,7 +67,7 @@ export const Slider = (props: SliderProps) => {
   const {
     debounce = null,
     onValueChange,
-    value,
+    value: _value,
     label,
     debugName,
     styles = {},
@@ -77,7 +77,7 @@ export const Slider = (props: SliderProps) => {
     variants,
     trackMarks,
     trackMarkComponent = DefaultSliderTrackMark,
-    defaultValue: _defaultValue = [],
+    defaultValue: defaultSliderValue = [],
     max = 100,
     min = 0,
     indicatorLabel = null,
@@ -89,6 +89,10 @@ export const Slider = (props: SliderProps) => {
     ...sliderProps
   } = others
 
+  const isUniqueValue = !TypeGuards.isArray(_value)
+  const value = isUniqueValue ? [_value] : _value
+  const _defaultValue = TypeGuards.isArray(defaultSliderValue) ? defaultSliderValue : [defaultSliderValue]
+
   const defaultValueRef = useRef<PrimitiveSliderProps['defaultValue']>(_defaultValue)
   const defaultValue = defaultValueRef.current
 
@@ -102,9 +106,9 @@ export const Slider = (props: SliderProps) => {
 
   const currentThumbRef = useRef(null)
 
-  const handleChange: SliderProps['onValueChange'] = (newValue) => {
-    if (newValue.length <= 1) {
-      onValueChange(newValue)
+  const handleChange: SliderProps['onValueChange'] = (newValue: Array<number>) => {
+    if (isUniqueValue) {
+      onValueChange(newValue?.[0])
       return
     }
 
@@ -244,15 +248,15 @@ export const Slider = (props: SliderProps) => {
           <SliderRange style={selectedTrackStyle} />
         </SliderTrack>
 
-        {defaultValue.map((_thumbValue, i) => (
+        {defaultValue.map((_, i) => (
           <SliderThumb
             key={i}
-            // @ts-ignore
             index={i}
             style={thumbStyle}
             onClick={() => {
-              if (onPressThumbSetValue) onValueChange?.([Number(_thumbValue)])
-              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(_thumbValue, i)
+              if (onPressThumbSetValue) onValueChange?.(value)
+              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
+
               currentThumbRef.current = i
             }}
             onMouseEnter={() => currentThumbRef.current = i}

package/src/components/Text/index.tsx

@@ -1,4 +1,5 @@
 import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { motion } from 'framer-motion'
 import React, { ElementType } from 'react'
 import { TextPresets } from './styles'
 import { TextProps } from './types'
@@ -11,6 +12,8 @@ const defaultProps: Partial<TextProps<'p'>> = {
   component: 'p',
   debounce: null,
   pressDisabled: false,
+  animated: false,
+  animatedProps: {},
 }
 
 export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
@@ -27,16 +30,20 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     css,
     text = null,
     children,
-    component: Component,
+    component,
     debugName,
     msg = null,
     onPress,
     debounce,
     pressDisabled,
     onClick,
+    animated,
+    animatedProps,
     ...props
   } = allProps
 
+  const Component = animated ? (motion?.[component] || motion.p) : (component || 'p')
+
   const pressedRef = React.useRef(false)
 
   const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
@@ -89,6 +96,7 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
       css={_styles}
       {...props}
       {...pressProps}
+      {...animatedProps}
     >
       {text || children}
     </Component>

package/src/components/Text/types.ts

@@ -1,16 +1,18 @@
 import { StylesOf, ComponentVariants } from '@codeleap/common'
+import { MotionProps } from 'framer-motion'
 import { ComponentPropsWithoutRef, ElementType } from 'react'
 import { TextComposition, TextPresets } from './styles'
 
-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
-}
+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
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+  }

package/src/components/TextInput/index.tsx

@@ -25,6 +25,7 @@ import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/util
 import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { TextInputPresets } from './styles'
 import { getMaskInputProps, TextInputMaskingProps } from './mask'
+import { getTestId } from '../../lib'
 
 export * from './styles'
 export * from './mask'
@@ -201,6 +202,8 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
 
   const inputBaseAction = isPressable ? 'onPress' : 'onClick'
 
+  const testId = getTestId(others)
+
   return (
     <InputBase
       innerWrapper={isPressable ? Touchable : undefined}
@@ -262,6 +265,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
         ]}
         {...maskProps}
         ref={innerInputRef}
+        data-testid={testId}
       />
     </InputBase>
   )

package/src/components/Tooltip/index.tsx

@@ -47,6 +47,7 @@ export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
   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> = {
@@ -91,6 +92,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
     responsiveVariants = {},
     styles = {},
     closeOnClickOutside,
+    style,
     ...rest
   } = allProps
 
@@ -105,7 +107,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
   const [visible, toggle] = hasStateProps ? [_visible, _toggle] : useState(false)
 
   const tooltipDirectionStyle = React.useMemo(() => {
-    return side ? variantsStyles[`wrapper:${side}`] : variantsStyles.wrapper
+    return side ? variantsStyles[`content:${side}`] : variantsStyles.content
   }, [side, variantsStyles])
 
   function handleToggle(_value: boolean, isToggle = true) {
@@ -161,6 +163,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
         open={visible}
         onOpenChange={onOpenChange}
         {...rest}
+        css={[variantsStyles.wrapper, style]}
       >
         <TooltipTrigger
           onClick={_onPress}
@@ -169,13 +172,18 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
           asChild
           ref={triggerRef}
           {...triggerProps}
+          style={variantsStyles.triggerWrapper}
         >
-          <TriggerWrapper {...allProps as any} {...triggerWrapperProps}>
+          <TriggerWrapper 
+            {...allProps as any} 
+            {...triggerWrapperProps}
+            style={variantsStyles.triggerInnerWrapper}
+          >
             {children}
           </TriggerWrapper>
         </TooltipTrigger>
         <TooltipPortal {...portalProps}>
-          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.wrapper]} sideOffset={2} side={side} {...contentProps}>
+          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.content]} sideOffset={2} side={side} {...contentProps}>
             {
               TypeGuards.isFunction(Content)
                 ? <Content
@@ -186,7 +194,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
                 />
                 : Content
             }
-            <TooltipArrow {...arrowProps} />
+            <TooltipArrow {...arrowProps} style={variantsStyles.arrow} />
           </TooltipContent>
         </TooltipPortal>
       </TooltipWrapper>

package/src/components/Tooltip/styles.ts

@@ -2,9 +2,14 @@ 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 = 'wrapper' | 'arrow'
+export type TooltipParts = 
+  'wrapper' | 
+  'arrow' |
+  'content' |
+  'triggerWrapper' |
+  'triggerInnerWrapper'
 
-export type TooltipComposition = `wrapper:${TooltipSide}` | TooltipParts
+export type TooltipComposition = `content:${TooltipSide}` | TooltipParts
 
 const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
 

package/src/components/Touchable/index.tsx

@@ -1,6 +1,6 @@
 import { AnyFunction, ComponentVariants, onMount, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
 import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react'
-import { stopPropagation } from '../../lib'
+import { getTestId, stopPropagation } from '../../lib'
 import { View } from '../View'
 import { TouchableComposition, TouchablePresets } from './styles'
 import { CSSInterpolation } from '@emotion/css'
@@ -147,6 +147,8 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     style,
   ]), [variantStyles, disabled, style])
 
+  const testId = getTestId(mergedProps)
+
   return (
     <View
       component={Component || 'button'}
@@ -156,6 +158,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       onKeyDown={handleClick}
       ref={ref}
       css={_styles}
+      data-testid={testId}
     />
   )
 }

package/src/components/View/index.tsx

@@ -1,49 +1,25 @@
 /** @jsx jsx */
 import { jsx, CSSObject } from '@emotion/react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  useCodeleapContext,
-  useMemo,
-  BreakpointPlaceholder,
-  BaseViewProps,
-
-  TypeGuards,
-} from '@codeleap/common'
-import {
-  forwardRef,
-  Ref,
-} from 'react'
+import { useDefaultComponentStyle, useCodeleapContext, useMemo, TypeGuards } from '@codeleap/common'
+import { forwardRef, Ref } from 'react'
 import { ViewPresets } from './styles'
 import { useMediaQuery } from '../../lib/hooks'
-import { HTMLProps, NativeHTMLElement } from '../../types'
+import { NativeHTMLElement } from '../../types'
+import { motion } from 'framer-motion'
+import { ViewProps } from './types'
+import { getTestId } from '../../lib'
 
 export * from './styles'
-
-export type ViewProps<T extends NativeHTMLElement> =
-  HTMLProps<T> &
-  ComponentVariants<typeof ViewPresets> &
-   {
-    component?: T
-    scroll?: boolean
-    debugName?: string
-    debug?: boolean
-    is?: BreakpointPlaceholder
-    not?: BreakpointPlaceholder
-    up?: BreakpointPlaceholder
-    down?: BreakpointPlaceholder
-    onHover?: (isMouseOverElement: boolean) => void
-  } & BaseViewProps
+export * from './types'
 
 export const ViewCP = (
   viewProps: ViewProps<'div'>,
   ref: Ref<any>,
 ) => {
-
   const {
     responsiveVariants = {},
     variants = [],
-    component: Component = 'div',
+    component = 'div',
     children,
     is,
     not,
@@ -54,10 +30,14 @@ export const ViewCP = (
     scroll = false,
     debug = false,
     style,
+    animated = false,
+    animatedProps = {},
     css = [],
     ...props
   } = viewProps
 
+  const Component = animated ? (motion?.[component] || motion.div) : (component || 'div')
+
   const variantStyles = useDefaultComponentStyle<'u:View', typeof ViewPresets>('u:View', {
     responsiveVariants,
     variants,
@@ -101,12 +81,16 @@ export const ViewCP = (
     logger.log(debugName, { componentStyles, platformMediaQuery, matches })
   }
 
+  const testId = getTestId(viewProps)
+
   return (
     <Component
       css={componentStyles}
       ref={ref}
       {...onHoverProps}
       {...props}
+      {...animatedProps}
+      data-testid={testId}
     >
       {children}
     </Component>

package/src/components/View/types.ts

@@ -0,0 +1,22 @@
+import { BaseViewProps, BreakpointPlaceholder, ComponentVariants } from '@codeleap/common'
+import { HTMLProps, NativeHTMLElement } from '../../types'
+import { AnimationProps, MotionProps } from 'framer-motion'
+import { ViewPresets } from './styles'
+
+export type ViewProps<T extends NativeHTMLElement> =
+  HTMLProps<T> &
+  ComponentVariants<typeof ViewPresets> &
+  Omit<AnimationProps, 'variants'> &
+  {
+    component?: T
+    scroll?: boolean
+    debugName?: string
+    debug?: boolean
+    is?: BreakpointPlaceholder
+    not?: BreakpointPlaceholder
+    up?: BreakpointPlaceholder
+    down?: BreakpointPlaceholder
+    onHover?: (isMouseOverElement: boolean) => void
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+  } & BaseViewProps

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './types/utility'
 export * from './lib/useSearchParams'
 export * from './lib/useBreakpointMatch'
 export * from './lib/usePopState'
+export * from './lib/useAnimatedStyle'
 export { default as Toast } from './lib/Toast'
 export { CreateOSAlert, useGlobalAlertComponent, AlertOutlet } from './lib/OSAlert'
 export type { GlobalAlertComponentProps, GlobalAlertType } from './lib/OSAlert'

package/src/lib/index.ts

@@ -6,3 +6,4 @@ export * from './useBreakpointMatch'
 export * from './useClick'
 export * from './ListMasonry'
 export * from './localStorage'
+export * from './useAnimatedStyle'

package/src/lib/useAnimatedStyle.ts

@@ -0,0 +1,28 @@
+import React, { useRef } from 'react'
+import { onUpdate, useState } from '@codeleap/common'
+import { AnimationProps } from 'framer-motion'
+
+type UpdaterReturn = Omit<AnimationProps['animate'], 'transition'> & {
+  transition: AnimationProps['transition']
+}
+
+type UseAnimatedStyleReturn = Pick<AnimationProps, 'animate' | 'initial' | 'transition'>
+
+export const useAnimatedStyle = (updater: () => UpdaterReturn, deps: Array<any>): UseAnimatedStyleReturn => {
+  const initialStyle = updater()
+  
+  const [animatedStyle, setAnimatedStyle] = useState(initialStyle)
+  const transition = useRef(initialStyle.transition)
+
+  onUpdate(() => {
+    const animatedStyleUpdated = updater()
+
+    setAnimatedStyle(animatedStyleUpdated)
+  }, deps)
+
+  return {
+    animate: animatedStyle,
+    transition: transition.current,
+    initial: false,
+  }
+}

package/src/lib/useBreakpointMatch.ts

@@ -4,7 +4,7 @@ import { useMediaQuery } from './hooks'
 
 export type BreakpointsMatch<T extends string = string> = Record<T, any>
 
-export function useBreakpointMatch<T extends string = string>(values: BreakpointsMatch<T>) {
+export function useBreakpointMatch<T extends string = string>(values: Partial<BreakpointsMatch<T>>) {
   const { Theme } = useCodeleapContext()
 
   const themeBreakpoints: Record<string, number> = Theme?.breakpoints

package/src/lib/utils/index.ts

@@ -1,4 +1,6 @@
 export * from './pollyfils/scroll'
 export * from './stopPropagation'
+export * from './test'
 export { default as url } from 'url-parse'
 export { default as Cookies } from './cookies'
+

package/src/lib/utils/test.ts

@@ -0,0 +1,3 @@
+export const getTestId = (props: Record<string, any>) => {
+  return props.testId || props['data-testid'] || props.id || props.debugName
+}