@codeleap/web 3.24.2 → 3.25.0

package/src/components/Switch/index.tsx

@@ -1,65 +1,48 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
-import * as React from 'react'
-import { ComponentVariants, useDefaultComponentStyle, StylesOf, PropsOf } from '@codeleap/common'
-import { View } from '../View'
-import { SwitchPresets, SwitchComposition } from './styles'
-import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
-import { useAnimatedVariantStyles } from '../..'
+import React from 'react'
+import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
+import { useAnimatedVariantStyles } from '../../lib'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { motion } from 'framer-motion'
+import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { SwitchProps } from './types'
 
 export * from './styles'
-
-export type SwitchProps = Pick<
-  InputBaseProps,
-  'debugName' | 'disabled' | 'label'
-> & {
-  styles?: StylesOf<SwitchComposition>
-  value: boolean
-  onValueChange: (value: boolean) => void
-  onChange?: (value: boolean) => void
-  style?: PropsOf<typeof View>['style']
-  switchOnLeft?: boolean
-} & ComponentVariants<typeof SwitchPresets>
+export * from './types'
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
 export const Switch = (props: SwitchProps) => {
   const {
     inputBaseProps,
-    others,
-  } = selectInputBaseProps(props)
+    others: switchProps,
+  } = selectInputBaseProps({
+    ...Switch.defaultProps,
+    ...props,
+  })
 
   const {
-    responsiveVariants = {},
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     debugName,
     onValueChange,
     onChange,
     switchOnLeft,
-  } = others
+  } = switchProps
 
-  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
-    responsiveVariants,
-    variants,
-    styles,
-    rootElement: 'wrapper',
-  })
+  const styles = useStylesFor(Switch.styleRegistryName, style)
 
   const trackAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
+        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
       }
-      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
+      const style = value ? styles['track:on'] : styles['track:off']
 
       return {
         ...style,
@@ -70,15 +53,15 @@ export const Switch = (props: SwitchProps) => {
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
+        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
       }
-      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
+      const style = value ? styles['thumb:on'] : styles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
@@ -87,7 +70,11 @@ export const Switch = (props: SwitchProps) => {
     dependencies: [value, disabled],
   })
 
-  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
+  // @ts-expect-error icss type
+  const _switchOnLeft = switchOnLeft ?? styles.__props?.switchOnLeft
+
+  const thumbStyles = mergeStyles([styles.thumb, disabled && styles['thumb:disabled']])
+  const trackStyles = mergeStyles([styles.track, disabled && styles['track:disabled']])
 
   const handleChange = (e) => {
     if (disabled) return
@@ -97,41 +84,43 @@ export const Switch = (props: SwitchProps) => {
     }
   }
 
-  return <InputBase
-    {...inputBaseProps}
-    debugName={debugName}
-    styles={{
-      ...variantStyles,
-      innerWrapper: [
-        variantStyles.innerWrapper,
-      ],
-    }}
-    order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
-    style={style}
-    disabled={disabled}
-    noError
-  >
-    <motion.div
-      css={[
-        variantStyles.track,
-        disabled && variantStyles['track:disabled'],
-      ]}
-      initial={false}
-      animate={trackAnimation}
-      transition={variantStyles['track:transition']}
-      onClick={handleChange}
-      onKeyDown={handleChange}
-      tabIndex={0}
+  return (
+    <InputBase
+      {...inputBaseProps}
+      debugName={debugName}
+      style={styles}
+      order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
+      disabled={disabled}
+      noError
     >
       <motion.div
-        css={[
-          variantStyles.thumb,
-          disabled && variantStyles['thumb:disabled'],
-        ]}
+        style={trackStyles}
         initial={false}
-        animate={thumbAnimation}
-        transition={variantStyles['thumb:transition']}
-      />
-    </motion.div>
-  </InputBase>
+        animate={trackAnimation}
+        transition={styles['track:transition']}
+        onClick={handleChange}
+        onKeyDown={handleChange}
+        tabIndex={0}
+      >
+        <motion.div
+          style={thumbStyles}
+          initial={false}
+          animate={thumbAnimation}
+          transition={styles['thumb:transition']}
+        />
+      </motion.div>
+    </InputBase>
+  )
 }
+
+Switch.styleRegistryName = 'Switch'
+Switch.elements = [...InputBase.elements, 'track', 'thumb', '__props']
+Switch.rootElement = 'wrapper'
+
+Switch.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Switch as (props: StyledComponentProps<SwitchProps, typeof styles>) => IJSX
+}
+
+Switch.defaultProps = {} as Partial<SwitchProps>
+
+WebStyleRegistry.registerComponent(Switch)

