@codeleap/web 3.24.3 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.24.3",
+  "version": "4.0.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -43,6 +43,7 @@
   },
   "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,94 +1,93 @@
-import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import { ComponentCommonProps, StylesOf } from '../../types'
-import { Icon, IconProps } from '../Icon'
-import { Touchable, TouchableProps } from '../Touchable'
+import { TypeGuards } from '@codeleap/common'
+import { Icon } from '../Icon'
+import { Touchable } from '../Touchable'
 import { View } from '../View'
-import { ActionIconComposition, ActionIconParts, ActionIconPresets } from './styles'
+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'
 
 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>
-
-const defaultProps: Partial<ActionIconProps> = {
-  disabled: false,
-  tabIndex: 0,
-}
+export * from './types'
 
 export const ActionIcon = (props: ActionIconProps) => {
-  const allProps = {
-    ...ActionIcon.defaultProps,
-    ...props,
-  }
-
   const {
     icon,
     name,
     iconProps,
     onPress,
-    responsiveVariants = {},
-    variants = [],
-    styles = {},
+    style,
     children,
     disabled,
     debugName,
     ...touchableProps
-  } = allProps
+  } = {
+    ...ActionIcon.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
-    responsiveVariants,
-    variants,
-    styles,
-    rootElement: 'touchableWrapper',
-  })
+  const styles = useStylesFor(ActionIcon.styleRegistryName, style)
 
   const isPressable = TypeGuards.isFunction(onPress) && !disabled
 
-  const WrapperComponent: any = isPressable ? Touchable : View
+  const WrapperComponent: ElementType = isPressable ? Touchable : View
 
   const handlePress = (e) => {
     if (!isPressable) return
-    if (onPress && (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter')) {
+
+    const pressed = e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter'
+
+    if (pressed) {
       onPress?.()
     }
   }
 
-  const getStyles = (key: ActionIconParts) => ({
-    ...variantStyles[key],
-    ...(disabled ? variantStyles[`${key}:disabled`] : {}),
-    ...(isPressable ? variantStyles[`${key}:pressable`] : {}),
-  })
+  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')
 
   return (
     <WrapperComponent
-      css={getStyles('touchableWrapper')}
       disabled={disabled}
       debugName={debugName}
-      {
-        ...(isPressable && {
-          onPress: () => handlePress({ type: 'click' }),
-          onKeyDown: handlePress,
-        })
-      }
+      {...wrapperProps}
       {...touchableProps}
+      style={wrapperStyles}
     >
       <Icon
         debugName={debugName}
         name={icon ?? name}
-        style={getStyles('icon')}
         {...iconProps}
+        style={iconStyles}
       />
       {children}
     </WrapperComponent>
   )
 }
 
-ActionIcon.defaultProps = defaultProps
+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)

package/src/components/ActionIcon/styles.ts

@@ -1,12 +1,8 @@
-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/ActionIcon/types.ts

@@ -0,0 +1,15 @@
+import { ComponentCommonProps } from '../../types'
+import { TouchableProps } from '../Touchable'
+import { ActionIconComposition } from './styles'
+import { IconProps } from '../Icon'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+export type ActionIconProps =
+  Omit<TouchableProps, 'style'> &
+  ComponentCommonProps &
+  {
+    iconProps?: Partial<IconProps>
+    icon?: AppIcon
+    name?: AppIcon
+    style?: StyledProp<ActionIconComposition>
+  }

package/src/components/ActivityIndicator/index.tsx

@@ -1,75 +1,54 @@
 import { View } from '../View'
-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'
+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'
 
 export * from './styles'
+export * from './types'
 
-/** * 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,
-  }
-
+export const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>((props, ref) => {
   const {
-    style = {},
-    styles = {},
+    style,
     component: Component,
-    variants = [],
-    responsiveVariants = {},
     size,
-    ...props
-  } = allProps
+    ...rest
+  } = {
+    ...ActivityIndicator.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:ActivityIndicator', typeof ActivityIndicatorPresets>(
-    'u:ActivityIndicator',
-    {
-      responsiveVariants,
-      variants,
-      styles,
-      rootElement: 'wrapper',
-    },
-  )
+  const styles = useStylesFor(ActivityIndicator.styleRegistryName, style)
 
   const _size = React.useMemo(() => {
     return TypeGuards.isNumber(size) ? {
       width: size,
       height: size,
-    } : {}
+    } : null
   }, [size])
 
   return (
-    <View css={[variantStyles.wrapper, _size, style]}>
-      <Component
-        ref={ref}
-        css={[variantStyles.wrapper, _size, style]}
-        {...props}
-      />
-    </View>
+    <Component
+      ref={ref}
+      {...rest}
+      style={[styles.wrapper, _size]}
+    />
   )
-}) as ComponentWithDefaultProps<ActivityIndicatorProps>
+}) 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
+}
 
 ActivityIndicator.defaultProps = {
-  component: View as ActivityIndicatorProps['component'],
+  component: View,
   size: null,
-}
+} as Partial<ActivityIndicatorProps>
+
+WebStyleRegistry.registerComponent(ActivityIndicator)

package/src/components/ActivityIndicator/styles.ts

@@ -1,7 +1 @@
-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/ActivityIndicator/types.ts

@@ -0,0 +1,12 @@
+import React from 'react'
+import { StyledProp } from '@codeleap/styles'
+import { ComponentCommonProps } from '../../types'
+import { ActivityIndicatorComposition } from './styles'
+
+export type ActivityIndicatorProps =
+  ComponentCommonProps &
+  {
+    style?: StyledProp<ActivityIndicatorComposition>
+    component?: React.ComponentType<Omit<ActivityIndicatorProps & { ref?: React.Ref<HTMLDivElement> }, 'component'>>
+    size?: number
+  }

package/src/components/Badge/index.tsx

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

package/src/components/Badge/styles.ts

@@ -1,15 +1,5 @@
-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 
-})))
+export type BadgeComposition = `${BadgeParts}:${BadgeStates}` | BadgeParts

package/src/components/Badge/types.ts

@@ -0,0 +1,28 @@
+import { TextProps } from '../Text'
+import { ViewProps } from '../View'
+import { BadgeComposition } from './styles'
+import { ComponentCommonProps } from '../../types'
+import { StyledProp } from '@codeleap/styles'
+
+export type BadgeProps =
+  Omit<ViewProps, 'style'> &
+  ComponentCommonProps &
+  {
+    style?: StyledProp<BadgeComposition>
+    maxCount?: number
+    minCount?: number
+    debugName?: string
+    innerWrapperProps?: Partial<ViewProps>
+    textProps?: Partial<TextProps>
+    getBadgeContent?: (props: BadgeContent) => string
+    renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
+    disabled?: boolean
+    badge?: number | boolean
+  }
+
+export type BadgeContent = BadgeProps & { count: number }
+
+export type BadgeComponentProps = {
+  badge?: BadgeProps['badge']
+  badgeProps?: Partial<BadgeProps>
+}