@codeleap/web 3.24.3 → 4.0.0

package/src/components/Button/index.tsx

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

package/src/components/Button/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type ButtonStates = 'disabled' | 'selected'
@@ -12,7 +11,3 @@ export type ButtonParts =
   | `loader${Capitalize<ActivityIndicatorComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
-
-const createButtonStyle = createDefaultVariantFactory<ButtonComposition>()
-
-export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Button/types.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+import { AnyFunction } from '@codeleap/common'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { TouchableProps } from '../Touchable'
+import { ActivityIndicatorProps } from '../ActivityIndicator'
+import { ButtonComposition } from './styles'
+import { ComponentCommonProps } from '../../types'
+
+export type ButtonProps =
+  Omit<TouchableProps, 'style'> &
+  ComponentCommonProps &
+  {
+    text?: string
+    rightIcon?: AppIcon
+    icon?: AppIcon
+    onPress?: AnyFunction
+    style?: StyledProp<ButtonComposition>
+    loading?: boolean
+    loadingShowText?: boolean
+    debugName: string
+    debounce?: number
+    selected?: boolean
+    children?: React.ReactNode
+    loaderProps?: Partial<ActivityIndicatorProps>
+  }

package/src/components/Checkbox/index.tsx

@@ -1,93 +1,61 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  PropsOf,
-  IconPlaceholder,
-} from '@codeleap/common'
-import { View } from '../View'
-import { CheckboxPresets, CheckboxComposition } from './styles'
-import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../..'
 import { Icon } from '../Icon'
 import { motion } from 'framer-motion'
-import { ComponentCommonProps } from '../../types/utility'
+import { CheckboxProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, AppIcon, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { CheckboxParts } from './styles'
+import { TypeGuards } from '@codeleap/common'
 
 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>
+export * from './types'
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
-const defaultProps: Partial<CheckboxProps> = {
-  checkIcon: 'check' as IconPlaceholder,
-}
-
 export const Checkbox = (props: CheckboxProps) => {
   const {
     inputBaseProps,
-    others,
-  } = selectInputBaseProps(props)
+    others: checkboxProps,
+  } = selectInputBaseProps({
+    ...Checkbox.defaultProps,
+    ...props,
+  })
 
   const {
-    responsiveVariants = {},
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     debugName,
     onValueChange,
     checkboxOnLeft,
     checkIcon,
-  } = others
+  } = checkboxProps
 
-  const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
-    responsiveVariants,
-    variants,
-    styles,
-    rootElement: 'wrapper',
-  })
+  const styles = useStylesFor(Checkbox.styleRegistryName, style)
 
   const boxAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['box:disabled-checked'] : variantStyles['box:disabled-unchecked']
+        disabledStyle = value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
       }
-      const style = value ? variantStyles['box:checked'] : variantStyles['box:unchecked']
+      const style = value ? styles['box:checked'] : styles['box:unchecked']
 
       return {
         ...style,
         ...disabledStyle,
       }
-
     },
     dependencies: [value, disabled],
   })
 
   const checkmarkWrapperAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: [
       'checkmarkWrapper:unchecked',
       'checkmarkWrapper:disabled',
@@ -99,69 +67,87 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['checkmarkWrapper:disabled-checked'] : variantStyles['checkmarkWrapper:disabled-unchecked']
+        disabledStyle = value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
       }
-      const style = value ? variantStyles['checkmarkWrapper:checked'] : variantStyles['checkmarkWrapper:unchecked']
+      const style = value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
       return {
         ...style,
         ...disabledStyle,
       }
-
     },
     dependencies: [value, disabled],
   })
 
-  const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
+  // @ts-expect-error __props is ICSS
+  const _checkboxOnLeft = checkboxOnLeft ?? styles?.__props?.checkboxOnLeft
 
   const handleChange = (e) => {
-    const isSpaceBarClick = e?.keyCode === 32
     if (disabled) return
-    if (onValueChange && (e?.type === 'click' || e?.keyCode === 13 || isSpaceBarClick || e?.key === 'Enter')) onValueChange?.(!value)
+    if (!TypeGuards.isFunction(onValueChange)) return
+
+    const isSpaceBarClick = e?.keyCode === 32
+    const isEnterKey = e?.key === 'Enter'
+    const isClick = e?.type === 'click'
+
+    if (isClick || e?.keyCode === 13 || isSpaceBarClick || isEnterKey) {
+      onValueChange?.(!value)
+    }
   }
 
-  return <InputBase
-    {...inputBaseProps}
-    debugName={debugName}
-    styles={{
-      ...variantStyles,
-      innerWrapper: [
-        variantStyles.innerWrapper,
-      ],
-    }}
-    order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
-    style={style}
-  >
-    <motion.div
-      css={[
-        variantStyles.box,
-        disabled && variantStyles['box:disabled'],
-      ]}
-      initial={false}
-      animate={boxAnimation}
-      transition={variantStyles['box:transition']}
-      onClick={handleChange}
-      onKeyDown={handleChange}
-      tabIndex={0}
+  const getStyles = (key: CheckboxParts) => mergeStyles([
+    styles[key],
+    disabled ? styles[key + ':disabled'] : null,
+  ])
+
+  const componentStyles = {
+    box: getStyles('box'),
+    checkmarkWrapper: getStyles('checkmarkWrapper'),
+    checkmark: getStyles('checkmark'),
+  }
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      debugName={debugName}
+      style={styles}
+      order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
     >
       <motion.div
-        css={[
-          variantStyles.checkmarkWrapper,
-          disabled && variantStyles['checkmarkWrapper:disabled'],
-        ]}
+        style={componentStyles.box}
         initial={false}
-        animate={checkmarkWrapperAnimation}
-        transition={variantStyles['checkmarkWrapper:transition']}
-
+        animate={boxAnimation}
+        transition={styles['box:transition']}
+        onClick={handleChange}
+        onKeyDown={handleChange}
+        tabIndex={0}
       >
-        <Icon
-          debugName={debugName}
-          name={checkIcon as any}
-          css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
-          style={variantStyles.checkmark}
-        />
+        <motion.div
+          style={componentStyles.checkmarkWrapper}
+          initial={false}
+          animate={checkmarkWrapperAnimation}
+          transition={styles['checkmarkWrapper:transition']}
+        >
+          <Icon
+            debugName={debugName}
+            name={checkIcon as AppIcon}
+            style={componentStyles.checkmark}
+          />
+        </motion.div>
       </motion.div>
-    </motion.div>
-  </InputBase>
+    </InputBase>
+  )
 }
 
-Checkbox.defaultProps = defaultProps
+Checkbox.styleRegistryName = 'Checkbox'
+Checkbox.elements = [...InputBase.elements, 'checkmarkWrapper', 'checkmark', 'box', '__props']
+Checkbox.rootElement = 'wrapper'
+
+Checkbox.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Checkbox as (props: StyledComponentProps<CheckboxProps, typeof styles>) => IJSX
+}
+
+Checkbox.defaultProps = {
+  checkIcon: 'check' as AppIcon,
+} as Partial<CheckboxProps>
+
+WebStyleRegistry.registerComponent(Checkbox)

package/src/components/Checkbox/styles.ts

@@ -1,7 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'checkmarkWrapper' | 'box'
+
 export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
 
 export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
@@ -14,7 +14,3 @@ export type CheckboxComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${CheckboxAnimationStates}`
   | '__props'
