@codeleap/web 3.13.3 → 3.14.0

package/package.json

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

package/src/components/ActionIcon/index.tsx

@@ -7,10 +7,14 @@ import { ActionIconComposition, ActionIconParts, ActionIconPresets } from './sty
 
 export * from './styles'
 
+/** IconButton */
 export type ActionIconProps = Omit<TouchableProps, 'styles' | 'variants'> & ComponentCommonProps & {
   iconProps?: Partial<IconProps>
+  /** prop */
   icon?: IconProps['name']
+  /** prop */
   name?: IconProps['name']
+
   styles?: StylesOf<ActionIconComposition>
 } & ComponentVariants<typeof ActionIconPresets>
 

package/src/components/ActivityIndicator/index.tsx

@@ -14,11 +14,14 @@ import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
 
+/** * LoadingIndicator */
 export type ActivityIndicatorProps = ComponentCommonProps & {
   style?: React.CSSProperties
   styles?: StylesOf<ActivityIndicatorComposition>
   css?: CSSInterpolation | CSSInterpolation[]
+  /** prop */
   component?: React.ComponentType<Omit<ActivityIndicatorProps & {ref?: React.Ref<any>}, 'component'>>
+  /** prop */
   size?: number
 } & ComponentVariants<typeof ActivityIndicatorStyles>
 

package/src/components/Badge/index.tsx

@@ -7,19 +7,27 @@ import { ComponentCommonProps } from '../../types'
 
 export * from './styles'
 
+/** * Badge */
 export type BadgeProps = ComponentVariants<typeof BadgePresets>
   & ViewProps<'div'>
   & ComponentCommonProps
   & {
     styles?: StylesOf<BadgeComposition>
+    /** prop */
     maxCount?: number
+    /** prop */
     minCount?: number
+    /** prop */
     debugName?: string
     innerWrapperProps?: Partial<PropsOf<typeof View>>
     textProps?: Partial<PropsOf<typeof Text>>
+    /** prop */
     getBadgeContent?: (props: BadgeContent) => string
+    /** prop */
     renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
+    /** prop */
     disabled?: boolean
+    /** prop */
     badge?: number | boolean
   }
 

package/src/components/Button/index.tsx

@@ -14,20 +14,29 @@ import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
 import { ButtonComposition, ButtonPresets, ButtonParts } from './styles'
 import { ComponentCommonProps } from '../../types'
 
+/** * Button */
 export type ButtonProps = 
   ComponentVariants<typeof ButtonPresets> &
   Partial<Omit<TouchableProps<'button'>, 'variants' | 'styles'>> &
   ComponentCommonProps & {
+    /** prop */
     text?: string
+    /** prop */
     rightIcon?: IconPlaceholder
+    /** prop */
     icon?: IconPlaceholder
+    /** prop */
     onPress?: AnyFunction
     styles?: StylesOf<ButtonComposition>
     style?: React.CSSProperties
+    /** prop */
     loading?: boolean
     loadingShowText?: boolean
+    /** prop */
     debugName: string
+    /** prop */
     debounce?: number
+    /** prop */
     selected?: boolean
     children?: React.ReactNode | ((props: Partial<Omit<ButtonProps, 'children'>>) => JSX.Element)
     loaderProps?: Partial<ActivityIndicatorProps>

package/src/components/Checkbox/index.tsx

@@ -17,15 +17,20 @@ import { ComponentCommonProps } from '../../types/utility'
 
 export * from './styles'
 
+/** * Checkbox */
 export type CheckboxProps = Pick<
   InputBaseProps,
   'debugName' | 'disabled' | 'label'
 > & ComponentCommonProps & {
   styles?: StylesOf<CheckboxComposition>
+  /** prop */
   value: boolean
+  /** prop */
   onValueChange: (value: boolean) => void
   style?: PropsOf<typeof View>['style']
+  /** prop */
   checkboxOnLeft?: boolean
+  /** prop */
   checkIcon?: IconPlaceholder
 } & ComponentVariants<typeof CheckboxPresets>
 

package/src/components/Overlay/index.tsx

@@ -8,7 +8,7 @@ import { Touchable, TouchableProps } from '../Touchable'
 import { View, ViewProps } from '../View'
 import { OverlayComposition, OverlayPresets } from './styles'
 import { NativeHTMLElement } from '../../types'
-import { useLockScroll, usePopState } from '../../lib'
+import { usePopState } from '../../lib'
 
 export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
@@ -37,8 +37,6 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
 
   usePopState(visible, props.onPress, scrollLocked)
 
-  useLockScroll(visible)
-
   const Component = props.onClick || props.onPress ? Touchable : View
 
   return (

package/src/components/Text/index.tsx

@@ -1,22 +1,10 @@
-import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import React, { ComponentPropsWithoutRef, ElementType } from 'react'
-import { StylesOf } from '../../types/utility'
-import { TextComposition, TextPresets } from './styles'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import React, { ElementType } from 'react'
+import { TextPresets } from './styles'
+import { TextProps } from './types'
 
 export * 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 * from './types'
 
 const defaultProps: Partial<TextProps<'p'>> = {
   debugName: 'Text component',

package/src/components/Text/types.ts

@@ -0,0 +1,16 @@
+import { StylesOf, ComponentVariants } from '@codeleap/common'
+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
+}

package/src/components/Touchable/index.tsx

@@ -21,30 +21,53 @@ export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWit
   debounce?: number
   leadingDebounce?: boolean
   setPressed?: (pressed: boolean) => void
+  analyticsEnabled?: boolean
+  analyticsName?: string
+  analyticsData?: Record<string, any>
 } & ComponentVariants<typeof TouchablePresets>
 
+const defaultProps: TouchableProps<'button'> = {
+  propagate: true,
+  debounce: null,
+  component: View,
+  style: {},
+  styles: {},
+  responsiveVariants: {},
+  variants: [],
+  css: [],
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+}
 export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>,
   ref,
 ) => {
+  const mergedProps: TouchableProps = {
+    ...(defaultProps),
+    ...(touchableProps),
+  }
   const {
-    propagate = true,
-    debounce = null,
+    propagate,
+    debounce,
     leadingDebounce,
     setPressed,
-    component: Component = View,
+    component: Component,
     disabled,
     onPress,
     onClick,
     debugName,
     debugComponent,
-    style = {},
-    styles = {},
-    responsiveVariants = {},
-    variants = [],
-    css = [],
+    style,
+    styles,
+    responsiveVariants,
+    variants,
+    css,
+    analyticsEnabled,
+    analyticsName,
+    analyticsData,
     ...props
-  } = touchableProps as TouchableProps
+  } = mergedProps
 
   const pressed = React.useRef(!!leadingDebounce)
 
