@codeleap/web 3.24.3 → 4.0.0

package/src/components/Icon/index.tsx

@@ -1,57 +1,55 @@
-/** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react'
-import { CSSInterpolation } from '@emotion/css'
-import {
-  ComponentVariants,
-  IconPlaceholder,
-  IconStyles,
-  useDefaultComponentStyle,
-  useCodeleapContext,
-} from '@codeleap/common'
 import { View } from '../View'
-import { ComponentCommonProps } from '../../types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, AppTheme, IJSX, StyledComponentProps, Theme, useTheme } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { IconProps } from './types'
 
 export * from './styles'
+export * from './types'
 
-export type IconProps = ComponentCommonProps & {
-  name: IconPlaceholder
-  style?: React.CSSProperties
-  size?: string | number
-  color?: string
-  renderEmptySpace?: boolean
-  forceStyle?: CSSObject | CSSInterpolation | React.CSSProperties
-  css?: CSSInterpolation | CSSInterpolation[]
-} & ComponentVariants<typeof IconStyles>
-
-const IconCP = ({ name, style, variants, renderEmptySpace, ...otherProps }:IconProps) => {
-  const { Theme, logger } = useCodeleapContext()
-  const Component = Theme?.icons?.[name]
-
-  const variantStyles = useDefaultComponentStyle('Icon', {
-    variants,
-    styles: {
-      icon: style,
-    },
-    rootElement: 'icon',
-  })
+export const Icon = (props:IconProps) => {
+  const {
+    name,
+    style,
+    renderEmptySpace,
+    ...otherProps
+  } = {
+    ...Icon.defaultProps,
+    ...props,
+  }
+
+  const theme = useTheme(store => store.current) as AppTheme<Theme>
+
+  const styles = useStylesFor(Icon.styleRegistryName, style)
+
+  const Component = theme?.icons?.[name]
 
   if (!name) {
-    const iconStyle = variantStyles.icon
-    return renderEmptySpace ? <View css={{
-      height: iconStyle.size ?? iconStyle.height,
-      width: iconStyle.size ?? iconStyle.width,
-    }}/> : null
-  }
+    const iconStyle = styles.icon as React.CSSProperties & { size: number }
 
-  if (!Component) {
-    logger.warn(
-      `Icon: No icon found in theme for name "${name}".`,
-      { props: { style, name, variants, variantStyles }},
-      'Component',
-    )
-    return null
+    return renderEmptySpace ? (
+      <View
+        style={{
+          height: iconStyle.size ?? iconStyle.height,
+          width: iconStyle.size ?? iconStyle.width,
+        }}
+      />
+    ) : null
   }
-  return <Component style={variantStyles.icon} {...otherProps}/>
+
+  if (!Component) return null
+
+  return <Component {...otherProps} style={styles.icon} />
 }
 
-export const Icon = IconCP as ((props: IconProps) => jsx.JSX.Element)
+Icon.styleRegistryName = 'Icon'
+Icon.elements = ['icon']
+Icon.rootElement = 'icon'
+
+Icon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Icon as (props: StyledComponentProps<IconProps, typeof styles>) => IJSX
+}
+
+Icon.defaultProps = {} as Partial<IconProps>
+
+WebStyleRegistry.registerComponent(Icon)

package/src/components/Icon/styles.ts

@@ -1,9 +1 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
-
 export type IconComposition = 'icon'
-
-const createIconStyle = createDefaultVariantFactory<IconComposition>()
-
-export const IconPresets = includePresets((styles) =>
-  createIconStyle(() => ({ icon: styles }))
-)

package/src/components/Icon/types.ts

@@ -0,0 +1,15 @@
+import { ComponentCommonProps } from '../../types'
+import { IconComposition } from './styles'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { CSSProperties } from 'react'
+
+export type IconProps = 
+  ComponentCommonProps & 
+  {
+    name: AppIcon
+    style?: StyledProp<IconComposition>
+    size?: string | number
+    color?: string
+    renderEmptySpace?: boolean
+    forceStyle?: CSSProperties
+  }

package/src/components/InputBase/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
 import React from 'react'
 import { TypeGuards, getRenderedComponent } from '@codeleap/common'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
@@ -7,95 +5,103 @@ import { View } from '../View'
 import { useInputBaseStyles } from './styles'
 import { InputBaseProps } from './types'
 import { Text } from '../Text'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 
 export * from './styles'
 export * from './utils'
 export * from './types'
 
-export const InputBaseDefaultOrder:InputBaseProps['order'] = [
+export const InputBaseDefaultOrder: InputBaseProps['order'] = [
   'label',
   'description',
   'innerWrapper',
   'error',
 ]
+
 const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <React.Fragment>{props.children}</React.Fragment>
 }
 
-export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref) => {
+export const InputBase = (props: InputBaseProps) => {
+  const allProps = {
+    ...InputBase.defaultProps,
+    ...props,
+  }
+
   const {
     children,
-    error = null,
+    error,
     label,
-    description = null,
-    leftIcon = null,
-    rightIcon = null,
-    styles,
+    description,
+    leftIcon,
+    rightIcon,
     wrapper,
     debugName,
     innerWrapper,
     focused,
-    innerWrapperProps = {},
-    wrapperProps = {},
-    disabled = false,
-    order = InputBaseDefaultOrder,
+    innerWrapperProps,
+    wrapperProps,
+    disabled,
+    order,
     style,
-    noError = false,
-    labelAsRow = false,
+    noError,
+    labelAsRow,
     innerWrapperRef,
     ...otherProps
-  } = props
+  } = allProps
 
   const WrapperComponent = wrapper || View
   const InnerWrapperComponent = innerWrapper || View
 
-  const _styles = useInputBaseStyles(props)
+  const styles = useInputBaseStyles(allProps)
 
   const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
-    // @ts-ignore
-    styles: _styles.leftIconStyles,
+    style: styles.leftIconStyles,
     disabled,
     debugName: `${debugName} left icon`,
   })
 
   const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
-    // @ts-ignore
-    styles: _styles.rightIconStyles,
+    style: styles.rightIconStyles,
     disabled,
     debugName: `${debugName} right icon`,
   })
 
-  const _label = TypeGuards.isString(label) ? <Text text={label} css={_styles.labelStyle}/> : label
+  const _label = TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle} /> : label
 
-  const _error = TypeGuards.isString(error) ? <Text text={error} css={_styles.errorStyle}/> : error
+  const _error = TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle} /> : error
 
-  const _description = TypeGuards.isString(description) ? <Text text={description} css={_styles.descriptionStyle}/> : description
+  const _description = TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle} /> : description
 
   const parts = {
-    label: labelAsRow ? <View css={_styles.labelRowStyle}>
-      {_label}
-      {_description}
-    </View> : _label,
-    description: labelAsRow ? null : _description,
-    innerWrapper: <InnerWrapperComponent ref={innerWrapperRef} css={[
-      _styles.innerWrapperStyle,
-    ]} {...innerWrapperProps}>
-      {_leftIcon}
-      {children}
-      {_rightIcon}
-    </InnerWrapperComponent>,
-    error: noError ? null : (
-      _error || <Text children={<React.Fragment>
-        &nbsp;
-      </React.Fragment>} css={_styles.errorStyle}/>
+    label: labelAsRow ? (
+      <View style={styles.labelRowStyle}>
+        {_label}
+        {_description}
+      </View>
+    ) : (
+      _label
     ),
+    description: labelAsRow ? null : _description,
+    innerWrapper:
+      <InnerWrapperComponent
+        ref={innerWrapperRef}
+        style={styles.innerWrapperStyle}
+        {...innerWrapperProps}
+      >
+        {_leftIcon}
+        {children}
+        {_rightIcon}
+      </InnerWrapperComponent>,
+    error: noError ? null : (_error || <Text children={<React.Fragment> &nbsp; </React.Fragment>} style={styles.errorStyle} />),
   }
 
   return (
     <WrapperComponent
-      css={[_styles.wrapperStyle, style]}
       {...otherProps}
       {...wrapperProps}
+      style={styles.wrapperStyle}
     >
       {
         order.map((key) => (
@@ -106,4 +112,27 @@ export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref)
       }
     </WrapperComponent>
   )
-})
+}
+
+InputBase.elements = [
+  'wrapper',
+  'innerWrapper',
+  'label',
+  'errorMessage',
+  'description',
+  'labelRow',
+  'icon',
+  'leftIcon',
+  'rightIcon',
+]
+
+InputBase.defaultProps = {
+  noError: false,
+  labelAsRow: false,
+  disabled: false,
+  order: InputBaseDefaultOrder,
+  rightIcon: null,
+  leftIcon: null,
+  description: null,
+  error: null,
+} as Partial<InputBaseProps>

package/src/components/InputBase/styles.ts

@@ -1,5 +1,6 @@
-import { TypeGuards, createDefaultVariantFactory, includePresets, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
-import { ActionIconComposition, ActionIconParts } from '../ActionIcon'
+import { TypeGuards } from '@codeleap/common'
+import { useCompositionStyles } from '@codeleap/styles'
+import { ActionIconParts } from '../ActionIcon'
 import { InputBaseProps } from './types'
 import { concatStyles, getIconStyles, iconStylesOf } from './utils'
 
@@ -24,86 +25,75 @@ export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconCompositio
 
 export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
 
-const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
-
-export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
-
 export const useInputBaseStyles = (props: InputBaseProps) => {
   const {
     focused,
     disabled,
     error,
-    styles,
+    style: styles,
   } = props
 
   const hasError = !TypeGuards.isNil(error)
 
-  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
-    rootElement: 'wrapper',
-    styles,
-  })
-
-  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
-  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
-  const _baseIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+  const compositionStyles = useCompositionStyles(['leftIcon', 'rightIcon', 'icon'], styles)
 
-  const baseIconStyles = getIconStyles(_baseIconStyles, { hasError, disabled, focused })
+  const baseIconStyles = getIconStyles(compositionStyles.icon, { hasError, disabled, focused })
 
-  const leftIconStylesCompose = getIconStyles(_leftIconStyles, { 
-    hasError, 
-    disabled: disabled || props?.leftIcon?.disabled, 
-    focused 
+  const leftIconStylesCompose = getIconStyles(compositionStyles.leftIcon, {
+    hasError,
+    disabled: disabled || props?.leftIcon?.disabled,
+    focused,
   })
 
-  const rightIconStylesCompose = getIconStyles(_rightIconStyles, { 
-    hasError, 
+  const rightIconStylesCompose = getIconStyles(compositionStyles.rightIcon, {
+    hasError,
     disabled: disabled || props?.rightIcon?.disabled,
-    focused 
+    focused,
   })
 
   const leftIconStyles = iconStylesOf(baseIconStyles, leftIconStylesCompose)
   const rightIconStyles = iconStylesOf(baseIconStyles, rightIconStylesCompose)
 
   const labelStyle = [
-    variantStyles.label,
-    focused && variantStyles['label:focus'],
-    hasError && variantStyles['label:error'],
-    disabled && variantStyles['label:disabled'],
+    styles.label,
+    focused && styles['label:focus'],
+    hasError && styles['label:error'],
+    disabled && styles['label:disabled'],
   ]
 
   const errorStyle = [
-    variantStyles.errorMessage,
-    focused && variantStyles['errorMessage:focus'],
-    hasError && variantStyles['errorMessage:error'],
-    disabled && variantStyles['errorMessage:disabled'],
+    styles.errorMessage,
+    focused && styles['errorMessage:focus'],
+    hasError && styles['errorMessage:error'],
+    disabled && styles['errorMessage:disabled'],
   ]
 
   const descriptionStyle = [
-    variantStyles.description,
-    focused && variantStyles['description:focus'],
-    hasError && variantStyles['description:error'],
-    disabled && variantStyles['description:disabled'],
+    styles.description,
+    focused && styles['description:focus'],
+    hasError && styles['description:error'],
+    disabled && styles['description:disabled'],
   ]
 
   const wrapperStyle = [
-    variantStyles.wrapper,
-    focused && variantStyles['wrapper:focus'],
-    error && variantStyles['wrapper:error'],
-    disabled && variantStyles['wrapper:disabled'],
+    styles.wrapper,
+    focused && styles['wrapper:focus'],
+    error && styles['wrapper:error'],
+    disabled && styles['wrapper:disabled'],
   ]
 
   const innerWrapperStyle = [
-    concatStyles(variantStyles.innerWrapper),
-    focused && variantStyles['innerWrapper:focus'],
-    hasError && variantStyles['innerWrapper:error'],
-    disabled && variantStyles['innerWrapper:disabled'],
+    concatStyles(Array.isArray(styles.innerWrapper) ? styles.innerWrapper : [styles.innerWrapper]),
+    focused && styles['innerWrapper:focus'],
+    hasError && styles['innerWrapper:error'],
+    disabled && styles['innerWrapper:disabled'],
   ]
 
   const labelRowStyle = [
-    variantStyles.labelRow,
-    focused && variantStyles['labelRow:focus'],
-    hasError && variantStyles['labelRow:error'],
-    disabled && variantStyles['labelRow:disabled'],
+    styles.labelRow,
+    focused && styles['labelRow:focus'],
+    hasError && styles['labelRow:error'],
+    disabled && styles['labelRow:disabled'],
   ]
 
   return {

package/src/components/InputBase/types.ts

@@ -1,9 +1,6 @@
-import { PropsOf } from '@codeleap/common'
-import { StylesOf } from '../../types'
+import { StylesOf } from '@codeleap/common'
 import { InputBaseComposition } from './styles'
-import { ActionIcon } from '../ActionIcon'
-
-type ActionIconProps = PropsOf<typeof ActionIcon>
+import { ActionIconComposition, ActionIconProps } from '../ActionIcon'
 
 type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
 
@@ -16,14 +13,29 @@ export type InputBaseProps = React.PropsWithChildren<{
   wrapperProps?: any
   innerWrapper?: React.FC<any>
   innerWrapperProps?: any
-  styles?: StylesOf<InputBaseComposition>
+  style?: StylesOf<InputBaseComposition>
   description?: React.ReactNode
   debugName: string
   focused?: boolean
   disabled?: boolean
   order?: OrderedParts[]
-  style?: any
   labelAsRow?: boolean
   noError?: boolean
   innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
 }>
+
+export type OmitDiff<T1, T2> = {
+  [K in Exclude<keyof T1, keyof T2>]: T1[K]
+} & {
+  [K in keyof T2]: T2[K]
+}
+
+export type InputBaseKey = keyof InputBaseProps
+
+export type IconStyles = StylesOf<ActionIconComposition>
+
+export type IconState = {
+  focused: boolean
+  hasError: boolean
+  disabled: boolean
+}

package/src/components/InputBase/utils.ts

@@ -1,27 +1,15 @@
-import { StylesOf } from '@codeleap/common'
-import { ActionIconComposition } from '../ActionIcon'
-import { InputBaseProps } from './types'
+import { IconState, IconStyles, InputBaseKey, InputBaseProps, OmitDiff } from './types'
 
-type OmitDiff<T1, T2> = {
-  [K in Exclude<keyof T1, keyof T2>]: T1[K]
-} & {
-  [K in keyof T2]: T2[K]
-}
-
-type InputBaseKey = keyof InputBaseProps
-
-export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
+export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style'>>(props: T): {
   inputBaseProps: InputBaseProps
   others: OmitDiff<T, T>
 } {
   const varList:InputBaseKey[] = [
     'label',
-
     'error',
     'innerWrapper',
     'leftIcon',
     'rightIcon',
-    // 'styles',
     'description',
     'wrapper',
     'children',
@@ -42,14 +30,6 @@ export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
   return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
 }
 
-type IconStyles = StylesOf<ActionIconComposition>
-
-type IconState = {
-  focused: boolean
-  hasError: boolean
-  disabled: boolean
-}
-
 export const getIconStyles = (obj: IconStyles, state: IconState) => ({
   icon: {
     ...obj.icon,
@@ -100,5 +80,5 @@ export const iconStylesOf = (baseStyles: IconStyles, styles: IconStyles) => ({
   'touchableWrapper:disabled': {
     ...baseStyles['touchableWrapper:disabled'],
     ...styles['touchableWrapper:disabled'],
-  }
+  },
 })

package/src/components/List/ListLayout.tsx

@@ -1,26 +1,16 @@
 import React from 'react'
-import { StylesOf, TypeGuards } from '@codeleap/common'
-import { ListComposition, ListParts } from './styles'
-import { ListProps } from './types'
 import { View } from '../View'
-import { UseInfiniteScrollReturn } from './useInfiniteScroll'
+import { ListLayoutProps, ListRefreshControlComponent } from './types'
+import { mergeStyles } from '@codeleap/styles'
 import { ActivityIndicator } from '../ActivityIndicator'
+import { ListParts } from './styles'
+import { TypeGuards } from '@codeleap/common'
 import { motion } from 'framer-motion'
 
-export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
-  variantStyles: StylesOf<ListComposition>
-  children?: React.ReactNode
-  showFooter?: boolean
-}
-
-type ListRefreshControlComponent = Partial<ListLayoutProps> & {
-  variantStyles: StylesOf<ListComposition>
-}
-
 const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
   const {
     refreshing,
-    variantStyles,
+    styles,
     refreshPosition,
     refreshControlProps,
     debugName,
@@ -30,19 +20,19 @@ const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
 
   return (
     <motion.div
-      css={[variantStyles?.refreshControl]}
       initial={false}
       animate={{
         opacity: refreshing ? 1 : 0,
-        top: refreshing ? refreshPosition : 0
+        top: refreshing ? refreshPosition : 0,
       }}
       {...refreshControlProps}
+      style={styles?.refreshControl}
     >
       <ActivityIndicator
         debugName={debugName + 'refresh-indicator'}
         size={refreshSize}
-        style={variantStyles.refreshControlIndicator}
         {...refreshControlIndicatorProps}
+        style={styles.refreshControlIndicator}
       />
     </motion.div>
   )
@@ -55,11 +45,10 @@ export const ListLayout = (props: ListLayoutProps) => {
     ListHeaderComponent,
     refresh,
     ListRefreshControlComponent = DefaultRefreshIndicator,
-    variantStyles,
+    styles,
     isEmpty,
     isLoading,
     placeholder = {},
-    style,
     children,
     debugName,
     isFetching,
@@ -69,33 +58,27 @@ export const ListLayout = (props: ListLayoutProps) => {
     showFooter = true,
   } = props
 
-  const getKeyStyle = React.useCallback((key: ListParts) => ([
-    variantStyles[key],
-    isLoading && variantStyles[`${key}:loading`],
-    isEmpty && variantStyles[`${key}:empty`],
-  ]), [isLoading, isEmpty])
+  const getKeyStyle = (key: ListParts) => mergeStyles([
+    styles[key],
+    isLoading ? styles[`${key}:loading`] : null,
+    isEmpty ? styles[`${key}:empty`] : null,
+  ])
+
+  const showIndicator = (isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent)
 
   return (
-    // @ts-ignore
-    <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
+    <View style={getKeyStyle('wrapper')} ref={scrollableRef}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
       {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}
 
-      <View css={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
-        {(!ListRefreshControlComponent || !refresh) ? null : (
-          <ListRefreshControlComponent
-            {...props}
-            variantStyles={variantStyles}
-          />
-        )}
+      <View style={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
+        {(!ListRefreshControlComponent || !refresh) ? null : <ListRefreshControlComponent {...props} styles={styles} />}
 
         {children}
       </View>
 
-      {((isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent))
-        ? <ListLoadingIndicatorComponent />
-        : null}
+      {showIndicator ? <ListLoadingIndicatorComponent /> : null}
 
       {(!!ListFooterComponent && showFooter) ? <ListFooterComponent {...props} /> : null}
     </View>