package/src/components/Switch/styles.ts

@@ -1,8 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'track' | 'thumb'
-export type SwitchParts = InputBaseParts | AnimatableParts 
+export type SwitchParts = InputBaseParts | AnimatableParts
 
 export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
 
@@ -14,7 +13,3 @@ export type SwitchComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${SwitchAnimationStates}`
   | '__props'
-
-const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
-
-export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))

package/src/components/Switch/types.ts

@@ -0,0 +1,13 @@
+import { StyledProp } from '@codeleap/styles'
+import { InputBaseProps } from '../InputBase'
+import { SwitchComposition } from './styles'
+
+export type SwitchProps = 
+  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> & 
+  {
+    style?: StyledProp<SwitchComposition>
+    value: boolean
+    onValueChange: (value: boolean) => void
+    onChange?: (value: boolean) => void
+    switchOnLeft?: boolean
+  }

package/src/components/Tag/index.tsx

@@ -1,35 +1,24 @@
 import React from 'react'
-import { TypeGuards, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
-import { TagParts, TagPresets } from './styles'
+import { TypeGuards } from '@codeleap/common'
+import { TagParts } from './styles'
 import { TagProps } from './types'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { View } from '../View'
 import { Badge } from '../Badge'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, mergeStyles, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-const defaultProps: Partial<TagProps> = {
-  debugName: 'Tag component',
-  disabled: false,
-}
-
 export const Tag = (props: TagProps) => {
-  const allProps = {
-    ...Tag.defaultProps,
-    ...props,
-  }
-
   const {
-    variants,
     rightComponent,
     leftComponent,
-    responsiveVariants,
-    styles,
     style,
-    css,
     leftIcon,
     text,
     textProps,
@@ -44,16 +33,14 @@ export const Tag = (props: TagProps) => {
     onPress,
     disabled,
     ...touchableProps
-  } = allProps
+  } = {
+    ...Tag.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:Tag', typeof TagPresets>('u:Tag', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  const styles = useStylesFor(Tag.styleRegistryName, style)
 
-  const leftBadgeStyles = useNestedStylesByKey('leftBadge', variantStyles)
-  const rightBadgeStyles = useNestedStylesByKey('rightBadge', variantStyles)
+  const compositionStyles = useCompositionStyles(['rightBadge', 'leftBadge'], styles)
 
   const isPressable = TypeGuards.isFunction(onPress)
 
@@ -61,29 +48,24 @@ export const Tag = (props: TagProps) => {
 
   const wrapperProps = isPressable ? { onPress, ...touchableProps } : touchableProps
 
-  const getStylesByKey = (styleKey: TagParts) => ([
-    variantStyles?.[styleKey],
-    isPressable && variantStyles[`${styleKey}:pressable`],
-    disabled && variantStyles[`${styleKey}:disabled`],
+  const getStylesByKey = (styleKey: TagParts) => mergeStyles([
+    styles?.[styleKey],
+    isPressable && styles[`${styleKey}:pressable`],
+    disabled && styles[`${styleKey}:disabled`],
   ])
 
-  const wrapperStyles = React.useMemo(() => ([
-    getStylesByKey('wrapper'),
-    css,
-    style,
-  ]), [variantStyles, disabled, isPressable, style])
-
-  const textStyles = React.useMemo(() => getStylesByKey('text'), [variantStyles, disabled, isPressable])
-  const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [variantStyles, disabled, isPressable])
-  const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [variantStyles, disabled, isPressable])
+  const wrapperStyles = React.useMemo(() => getStylesByKey('wrapper'), [styles, disabled, isPressable, style])
+  const textStyles = React.useMemo(() => getStylesByKey('text'), [styles, disabled, isPressable])
+  const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [styles, disabled, isPressable])
+  const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [styles, disabled, isPressable])
 
   return (
-    <Wrapper css={wrapperStyles} disabled={disabled} {...wrapperProps}>
+    <Wrapper disabled={disabled} {...wrapperProps} style={wrapperStyles}>
       {leftComponent}
       {leftBadge && (
         <Badge
           debugName={`${touchableProps?.debugName}:leftBadge`}
-          styles={leftBadgeStyles}
+          style={compositionStyles.leftBadge}
           badge={leftBadge}
           disabled={disabled}
           {...leftBadgeProps}
@@ -92,19 +74,19 @@ export const Tag = (props: TagProps) => {
       {!TypeGuards.isNil(leftIcon) && (
         <Icon
           debugName={`${touchableProps?.debugName}:leftIcon`}
-          css={leftIconStyles}
+          style={leftIconStyles}
           name={leftIcon}
           {...leftIconProps}
         />
       )}
 
-      {TypeGuards.isString(text) ? <Text text={text} css={textStyles} {...textProps} /> : text}
+      {TypeGuards.isString(text) ? <Text text={text} style={textStyles} {...textProps} /> : text}
       {children}
 
       {!TypeGuards.isNil(rightIcon) && (
         <Icon
           debugName={`${touchableProps?.debugName}:rightIcon`}
-          css={rightIconStyles}
+          style={rightIconStyles}
           name={rightIcon}
           {...rightIconProps}
         />
@@ -112,7 +94,7 @@ export const Tag = (props: TagProps) => {
       {rightBadge && (
         <Badge
           debugName={`${touchableProps?.debugName}:rightBadge`}
-          styles={rightBadgeStyles}
+          style={compositionStyles.rightBadge}
           badge={rightBadge}
           disabled={disabled}
           {...rightBadgeProps}
@@ -123,4 +105,17 @@ export const Tag = (props: TagProps) => {
   )
 }
 
-Tag.defaultProps = defaultProps
+Tag.styleRegistryName = 'Tag'
+Tag.elements = ['wrapper', 'text', 'leftIcon', 'rightIcon', 'leftBadge', 'rightBadge']
+Tag.rootElement = 'wrapper'
+
+Tag.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Tag as (props: StyledComponentProps<TagProps, typeof styles>) => IJSX
+}
+
+Tag.defaultProps = {
+  debugName: 'Tag component',
+  disabled: false,
+} as Partial<TagProps>
+
+WebStyleRegistry.registerComponent(Tag)

package/src/components/Tag/styles.ts

@@ -1,9 +1,8 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
 export type TagStates = 'pressable' | 'disabled'
 
-type TagBadgeParts = 
+type TagBadgeParts =
   | `leftBadge${Capitalize<BadgeComposition>}`
   | `rightBadge${Capitalize<BadgeComposition>}`
 
@@ -14,10 +13,3 @@ export type TagParts =
   | 'rightIcon'
 
 export type TagComposition = TagParts | TagBadgeParts | `${TagParts}:${TagStates}`
-
-const createTagStyle = createDefaultVariantFactory<TagComposition>()
-
-export const TagPresets = includePresets((styles) => createTagStyle(() => ({
-  wrapper: styles,
-})),
-)

package/src/components/Tag/types.ts

@@ -1,6 +1,6 @@
-import { StylesOf, ComponentVariants, IconPlaceholder } from '@codeleap/common'
+import { AppIcon, StyledProp } from '@codeleap/styles'
 import { ReactElement } from 'react'
-import { TagComposition, TagPresets } from './styles'
+import { TagComposition } from './styles'
 import { BadgeProps } from '../Badge'
 import { TextProps } from '../Text'
 import { IconProps } from '../Icon'
@@ -8,17 +8,17 @@ import { ComponentCommonProps } from '../../types'
 import { TouchableProps } from '../Touchable'
 import { ViewProps } from '../View'
 
-export type TagProps = 
-  Omit<ViewProps<'div'>, 'styles' | 'variants' | 'responsiveVariants'> &
-  Omit<TouchableProps, 'styles' | 'variants' | 'responsiveVariants'> &
-  ComponentVariants<typeof TagPresets> &
-  ComponentCommonProps & {
-    styles?: StylesOf<TagComposition>
+export type TagProps =
+  Omit<ViewProps, 'style'> &
+  Omit<TouchableProps, 'style'> &
+  ComponentCommonProps &
+  {
+    style?: StyledProp<TagComposition>
     text?: TextProps<'p'>['text'] | ReactElement
     textProps?: Partial<TextProps<'p'>>
-    leftIcon?: IconPlaceholder
+    leftIcon?: AppIcon
     leftIconProps?: Partial<IconProps>
-    rightIcon?: IconPlaceholder
+    rightIcon?: AppIcon
     rightIconProps?: Partial<IconProps>
     leftComponent?: ReactElement
     rightComponent?: ReactElement

package/src/components/Text/index.tsx

@@ -1,38 +1,21 @@
-import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
 import { motion } from 'framer-motion'
-import React, { ElementType } from 'react'
-import { TextPresets } from './styles'
+import React, { ElementType, forwardRef } from 'react'
 import { TextProps } 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'
 
-const defaultProps: Partial<TextProps<'p'>> = {
-  debugName: 'Text component',
-  component: 'p',
-  debounce: null,
-  pressDisabled: false,
-  animated: false,
-  animatedProps: {},
-}
-
-export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
-  const allProps = {
-    ...Text.defaultProps,
-    ...textProps,
-  }
-
+export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref) => {
   const {
-    variants = [],
-    responsiveVariants = {},
-    styles = {},
-    style = {},
-    css,
-    text = null,
+    style,
+    text,
     children,
     component,
     debugName,
-    msg = null,
     onPress,
     debounce,
     pressDisabled,
@@ -40,18 +23,16 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     animated,
     animatedProps,
     ...props
-  } = allProps
+  } = {
+    ...Text.defaultProps,
+    ...textProps,
+  }
 
-  const Component = animated ? (motion?.[component] || motion.p) : (component || 'p')
+  const styles = useStylesFor(Text.styleRegistryName, style)
 
-  const pressedRef = React.useRef(false)
+  const Component: ElementType = animated ? (motion?.[component as string] || motion.p) : (component || 'p')
 
-  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
-    responsiveVariants,
-    variants,
-    styles,
-    rootElement: 'text',
-  })
+  const pressedRef = React.useRef(false)
 
   const isPressable = (TypeGuards.isFunction(onPress) || TypeGuards.isFunction(onClick)) && !pressDisabled
 
@@ -80,31 +61,39 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     }
   }
 
-  const _styles = React.useMemo(() => ([
-    variantStyles.text,
-    disabled && variantStyles['text:disabled'],
-    css,
-    style,
-  ]), [css, style, disabled])
-
   const pressProps = isPressable ? {
     onClick: disabled ? null : _onPress,
   } : {}
 
-  const componentProps: any = {
+  const componentProps: AnyRecord = {
     ...props,
     ...pressProps,
-    ...animatedProps
+    ...animatedProps,
   }
 
   return (
-    <Component
-      css={_styles}
-      {...componentProps}
-    >
+    <Component {...componentProps} ref={ref} css={[styles.text, disabled && styles['text:disabled']]}>
       {text || children}
     </Component>
   )
+}) as StyledComponentWithProps<TextProps>
+
+Text.styleRegistryName = 'Text'
+Text.elements = ['text']
+Text.rootElement = 'text'
+
+Text.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Text as <T extends ElementType = 'p'>(props: StyledComponentProps<TextProps<T>, typeof styles>) => IJSX
 }
 
-Text.defaultProps = defaultProps
+Text.defaultProps = {
+  debugName: 'Text component',
+  component: 'p',
+  text: null,
+  debounce: null,
+  pressDisabled: false,
+  animated: false,
+  animatedProps: {},
+} as Partial<TextProps>
+
+WebStyleRegistry.registerComponent(Text)

package/src/components/Text/styles.ts

@@ -1,9 +1 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
-
 export type TextComposition = 'text' | 'text:disabled'
-
-const createTextStyle = createDefaultVariantFactory<TextComposition>()
-
-export const TextPresets = includePresets((styles) => createTextStyle(() => ({ 
-  text: styles 
-})))

package/src/components/Text/types.ts

@@ -1,14 +1,14 @@
-import { StylesOf, ComponentVariants } from '@codeleap/common'
-import { MotionProps } from 'framer-motion'
 import { ComponentPropsWithoutRef, ElementType } from 'react'
-import { TextComposition, TextPresets } from './styles'
+import { TextComposition } from './styles'
+import { AnyRecord, StyledProp } from '@codeleap/styles'
+import { MotionProps } from 'framer-motion'
 
-export type TextProps<T extends ElementType> = ComponentPropsWithoutRef<T> &
-  ComponentVariants<typeof TextPresets> & {
-    component?: T
+export type TextProps<T extends ElementType = 'p'> =
+  Omit<ComponentPropsWithoutRef<T>, 'style'> &
+  {
+    component?: ElementType<AnyRecord>
     text?: string
-    styles?: StylesOf<TextComposition>
-    msg?: string
+    style?: StyledProp<TextComposition>
     debugName?: string
     debounce?: number
     pressDisabled?: boolean