@codeleap/web 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@radix-ui/react-slider": "1.1.1",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "framer-motion": "^10.10.0",
     "js-cookie": "^3.0.1",
     "rc-slider": "^9.7.5",

package/src/components/ActionIcon/index.tsx

@@ -1,27 +1,48 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
-
-import { ComponentVariants, PropsOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import { StylesOf } from '../../types'
+import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { ComponentCommonProps, StylesOf } from '../../types'
 import { Icon, IconProps } from '../Icon'
-import { Touchable } from '../Touchable'
+import { Touchable, TouchableProps } from '../Touchable'
 import { View } from '../View'
-import { ActionIconComposition, ActionIconPresets } from './styles'
+import { ActionIconComposition, ActionIconParts, ActionIconPresets } from './styles'
 
-export type ActionIconProps = {
-    iconProps?: Partial<IconProps>
-    icon?: IconProps['name']
-    name?: IconProps['name']
-    action?: () => void
-    styles?: StylesOf<ActionIconComposition>
-} & Omit<PropsOf<typeof Touchable>, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets>
+export * from './styles'
 
-export const ActionIcon = (props:ActionIconProps) => {
-  const { icon, name, iconProps, onPress, variants, styles, children, disabled, ...touchableProps } = props
+export type ActionIconProps = Omit<TouchableProps, 'styles' | 'variants'> & ComponentCommonProps & {
+  iconProps?: Partial<IconProps>
+  icon?: IconProps['name']
+  name?: IconProps['name']
+  styles?: StylesOf<ActionIconComposition>
+} & ComponentVariants<typeof ActionIconPresets>
 
+const defaultProps: Partial<ActionIconProps> = {
+  disabled: false,
+}
+
+export const ActionIcon = (props: ActionIconProps) => {
+  const allProps = {
+    ...ActionIcon.defaultProps,
+    ...props,
+  }
+
+  const { 
+    icon,
+    name,
+    iconProps,
+    onPress,
+    responsiveVariants = {},
+    variants = [],
+    styles = {},
+    children,
+    disabled,
+    debugName,
+    ...touchableProps 
+  } = allProps
+  
   const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
-    variants,
+    responsiveVariants,
+    variants, 
     styles,
+    rootElement: 'touchableWrapper'
   })
 
   const isPressable = TypeGuards.isFunction(onPress) && !disabled
@@ -34,16 +55,17 @@ export const ActionIcon = (props:ActionIconProps) => {
     if (onPress) onPress?.()
   }
 
+  const getStyles = (key: ActionIconParts) => ({
+    ...variantStyles[key],
+    ...(disabled ? variantStyles[`${key}:disabled`] : {}),
+    ...(isPressable ? variantStyles[`${key}:pressable`] : {})
+  })
+
   return (
-    // @ts-ignore
     <WrapperComponent
-      onPress={handlePress}
-      css={[
-        variantStyles.wrapper,
-        disabled && variantStyles['wrapper:disabled'],
-        isPressable && variantStyles['wrapper:cursor'],
-      ]}
+      css={getStyles('touchableWrapper')}
       disabled={disabled}
+      debugName={debugName}
       {
         ...(isPressable && {
           onPress: handlePress,
@@ -52,17 +74,14 @@ export const ActionIcon = (props:ActionIconProps) => {
       {...touchableProps}
     >
       <Icon
+        debugName={debugName}
         name={icon ?? name}
+        style={getStyles('icon')}
         {...iconProps}
-        // @ts-ignore
-        css={[
-          variantStyles.icon,
-          disabled && variantStyles['icon:disabled'],
-        ]}
       />
       {children}
     </WrapperComponent>
   )
 }
 
-export * from './styles'
+ActionIcon.defaultProps = defaultProps

package/src/components/ActionIcon/styles.ts

@@ -1,9 +1,12 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { TouchableComposition } from '../Touchable'
+import { IconComposition } from '../Icon'
+import { TouchableComposition } from '../Touchable/styles'
+
+export type ActionIconParts = IconComposition | `touchable${Capitalize<TouchableComposition>}`
+export type ActionIconStates = 'disabled' | 'pressable'
+
+export type ActionIconComposition = ActionIconParts | `${ActionIconParts}:${ActionIconStates}`
 
-export type ActionIconParts = 'icon' | TouchableComposition
-export type ActionIconStates = ':disabled' | ':cursor' | ''
-export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
 const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
 
-export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ wrapper: style })))
+export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))

