@codeleap/web 3.25.0 → 3.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.25.0",
+  "version": "3.25.2",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -43,7 +43,6 @@
   },
   "peerDependencies": {
     "@codeleap/common": "*",
-    "@codeleap/styles": "*",
     "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
     "axios": "1.3.5",

package/src/components/ActionIcon/index.tsx

@@ -1,93 +1,94 @@
-import { TypeGuards } from '@codeleap/common'
-import { Icon } from '../Icon'
-import { Touchable } from '../Touchable'
+import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { ComponentCommonProps, StylesOf } from '../../types'
+import { Icon, IconProps } from '../Icon'
+import { Touchable, TouchableProps } from '../Touchable'
 import { View } from '../View'
-import { ActionIconParts } from './styles'
-import { ActionIconProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { ElementType } from 'react'
+import { ActionIconComposition, ActionIconParts, ActionIconPresets } from './styles'
 
 export * from './styles'
-export * from './types'
+
+/** 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>
+
+const defaultProps: Partial<ActionIconProps> = {
+  disabled: false,
+  tabIndex: 0,
+}
 
 export const ActionIcon = (props: ActionIconProps) => {
+  const allProps = {
+    ...ActionIcon.defaultProps,
+    ...props,
+  }
+
   const {
     icon,
     name,
     iconProps,
     onPress,
-    style,
+    responsiveVariants = {},
+    variants = [],
+    styles = {},
     children,
     disabled,
     debugName,
     ...touchableProps
-  } = {
-    ...ActionIcon.defaultProps,
-    ...props,
-  }
+  } = allProps
 
-  const styles = useStylesFor(ActionIcon.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'touchableWrapper',
+  })
 
   const isPressable = TypeGuards.isFunction(onPress) && !disabled
 
-  const WrapperComponent: ElementType = isPressable ? Touchable : View
+  const WrapperComponent: any = isPressable ? Touchable : View
 
   const handlePress = (e) => {
     if (!isPressable) return
-
-    const pressed = e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter'
-
-    if (pressed) {
+    if (onPress && (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter')) {
       onPress?.()
     }
   }
 
-  const getStyles = (key: ActionIconParts) => mergeStyles([
-    styles[key],
-    disabled && styles[`${key}:disabled`],
-    isPressable && styles[`${key}:pressable`],
-  ])
-
-  const wrapperProps = isPressable ? {
-    onPress: () => handlePress({ type: 'click' }),
-    onKeyDown: handlePress,
-  } : {}
-
-  const wrapperStyles = getStyles('touchableWrapper')
-  const iconStyles = getStyles('icon')
+  const getStyles = (key: ActionIconParts) => ({
+    ...variantStyles[key],
+    ...(disabled ? variantStyles[`${key}:disabled`] : {}),
+    ...(isPressable ? variantStyles[`${key}:pressable`] : {}),
+  })
 
   return (
     <WrapperComponent
+      css={getStyles('touchableWrapper')}
       disabled={disabled}
       debugName={debugName}
-      {...wrapperProps}
+      {
+        ...(isPressable && {
+          onPress: () => handlePress({ type: 'click' }),
+          onKeyDown: handlePress,
+        })
+      }
       {...touchableProps}
-      style={wrapperStyles}
     >
       <Icon
         debugName={debugName}
         name={icon ?? name}
+        style={getStyles('icon')}
         {...iconProps}
-        style={iconStyles}
       />
       {children}
     </WrapperComponent>
   )
 }
 
-ActionIcon.styleRegistryName = 'ActionIcon'
-ActionIcon.elements = ['touchable', 'icon']
-ActionIcon.rootElement = 'touchableWrapper'
-
-ActionIcon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ActionIcon as (props: StyledComponentProps<ActionIconProps, typeof styles>) => IJSX
-}
-
-ActionIcon.defaultProps = {
-  disabled: false,
-  tabIndex: 0,
-} as Partial<ActionIconProps>
-
-WebStyleRegistry.registerComponent(ActionIcon)
+ActionIcon.defaultProps = defaultProps

package/src/components/ActionIcon/styles.ts

@@ -1,8 +1,12 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 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}`
+
+const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
+
+export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))

package/src/components/ActivityIndicator/index.tsx

@@ -1,54 +1,75 @@
 import { View } from '../View'
-import React, { forwardRef } from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { ActivityIndicatorProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import React from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  ActivityIndicatorStyles,
+  ActivityIndicatorComposition,
+  StylesOf,
+  TypeGuards,
+} from '@codeleap/common'
+import { ActivityIndicatorPresets } from './styles'
+import { CSSInterpolation } from '@emotion/css'
+import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
-export * from './types'
 
-export const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>((props, ref) => {
+/** * 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>
+
+export const ActivityIndicator = React.forwardRef<typeof View, ActivityIndicatorProps>((activityIndicatorProps, ref) => {
+  const allProps = {
+    ...ActivityIndicator.defaultProps,
+    ...activityIndicatorProps,
+  }
+
   const {
-    style,
+    style = {},
+    styles = {},
     component: Component,
+    variants = [],
+    responsiveVariants = {},
     size,
-    ...rest
-  } = {
-    ...ActivityIndicator.defaultProps,
-    ...props,
-  }
+    ...props
+  } = allProps
 
-  const styles = useStylesFor(ActivityIndicator.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:ActivityIndicator', typeof ActivityIndicatorPresets>(
+    'u:ActivityIndicator',
+    {
+      responsiveVariants,
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
 
   const _size = React.useMemo(() => {
     return TypeGuards.isNumber(size) ? {
       width: size,
       height: size,
-    } : null
+    } : {}
   }, [size])
 
   return (
-    <Component
-      ref={ref}
-      {...rest}
-      style={[styles.wrapper, _size]}
-    />
+    <View css={[variantStyles.wrapper, _size, style]}>
+      <Component
+        ref={ref}
+        css={[variantStyles.wrapper, _size, style]}
+        {...props}
+      />
+    </View>
   )
-}) as StyledComponentWithProps<ActivityIndicatorProps>
-
-ActivityIndicator.styleRegistryName = 'ActivityIndicator'
-ActivityIndicator.elements = ['wrapper']
-ActivityIndicator.rootElement = 'wrapper'
-
-ActivityIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ActivityIndicator as (props: StyledComponentProps<ActivityIndicatorProps, typeof styles>) => IJSX
-}
+}) as ComponentWithDefaultProps<ActivityIndicatorProps>
 
 ActivityIndicator.defaultProps = {
-  component: View,
+  component: View as ActivityIndicatorProps['component'],
   size: null,
-} as Partial<ActivityIndicatorProps>
-
-WebStyleRegistry.registerComponent(ActivityIndicator)
+}

package/src/components/ActivityIndicator/styles.ts

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

package/src/components/Badge/index.tsx

@@ -1,14 +1,42 @@
 import React from 'react'
-import { TypeGuards } from '@codeleap/common'
+import { ComponentVariants, PropsOf, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { Text } from '../Text'
-import { View } from '../View'
-import { BadgeContent, BadgeProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { View, ViewProps } from '../View'
+import { BadgeComposition, BadgePresets } from './styles'
+import { ComponentCommonProps } from '../../types'
 
 export * from './styles'
-export * from './types'
+
+/** * 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
+  }
+
+type BadgeContent = BadgeProps & { count: number }
+
+export type BadgeComponentProps = {
+  badge?: BadgeProps['badge']
+  badgeProps?: Partial<BadgeProps>
+}
 
 const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
   if (Number(count) > maxCount) {
@@ -18,44 +46,66 @@ const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
   }
 }
 
+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,
+    innerWrapperProps = {},
+    textProps = {},
     maxCount,
     minCount,
     getBadgeContent,
     renderBadgeContent,
+    styles = {},
+    variants = [],
+    responsiveVariants = {},
     disabled,
-    style,
+    style = {},
+    css,
     badge,
     ...rest
-  } = {
-    ...Badge.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Badge.styleRegistryName, style)
+  } = 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 = [
-    styles?.wrapper,
-    (disabled && styles?.['wrapper:disabled']),
+    variantStyles?.wrapper,
+    (disabled && variantStyles?.['wrapper:disabled']),
+    css,
+    style,
   ]
 
   const innerWrapperStyles = [
-    styles?.innerWrapper,
-    (disabled && styles?.['innerWrapper:disabled']),
+    variantStyles?.innerWrapper,
+    (disabled && variantStyles?.['innerWrapper:disabled']),
     innerWrapperProps?.style,
   ]
 
   const countStyles = [
-    styles?.count,
-    (disabled && styles?.['count:disabled']),
+    variantStyles?.count,
+    (disabled && variantStyles?.['count:disabled']),
     textProps?.style,
   ]
 
@@ -65,15 +115,18 @@ export const Badge = (props: BadgeProps) => {
 
   const showContent = TypeGuards.isNumber(count) && count >= minCount
 
-  const BadgeContent = TypeGuards.isNil(renderBadgeContent) ? () => <Text text={content} {...textProps} /> : renderBadgeContent
+  let BadgeContent = renderBadgeContent
+
+  if (TypeGuards.isNil(renderBadgeContent)) {
+    BadgeContent = () => <Text text={content} {...textProps} css={countStyles} />
+  }
 
   return (
-    <View {...rest} style={wrapperStyles}>
-      <View {...innerWrapperProps} style={innerWrapperStyles}>
+    <View {...rest} css={wrapperStyles}>
+      <View {...innerWrapperProps} css={innerWrapperStyles}>
         {showContent
           ? <BadgeContent
             {...props}
-            style={countStyles}
             maxCount={maxCount}
             minCount={minCount}
             count={count}
@@ -87,20 +140,4 @@ export const Badge = (props: BadgeProps) => {
   )
 }
 
-Badge.styleRegistryName = 'Badge'
-Badge.elements = ['wrapper', 'innerWrapper', 'count']
-Badge.rootElement = 'wrapper'
-
-Badge.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Badge as (props: StyledComponentProps<BadgeProps, typeof styles>) => IJSX
-}
-
-Badge.defaultProps = {
-  maxCount: 9,
-  minCount: 1,
-  getBadgeContent: defaultGetBadgeContent,
-  disabled: false,
-  badge: true,
-} as Partial<BadgeProps>
-
-WebStyleRegistry.registerComponent(Badge)
+Badge.defaultProps = defaultProps

package/src/components/Badge/styles.ts

@@ -1,5 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
 type BadgeParts = 'wrapper' | 'innerWrapper' | 'count'
 
 type BadgeStates = 'disabled'
 
-export type BadgeComposition = `${BadgeParts}:${BadgeStates}` | BadgeParts
+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,25 +1,62 @@
 import React from 'react'
-import { TypeGuards, StylesOf } from '@codeleap/common'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  AnyFunction,
+  TypeGuards,
+  IconPlaceholder,
+  StylesOf,
+} from '@codeleap/common'
 import { Text } from '../Text'
-import { Touchable } from '../Touchable'
+import { Touchable, TouchableProps } from '../Touchable'
 import { Icon } from '../Icon'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { ButtonParts } from './styles'
-import { ButtonProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+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>
+  }
 
-export * from './styles'
-export * from './types'
+const defaultProps: Partial<ButtonProps> = {
+  debounce: 600,
+  loadingShowText: false,
+}
 
 export const Button = (buttonProps: ButtonProps) => {
   const allProps = {
     ...Button.defaultProps,
-    ...buttonProps,
+    ...buttonProps
   }
 
   const {
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
     children,
     icon,
     text,
@@ -29,70 +66,76 @@ export const Button = (buttonProps: ButtonProps) => {
     disabled,
     rightIcon,
     selected,
-    loaderProps,
+    loaderProps = {},
     debugName,
-    style,
+    style = {},
     ...props
   } = allProps
 
-  const styles = useStylesFor(Button.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Button', typeof ButtonPresets>('u:Button', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
-  const getStyles = (key: ButtonParts, partialStyle = null) => mergeStyles([
-    styles?.[key],
-    disabled ? styles?.[key + ':disabled'] : null,
-    selected ? styles?.[key + ':selected'] : null,
-    partialStyle,
-  ])
+  const getStyles = (key: ButtonParts) => ({
+    ...variantStyles?.[key],
+    ...(disabled ? variantStyles?.[key + ':disabled'] : {}),
+    ...(selected ? variantStyles?.[key + ':selected'] : {})
+  })
 
   const iconStyles = getStyles('icon')
 
-  const componentStyles: StylesOf<ButtonParts> = {
+  const _styles: StylesOf<ButtonParts> = {
     wrapper: getStyles('wrapper'),
     text: getStyles('text'),
     loaderWrapper: getStyles('loaderWrapper'),
-    leftIcon: getStyles('leftIcon', iconStyles),
-    rightIcon: getStyles('rightIcon', iconStyles),
+    leftIcon: {
+      ...iconStyles,
+      ...getStyles('leftIcon'),
+    },
+    rightIcon: {
+      ...iconStyles,
+      ...getStyles('rightIcon')
+    },
   }
 
+  const childrenContent = TypeGuards.isFunction(children)
+    // @ts-ignore
+    ? children(allProps)
+    : children
+
   // TODO - This is a hack to hide the icon with display: none
-  const isLeftIconHide = componentStyles?.leftIcon?.display === 'none'
+  const isLeftIconHide = _styles?.leftIcon?.display === 'none'
 
-  const shouldRenderLeftIcon = !loading && !isLeftIconHide && !!icon
+  const shouldRenderLeftIcon = !loading && !isLeftIconHide
 
   const _hideTextOnLoading = !loadingShowText && loading
 
   return (
     <Touchable
+      css={[_styles.wrapper, style]}
       component='button'
       debugComponent='Button'
       disabled={disabled}
       onPress={onPress}
       debugName={debugName}
       {...props}
-      style={componentStyles.wrapper}
     >
-      {shouldRenderLeftIcon ? <Icon debugName={debugName} name={icon} style={componentStyles.leftIcon} /> : null}
-      {TypeGuards.isString(text) && !_hideTextOnLoading ? <Text debugName={debugName} text={text} style={componentStyles.text} /> : null}
-
-      {children}
-
-      {loading ? <ActivityIndicator debugName={debugName} {...loaderProps} style={componentStyles.loaderWrapper} /> : null}
-      {!!rightIcon ? <Icon debugName={debugName} name={rightIcon} style={componentStyles.rightIcon} /> : null}
+      {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} />
+      )}
     </Touchable>
   )
 }
 
-Button.styleRegistryName = 'Button'
-Button.elements = ['wrapper', 'text', 'icon', 'leftIcon', 'rightIcon', `loader`]
-Button.rootElement = 'wrapper'
-
-Button.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Button as (props: StyledComponentProps<ButtonProps, typeof styles>) => IJSX
-}
+Button.defaultProps = defaultProps
 
-Button.defaultProps = {
-  debounce: 600,
-  loadingShowText: false,
-} as Partial<ButtonProps>
-
-WebStyleRegistry.registerComponent(Button)
+export * from './styles'