@@ -60,7 +83,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     responsiveVariants,
     variants,
     styles,
-    rootElement: 'wrapper'
+    rootElement: 'wrapper',
   })
 
   const { logger } = useCodeleapContext()
@@ -76,7 +99,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       logger.warn(
         'No onPress passed to touchable',
         touchableProps,
-        'User interaction'
+        'User interaction',
       )
       return
     }
@@ -85,8 +108,14 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       logger.log(
         `<${debugComponent || 'Touchable'}/> pressed`,
         { debugName, debugComponent },
-        'User interaction'
+        'User interaction',
       )
+      if (analyticsEnabled) {
+        const name = analyticsName || debugName
+        if (!!name?.trim?.()) {
+          logger.analytics?.interaction(name, analyticsData)
+        }
+      }
 
       if (TypeGuards.isFunction(onClick)) onClick?.(event)
       onPress?.()
@@ -127,6 +156,10 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   )
 }
 
-export const Touchable = forwardRef(TouchableCP) as <T extends NativeHTMLElement = 'button'>(
+export const Touchable = forwardRef(TouchableCP) as (<T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>
-) => JSX.Element
+) => JSX.Element) & {
+  defaultProps: Partial<TouchableProps<'button'>>
+}
+
+Touchable.defaultProps = defaultProps

package/src/lib/hooks.ts

@@ -1,4 +1,4 @@
-import { AnyFunction, onMount, onUpdate, range, useIsomorphicEffect, useUncontrolled } from '@codeleap/common'
+import { AnyFunction, onMount, onUpdate, range, useUncontrolled } from '@codeleap/common'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { v4 } from 'uuid'
 import { easeInOut, EasingFunction, AnimationProps, useAnimate, useAnimation, animate } from 'framer-motion'
@@ -352,23 +352,3 @@ export function useAnimatedVariantStyles<T extends Record<string|number|symbol,
 
   return animated
 }
-
-export function useLockScroll(isLock: boolean) {
-  useIsomorphicEffect(() => {
-    const htmlStyle = document?.documentElement?.style
-
-    if (!!htmlStyle) {
-      if (htmlStyle.overflowX !== 'hidden') {
-        htmlStyle.overflowX = 'hidden'
-      }
-
-      console.log({ isLock, flow: htmlStyle.overflowY })
-  
-      if (isLock) {
-        htmlStyle.overflowY = 'hidden'
-      } else if (!isLock && htmlStyle.overflowY === 'hidden') {
-        htmlStyle.overflowY = 'auto'
-      }
-    }
-  }, [isLock])
-}