package/src/components/ActivityIndicator/index.tsx

@@ -10,11 +10,11 @@ import {
 } from '@codeleap/common'
 import { ActivityIndicatorPresets } from './styles'
 import { CSSInterpolation } from '@emotion/css'
-import { ComponentWithDefaultProps } from '../../types'
+import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
 
-export type ActivityIndicatorProps = {
+export type ActivityIndicatorProps = ComponentCommonProps & {
   style?: React.CSSProperties
   styles?: StylesOf<ActivityIndicatorComposition>
   css?: CSSInterpolation | CSSInterpolation[]
@@ -41,9 +41,10 @@ export const ActivityIndicator = React.forwardRef<typeof View, ActivityIndicator
   const variantStyles = useDefaultComponentStyle<'u:ActivityIndicator', typeof ActivityIndicatorPresets>(
     'u:ActivityIndicator',
     {
+      responsiveVariants,
       variants,
       styles,
-      responsiveVariants,
+      rootElement: 'wrapper',
     },
   )
 
@@ -55,10 +56,10 @@ export const ActivityIndicator = React.forwardRef<typeof View, ActivityIndicator
   }, [size])
 
   return (
-    <View css={[variantStyles.wrapper, style, _size]}>
+    <View css={[variantStyles.wrapper, _size, style]}>
       <Component
         ref={ref}
-        css={[variantStyles.wrapper, _size]}
+        css={[variantStyles.wrapper, _size, style]}
         {...props}
       />
     </View>

package/src/components/Badge/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { ComponentVariants, PropsOf, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { Text } from '../Text'
+import { View, ViewProps } from '../View'
+import { BadgeComposition, BadgePresets } from './styles'
+import { ComponentCommonProps } from '../../types'
+
+export * from './styles'
+
+export type BadgeProps = ComponentVariants<typeof BadgePresets>
+  & ViewProps<'div'>
+  & ComponentCommonProps
+  & {
+    styles?: StylesOf<BadgeComposition>
+    maxCount?: number
+    minCount?: number
+    debugName?: string
+    innerWrapperProps?: Partial<PropsOf<typeof View>>
+    textProps?: Partial<PropsOf<typeof Text>>
+    getBadgeContent?: (props: BadgeContent) => string
+    renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
+    disabled?: boolean
+    badge?: number | boolean
+  }
+
+type BadgeContent = BadgeProps & { count: number }
+
+export type BadgeComponentProps = {
+  badge?: BadgeProps['badge']
+  badgeProps?: Partial<BadgeProps>
+}
+
+const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
+  if (Number(count) > maxCount) {
+    return `${maxCount}+`
+  } else {
+    return String(count)
+  }
+}
+
+const defaultProps: Partial<BadgeProps> = {
+  maxCount: 9,
+  minCount: 1,
+  getBadgeContent: defaultGetBadgeContent,
+  renderBadgeContent: null,
+  disabled: false,
+  badge: true,
+}
+
+export const Badge = (props: BadgeProps) => {
+  const allProps = {
+    ...Badge.defaultProps,
+    ...props,
+  }
+
+  const {
+    debugName,
+    innerWrapperProps = {},
+    textProps = {},
+    maxCount,
+    minCount,
+    getBadgeContent,
+    renderBadgeContent,
+    styles = {},
+    variants = [],
+    responsiveVariants = {},
+    disabled,
+    style = {},
+    css,
+    badge,
+    ...rest
+  } = allProps
+
+  const visible = (TypeGuards.isBoolean(badge) && badge === true) || TypeGuards.isNumber(badge)
+
+  if (!visible) return null
+
+  const variantStyles = useDefaultComponentStyle<'u:Badge', typeof BadgePresets>('u:Badge', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const wrapperStyles = [
+    variantStyles?.wrapper,
+    (disabled && variantStyles?.['wrapper:disabled']),
+    css,
+    style,
+  ]
+
+  const innerWrapperStyles = [
+    variantStyles?.innerWrapper,
+    (disabled && variantStyles?.['innerWrapper:disabled']),
+    innerWrapperProps?.style,
+  ]
+
+  const countStyles = [
+    variantStyles?.count,
+    (disabled && variantStyles?.['count:disabled']),
+    textProps?.style,
+  ]
+
+  const count = TypeGuards.isNumber(badge) ? badge : null
+
+  const content = getBadgeContent({ ...props, maxCount, minCount, count })
+
+  const showContent = TypeGuards.isNumber(count) && count >= minCount
+
+  let BadgeContent = renderBadgeContent
+
+  if (TypeGuards.isNil(renderBadgeContent)) {
+    BadgeContent = () => <Text text={content} {...textProps} css={countStyles} />
+  }
+
+  return (
+    <View {...rest} css={wrapperStyles}>
+      <View {...innerWrapperProps} css={innerWrapperStyles}>
+        {showContent
+          ? <BadgeContent
+            {...props}
+            maxCount={maxCount}
+            minCount={minCount}
+            count={count}
+            getBadgeContent={getBadgeContent}
+            content={content}
+          />
+          : null
+        }
+      </View>
+    </View>
+  )
+}
+
+Badge.defaultProps = defaultProps

package/src/components/Badge/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+type BadgeParts = 'wrapper' | 'innerWrapper' | 'count'
+
+type BadgeStates = 'disabled'
+
+export type BadgeComposition =
+  `${BadgeParts}:${BadgeStates}`
+  | BadgeParts
+
+const createBadgeStyle = createDefaultVariantFactory<BadgeComposition>()
+
+export const BadgePresets = includePresets((styles) => createBadgeStyle(() => ({ 
+  wrapper: styles 
+})))

package/src/components/Button/index.tsx

@@ -1,121 +1,131 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
+import React from 'react'
 import {
   useDefaultComponentStyle,
-  ButtonStyles,
   ComponentVariants,
-  ButtonComposition,
-  ButtonParts,
-  optionalObject,
   AnyFunction,
-  EnhancedTheme,
-  ComponentStyleMap,
-  CommonVariantObject,
-  AppTheme,
+  TypeGuards,
+  IconPlaceholder,
+  StylesOf,
 } from '@codeleap/common'
-import React from 'react'
-import { StylesOf } from '../../types/utility'
 import { Text } from '../Text'
 import { Touchable, TouchableProps } from '../Touchable'
 import { Icon } from '../Icon'
-import { IconPlaceholder, useNestedStylesByKey } from '@codeleap/common'
-import { LoadingOverlay } from '../LoadingOverlay'
-import { ActivityIndicator } from '../ActivityIndicator'
-
-export type ButtonProps =
-  ComponentVariants<typeof ButtonStyles> & {
+import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
+import { ButtonComposition, ButtonPresets, ButtonParts } from './styles'
+import { ComponentCommonProps } from '../../types'
+
+export type ButtonProps = 
+  ComponentVariants<typeof ButtonPresets> &
+  Partial<Omit<TouchableProps<'button'>, 'variants' | 'styles'>> &
+  ComponentCommonProps & {
     text?: string
     rightIcon?: IconPlaceholder
     icon?: IconPlaceholder
     onPress?: AnyFunction
     styles?: StylesOf<ButtonComposition>
+    style?: React.CSSProperties
     loading?: boolean
+    loadingShowText?: boolean
     debugName: string
     debounce?: number
-  } & Partial<TouchableProps<'button'>>
+    selected?: boolean
+    children?: React.ReactNode | ((props: Partial<Omit<ButtonProps, 'children'>>) => JSX.Element)
+    loaderProps?: Partial<ActivityIndicatorProps>
+  }
+
+const defaultProps: Partial<ButtonProps> = {
+  debounce: 600,
+  loadingShowText: false,
+}
+
+export const Button = (buttonProps: ButtonProps) => {
+  const allProps = {
+    ...Button.defaultProps,
+    ...buttonProps
+  }
 
-export const Button = (buttonProps:ButtonProps) => {
   const {
     variants = [],
     responsiveVariants = {},
+    styles = {},
     children,
     icon,
     text,
     loading,
-    styles,
+    loadingShowText,
     onPress,
     disabled,
     rightIcon,
-    debounce = 600,
+    selected,
+    loaderProps = {},
+    debugName,
     ...props
-  } = buttonProps
+  } = allProps
 
-  const [pressed, setPressed] = React.useState(false)
-  const variantStyles = useDefaultComponentStyle('Button', {
+  const variantStyles = useDefaultComponentStyle<'u:Button', typeof ButtonPresets>('u:Button', {
     responsiveVariants,
     variants,
     styles,
+    rootElement: 'wrapper',
   })
 
-  function handlePress(e?: Parameters<ButtonProps['onPress']>[0]) {
-    if (!pressed) {
-      props?.onClick?.(e)
-
-      setPressed(true)
-
-      setTimeout(() => setPressed(false), debounce)
+  const getStyles = (key: ButtonParts) => ({
+    ...variantStyles?.[key],
+    ...(disabled ? variantStyles?.[key + ':disabled'] : {}),
+    ...(selected ? variantStyles?.[key + ':selected'] : {})
+  })
 
-      onPress && onPress()
-    }
+  const iconStyles = getStyles('icon')
+
+  const _styles: StylesOf<ButtonParts> = {
+    wrapper: getStyles('wrapper'),
+    text: getStyles('text'),
+    loaderWrapper: getStyles('loaderWrapper'),
+    leftIcon: {
+      ...iconStyles,
+      ...getStyles('leftIcon'),
+    },
+    rightIcon: {
+      ...iconStyles,
+      ...getStyles('rightIcon')
+    },
   }
 
-  function getStyles(key:ButtonParts) {
+  const childrenContent = TypeGuards.isFunction(children)
+    // @ts-ignore
+    ? children(allProps)
+    : children
 
-    return {
-      ...variantStyles[key],
-      ...optionalObject(disabled, variantStyles[key + ':disabled'], {}),
-    }
-  }
-  const iconStyle = getStyles('icon')
+  // TODO - This is a hack to hide the icon with display: none
+  const isLeftIconHide = _styles?.leftIcon?.display === 'none'
+
+  const shouldRenderLeftIcon = !loading && !isLeftIconHide
 
-  const loaderStyle = useNestedStylesByKey('loading', variantStyles)
+  const _hideTextOnLoading = !loadingShowText && loading
 
   return (
     <Touchable
-      css={getStyles('wrapper')}
+      css={_styles.wrapper}
       component='button'
       debugComponent='Button'
+      disabled={disabled}
+      onPress={onPress}
+      debugName={debugName}
       {...props}
-      onPress={null}
-      onClick={handlePress}
     >
-      <LoadingOverlay
-        visible={loading}
-        styles={loaderStyle}
-      />
-      {!loading && (
-        <Icon
-          name={icon}
-          style={{ ...iconStyle, ...getStyles('leftIcon') }}
-
-        />
+      {shouldRenderLeftIcon && <Icon debugName={debugName} name={icon} style={_styles.leftIcon} />}
+      {TypeGuards.isString(text) && !_hideTextOnLoading ? <Text debugName={debugName} text={text} css={[_styles.text]} /> : null }
+      
+      {childrenContent}
+
+      <Icon debugName={debugName} name={rightIcon} style={_styles.rightIcon}/>
+      {loading && (
+        <ActivityIndicator debugName={debugName} style={_styles.loaderWrapper} {...loaderProps} />
       )}
-      {children || (
-        <Text
-          text={text}
-          css={getStyles('text')}
-        />
-      )}
-
-      <Icon
-        name={rightIcon}
-        style={{ ...iconStyle, ...getStyles('rightIcon') }}
-
-      />
-      {loading && <ActivityIndicator css={{ display: 'none' }} />}
     </Touchable>
   )
 }
 
+Button.defaultProps = defaultProps
+
 export * from './styles'

package/src/components/Button/styles.ts

@@ -1,22 +1,18 @@
-import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
-import { LoadingOverlayComposition } from '../LoadingOverlay'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type ButtonStates = 'disabled' | 'selected'
 
-export type ButtonStates = 'disabled'
 export type ButtonParts =
-| 'text'
-| 'inner'
-| 'wrapper'
-| 'icon'
-| 'leftIcon'
-| 'rightIcon'
-| `loading${Capitalize<LoadingOverlayComposition>}`
-| 'badgeText'
-| 'badgeWrapper'
+  | 'wrapper'
+  | 'text'
+  | 'icon'
+  | 'leftIcon'
+  | 'rightIcon'
+  | `loader${Capitalize<ActivityIndicatorComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
 
-
-
 const createButtonStyle = createDefaultVariantFactory<ButtonComposition>()
 
 export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Checkbox/index.tsx

@@ -12,20 +12,20 @@ import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps
 import { useAnimatedVariantStyles } from '../..'
 import { Icon } from '../Icon'
 import { motion } from 'framer-motion'
+import { ComponentCommonProps } from '../../types/utility'
 
 export * from './styles'
 
 export type CheckboxProps = Pick<
   InputBaseProps,
   'debugName' | 'disabled' | 'label'
-> & {
-  variants?: ComponentVariants<typeof CheckboxPresets>['variants']
+> & ComponentCommonProps & {
   styles?: StylesOf<CheckboxComposition>
   value: boolean
   onValueChange: (value: boolean) => void
   style?: PropsOf<typeof View>['style']
   checkboxOnLeft?: boolean
-}
+} & ComponentVariants<typeof CheckboxPresets>
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
@@ -36,6 +36,7 @@ export const Checkbox = (props: CheckboxProps) => {
   } = selectInputBaseProps(props)
 
   const {
+    responsiveVariants = {},
     variants = [],
     style = {},
     styles = {},
@@ -47,6 +48,7 @@ export const Checkbox = (props: CheckboxProps) => {
   } = others
 
   const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
+    responsiveVariants,
     variants,
     styles,
     rootElement: 'wrapper',
@@ -115,6 +117,9 @@ export const Checkbox = (props: CheckboxProps) => {
     }}
     order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
     style={style}
+    wrapperProps={{
+      onClick: handleChange
+    }}
   >
     <motion.div
       css={[
@@ -136,6 +141,7 @@ export const Checkbox = (props: CheckboxProps) => {
         transition={variantStyles['checkmarkWrapper:transition']}
       >
         <Icon
+          debugName={debugName}
           name={'checkbox-checkmark' as any}
           css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
         />

package/src/components/Collapse/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
 
-import { capitalize, TypeGuards } from '@codeleap/common'
+import { capitalize, StylesOf, TypeGuards } from '@codeleap/common'
 import { Scroll } from '../Scroll'
 import { View, ViewProps } from '../View'
 import { ElementType } from 'react'
@@ -58,6 +58,7 @@ export type CollapseProps<T extends NativeHTMLElement = 'div'> = ViewProps<T> &
     size?: string | number
     direction?: CollapseAxis
     animation?: string
+    styles: StylesOf<CollapseComposition>
 }
 
 export const Collapse = ({
@@ -67,19 +68,21 @@ export const Collapse = ({
   children,
   direction,
   animation,
+  styles,
   ...props
 }:CollapseProps) => {
 
   const Component = scroll ? Scroll : View
-  const styles = getCollapseStyles({
+  const _styles = getCollapseStyles({
     value: size,
     direction,
     animation,
   })
   // @ts-ignore
   return <Component css={[
+    _styles.wrapper,
+    open ? _styles['wrapper:open'] : _styles['wrapper:closed'],
     styles.wrapper,
-    open ? styles['wrapper:open'] : styles['wrapper:closed'],
   ]} {...props}>
     {children}
   </Component>