-
-const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
-
-export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))

package/src/components/Checkbox/types.ts

@@ -0,0 +1,15 @@
+import { CheckboxComposition } from './styles'
+import { InputBaseProps } from '../InputBase'
+import { ComponentCommonProps } from '../../types'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+export type CheckboxProps =
+  Pick<InputBaseProps, 'disabled' | 'label'> &
+  ComponentCommonProps &
+  {
+    style?: StyledProp<CheckboxComposition>
+    value: boolean
+    onValueChange: (value: boolean) => void
+    checkboxOnLeft?: boolean
+    checkIcon?: AppIcon
+  }

package/src/components/Collapse/index.tsx

@@ -1,91 +1,49 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
+import { CollapseProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { motion } from 'framer-motion'
 
-import { capitalize, StylesOf, TypeGuards } from '@codeleap/common'
-import { Scroll } from '../Scroll'
-import { View, ViewProps } from '../View'
-import { ElementType } from 'react'
-import { NativeHTMLElement } from '../../types'
+export * from './styles'
+export * from './types'
 
-export type CollapseAxis = 'horizontal' | 'vertical'
-
-export type GetCollapseStylesArgs = {
-  direction?: CollapseAxis
-  value: string | number
-   animation?: string
-   scroll ?: boolean
-}
-
-type CollapseComposition = 'wrapper' | 'wrapper:open' |'wrapper:hidden'
-
-export function getCollapseStyles<
-    TCSS = React.CSSProperties,
-    Return extends Record<CollapseComposition, TCSS> = Record<CollapseComposition, TCSS>
->(
-  args: GetCollapseStylesArgs,
-): Return {
+export const Collapse = (props: CollapseProps) => {
   const {
-    direction = 'vertical',
-    value,
-    animation = '0.3s ease',
-    scroll = false,
-
-  } = args
-
-  const dimension = direction === 'horizontal' ? 'width' : 'height'
-  const capitalizedDimension = capitalize(dimension)
-  const overflowOpen = scroll ? 'auto' : 'hidden'
-  const axis = direction === 'vertical' ? 'Y' : 'X'
-  return {
-    'wrapper:closed': {
-      [`max${capitalizedDimension}`]: '0px',
-      [`overflow${axis}`]: 'hidden',
-    },
-    'wrapper:open': {
-      [`max${capitalizedDimension}`]: TypeGuards.isString(value) ? value : `${value}px`,
-      [`overflow${axis}`]: overflowOpen,
-    },
-    wrapper: {
-      height: 'auto',
-      transition: `max-${dimension} ${animation}`,
-    },
-  } as unknown as Return
-}
-
-export type CollapseProps<T extends NativeHTMLElement = 'div'> = ViewProps<T> & {
-    open: boolean
-    scroll?: boolean
-    size?: string | number
-    direction?: CollapseAxis
-    animation?: string
-    styles: StylesOf<CollapseComposition>
+    open,
+    children,
+    style,
+    ...rest
+  } = {
+    ...Collapse.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(Collapse.styleRegistryName, style)
+
+  return (
+    <motion.div
+      initial={false}
+      animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
+      transition={{ duration: 0.2 }}
+      {...rest}
+      style={{
+        ...styles.wrapper,
+        ...(open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']),
+      }}
+    >
+      {children}
+    </motion.div>
+  )
 }
 
-export const Collapse = ({
-  open,
-  size = 1000,
-  scroll = false,
-  children,
-  direction,
-  animation,
-  styles,
-  ...props
-}:CollapseProps) => {
+Collapse.styleRegistryName = 'Collapse'
+Collapse.elements = ['wrapper']
+Collapse.rootElement = 'wrapper'
 
-  const Component = scroll ? Scroll : View
-  const _styles = getCollapseStyles({
-    value: size,
-    direction,
-    animation,
-  })
-  // @ts-ignore
-  return <Component css={[
-    _styles.wrapper,
-    open ? _styles['wrapper:open'] : _styles['wrapper:closed'],
-    styles.wrapper,
-  ]} {...props}>
-    {children}
-  </Component>
+Collapse.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Collapse as (props: StyledComponentProps<CollapseProps, typeof styles>) => IJSX
 }
 
-export * from './styles'
+Collapse.defaultProps = {} as Partial<CollapseProps>
+
+WebStyleRegistry.registerComponent(Collapse)

package/src/components/Collapse/styles.ts

@@ -1,8 +1,5 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
-import { ViewComposition } from "../View"
+type CollapseState = 'open' | 'closed'
 
-export type CollapseComposition = ViewComposition
+type CollapseParts = 'wrapper'
 
-const createCollapseStyle = createDefaultVariantFactory<CollapseComposition>()
-
-export const CollapsePresets = includePresets((styles) => createCollapseStyle(() => ({ wrapper: styles })))
+export type CollapseComposition = CollapseParts | `${CollapseParts}:${CollapseState}`

package/src/components/Collapse/types.ts

@@ -0,0 +1,11 @@
+import { StyledProp } from '@codeleap/styles'
+import { MotionProps } from 'framer-motion'
+import { CollapseComposition } from './styles'
+
+export type CollapseProps =
+  Omit<MotionProps, 'style'> &
+  {
+    open: boolean
+    style?: StyledProp<CollapseComposition>
+    children?: React.ReactNode
+  }