@codeleap/web 3.24.3 → 4.0.0

package/src/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import {
   Provider as TooltipContainer,
   Root as TooltipWrapper,
@@ -6,72 +6,30 @@ import {
   Portal as TooltipPortal,
   Content as TooltipContent,
   Arrow as TooltipArrow,
-  TooltipProps as PrimitiveTooltipProps,
-  TooltipContentProps,
-  TooltipPortalProps,
-  TooltipArrowProps,
-  TooltipTriggerProps,
-  TooltipProviderProps,
 } from '@radix-ui/react-tooltip'
-
-import { AnyFunction, ComponentVariants, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import { TooltipComposition, TooltipPresets } from './styles'
-import { ComponentCommonProps, ComponentWithDefaultProps } from '../../types/utility'
-import { View, ViewProps } from '../View'
+import { TypeGuards, useConditionalState } from '@codeleap/common'
+import { View } from '../View'
 import { useClickOutsideElement } from '../../lib'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { TooltipProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
 
-type TooltipComponentProps = {
-  contentProps?: TooltipContentProps
-  portalProps?: TooltipPortalProps
-  arrowProps?: TooltipArrowProps
-  triggerProps?: TooltipTriggerProps
-  providerProps?: TooltipProviderProps
-}
-
-export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
-  toggle?: AnyFunction
-  visible?: boolean
-  content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
-  triggerWrapper?: React.ElementType
-  triggerWrapperProps?: Partial<ViewProps<'div'>>
-  styles?: StylesOf<TooltipComposition>
-  side?: 'left' | 'right' | 'bottom' | 'top'
-  openOnPress?: boolean
-  openOnHover?: boolean
-  disabled?: boolean
-  delayDuration?: number
-  closeOnClickOutside?: boolean
-  onOpen?: AnyFunction
-  onClose?: AnyFunction
-  onValueChange?: (value: boolean) => void
-  onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void
-  onPress?: (value: boolean) => void
-  children?: React.ReactNode
-  style?: React.CSSProperties
-} & ComponentVariants<typeof TooltipPresets> & ComponentCommonProps
-
-const defaultProps: Partial<TooltipProps> = {
-  openOnPress: true,
-  openOnHover: true,
-  disabled: false,
-  delayDuration: 0,
-  closeOnClickOutside: false,
-  side: 'bottom',
-  triggerWrapper: View as unknown as React.ElementType,
-}
+export * from './styles'
+export * from './types'
 
-export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipProps) => {
+export const Tooltip = (props: TooltipProps) => {
   const allProps = {
     ...Tooltip.defaultProps,
     ...props,
   }
 
   const {
-    toggle: _toggle = null,
-    visible: _visible = null,
+    toggle: _toggle,
+    visible: _visible,
     children,
     content: Content,
-    triggerWrapperProps = {},
+    triggerWrapperProps,
     triggerWrapper: TriggerWrapper,
     side,
     disabled,
@@ -83,32 +41,23 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
     onValueChange,
     onHover,
     onPress,
-    contentProps = {},
-    portalProps = {},
-    arrowProps = {},
-    triggerProps = {},
-    providerProps = {},
-    variants = [],
-    responsiveVariants = {},
-    styles = {},
+    contentProps,
+    portalProps,
+    arrowProps,
+    triggerProps,
+    providerProps,
     closeOnClickOutside,
     style,
     ...rest
   } = allProps
 
-  const variantsStyles = useDefaultComponentStyle<'u:Tooltip', typeof TooltipPresets>('u:Tooltip', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
-
-  const hasStateProps = !TypeGuards.isNil(_visible) && TypeGuards.isFunction(_toggle)
+  const styles = useStylesFor(Tooltip.styleRegistryName, style)
 
-  const [visible, toggle] = hasStateProps ? [_visible, _toggle] : useState(false)
+  const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false })
 
   const tooltipDirectionStyle = React.useMemo(() => {
-    return side ? variantsStyles[`content:${side}`] : variantsStyles.content
-  }, [side, variantsStyles])
+    return side ? styles[`content:${side}`] : styles.content
+  }, [side, styles])
 
   function handleToggle(_value: boolean, isToggle = true) {
     if (disabled) return
@@ -163,8 +112,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
         open={visible}
         onOpenChange={onOpenChange}
         {...rest}
-        // @ts-ignore expected error
-        css={[variantsStyles.wrapper, style]}
+        // @ts-ignore
       >
         <TooltipTrigger
           onClick={_onPress}
@@ -173,29 +121,35 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
           asChild
           ref={triggerRef}
           {...triggerProps}
-          style={variantsStyles.triggerWrapper}
+          //@ts-expect-error
+          css={styles.triggerWrapper}
         >
-          <TriggerWrapper 
-            {...allProps as any} 
+          <TriggerWrapper
+            {...allProps as any}
             {...triggerWrapperProps}
-            style={variantsStyles.triggerInnerWrapper}
+            css={styles.triggerInnerWrapper}
           >
             {children}
           </TriggerWrapper>
         </TooltipTrigger>
         <TooltipPortal {...portalProps}>
-          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.content]} sideOffset={2} side={side} {...contentProps}>
+          {/* @ts-expect-error icss type */}
+          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, styles.content]} sideOffset={2} side={side} {...contentProps}>
             {
               TypeGuards.isFunction(Content)
                 ? <Content
                   {...allProps}
                   visible={visible}
                   toggle={toggle}
-                  variantsStyles={variantsStyles}
+                  variantsStyles={styles}
                 />
                 : Content
             }
-            <TooltipArrow {...arrowProps} style={variantsStyles.arrow} />
+            <TooltipArrow
+              {...arrowProps}
+              //@ts-expect-error icss type
+              css={styles.arrow}
+            />
           </TooltipContent>
         </TooltipPortal>
       </TooltipWrapper>
@@ -204,6 +158,29 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
   )
 }
 
-Tooltip.defaultProps = defaultProps
+Tooltip.styleRegistryName = 'Tooltip'
 
-export * from './styles'
+Tooltip.elements = [
+  'content',
+  'arrow',
+  'triggerWrapper',
+  'triggerInnerWrapper',
+]
+
+Tooltip.rootElement = 'content'
+
+Tooltip.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Tooltip as (props: StyledComponentProps<TooltipProps, typeof styles>) => IJSX
+}
+
+Tooltip.defaultProps = {
+  openOnPress: true,
+  openOnHover: true,
+  disabled: false,
+  delayDuration: 0,
+  closeOnClickOutside: false,
+  side: 'bottom',
+  triggerWrapper: View as unknown as React.ElementType,
+} as Partial<TooltipProps>
+
+WebStyleRegistry.registerComponent(Tooltip)

package/src/components/Tooltip/styles.ts

@@ -1,18 +1,11 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
 export type TooltipSide = 'left' | 'right' | 'bottom' | 'top'
+
 export type TooltipState = 'delayed-open' | 'closed' | 'instant-open' | 'disabled'
-export type TooltipParts = 
-  'wrapper' | 
+
+export type TooltipParts =
   'arrow' |
   'content' |
   'triggerWrapper' |
   'triggerInnerWrapper'
 
 export type TooltipComposition = `content:${TooltipSide}` | TooltipParts
-
-const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
-
-export const TooltipPresets = includePresets((styles) => createTooltipStyle(() => ({
-  wrapper: styles,
-})))

package/src/components/Tooltip/types.ts

@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  TooltipProps as PrimitiveTooltipProps,
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipArrowProps,
+  TooltipTriggerProps,
+  TooltipProviderProps,
+} from '@radix-ui/react-tooltip'
+import { AnyFunction, StylesOf } from '@codeleap/common'
+import { TooltipComposition } from './styles'
+import { ViewProps } from '../View'
+import { StyledProp } from '@codeleap/styles'
+
+type TooltipComponentProps = {
+  contentProps?: TooltipContentProps
+  portalProps?: TooltipPortalProps
+  arrowProps?: TooltipArrowProps
+  triggerProps?: TooltipTriggerProps
+  providerProps?: TooltipProviderProps
+}
+
+export type TooltipProps =
+  Omit<PrimitiveTooltipProps, 'style'> &
+  Omit<TooltipComponentProps, 'style'> &
+  {
+    toggle?: AnyFunction
+    visible?: boolean
+    content: React.ReactNode | ((props: TooltipProps & { variantsStyles: StylesOf<TooltipComposition> }) => JSX.Element)
+    triggerWrapper?: React.ElementType
+    triggerWrapperProps?: Partial<ViewProps>
+    style?: StyledProp<TooltipComposition>
+    side?: 'left' | 'right' | 'bottom' | 'top'
+    openOnPress?: boolean
+    openOnHover?: boolean
+    disabled?: boolean
+    delayDuration?: number
+    closeOnClickOutside?: boolean
+    onOpen?: AnyFunction
+    onClose?: AnyFunction
+    onValueChange?: (value: boolean) => void
+    onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void
+    onPress?: (value: boolean) => void
+    children?: React.ReactNode
+    debugName?: string
+  }

package/src/components/Touchable/index.tsx

@@ -1,77 +1,45 @@
-import { AnyFunction, ComponentVariants, onMount, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
-import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react'
+import { onMount, TypeGuards, useGlobalContext } from '@codeleap/common'
+import React, { ComponentType, ElementType, forwardRef, HTMLAttributes } from 'react'
 import { stopPropagation } from '../../lib'
-import { View } from '../View'
-import { TouchableComposition, TouchablePresets } from './styles'
-import { CSSInterpolation } from '@emotion/css'
-import { StylesOf, NativeHTMLElement } from '../../types'
 import { getTestId } from '../../lib/utils/test'
+import { TouchableProps } 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'
 
-export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {
-  css?: CSSInterpolation | CSSInterpolation[]
-  component?: T
-  disabled?: boolean
-  propagate?: boolean
-  style?: React.CSSProperties
-  onPress?: AnyFunction
-  debugName: string
-  debugComponent?: string
-  styles?: StylesOf<TouchableComposition>
-  debounce?: number
-  leadingDebounce?: boolean
-  setPressed?: (pressed: boolean) => void
-  analyticsEnabled?: boolean
-  analyticsName?: string
-  analyticsData?: Record<string, any>
-} & ComponentVariants<typeof TouchablePresets>
-
-const defaultProps: Partial<TouchableProps<'button'>> = {
-  propagate: true,
-  debounce: null,
-  component: View as unknown as 'button',
-  style: {},
-  styles: {},
-  responsiveVariants: {},
-  variants: [],
-  css: [],
-  analyticsEnabled: false,
-  analyticsName: null,
-  analyticsData: {},
-  tabIndex: 0,
-}
-export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
-  touchableProps: TouchableProps<T>,
-  ref,
-) => {
-  const mergedProps = {
-    ...(defaultProps),
-    ...(touchableProps),
+export const Touchable = forwardRef<HTMLButtonElement, TouchableProps>((touchableProps: TouchableProps, ref) => {
+  const allProps = {
+    ...Touchable.defaultProps,
+    ...touchableProps,
   }
+
   const {
     propagate,
     debounce,
     leadingDebounce,
     setPressed,
-    component: Component,
+    component,
     disabled,
     onPress,
     onClick,
     debugName,
     debugComponent,
     style,
-    styles,
-    responsiveVariants,
-    variants,
-    css,
     analyticsEnabled,
     analyticsName,
     analyticsData,
     ...props
-  } = mergedProps
+  } = allProps
+
+  const styles = useStylesFor(Touchable.styleRegistryName, style)
 
   const pressed = React.useRef(!!leadingDebounce)
 
+  const { logger } = useGlobalContext()
+
   onMount(() => {
     if (!!leadingDebounce && !!debounce) {
       setTimeout(() => {
@@ -80,14 +48,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     }
   })
 
-  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
-    responsiveVariants,
-    variants,
-    styles,
-    rootElement: 'wrapper',
-  })
-
-  const { logger } = useCodeleapContext()
+  const Component = component as unknown as ComponentType<HTMLAttributes<HTMLButtonElement>>
 
   const notPressable = !TypeGuards.isFunction(onPress) && !TypeGuards.isFunction(onClick)
 
@@ -96,14 +57,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
 
     if (!propagate) stopPropagation(event)
 
-    if (notPressable) {
-      logger.warn(
-        'No onPress passed to touchable',
-        touchableProps,
-        'User interaction',
-      )
-      return
-    }
+    if (notPressable) return
 
     const _onPress = () => {
       if (event && (event?.type !== 'click' && event?.keyCode !== 13 && event?.key !== 'Enter')) return null
@@ -140,34 +94,37 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     }
   }
 
-  const _styles = React.useMemo(() => ([
-    variantStyles.wrapper,
-    disabled && variantStyles['wrapper:disabled'],
-    css,
-    style,
-  ]), [variantStyles, disabled, style])
-
-  const testId = getTestId(mergedProps)
+  const testId = getTestId(allProps)
 
   return (
-    // @ts-ignore
-    <View
-      component={Component || 'button'}
+    <Component
       {...props}
-      debugName={debugName}
       onClick={handleClick}
       onKeyDown={handleClick}
       ref={ref}
-      css={_styles}
+      // @ts-expect-error icss type
+      css={[styles.wrapper, disabled && styles['wrapper:disabled']]}
       data-testid={testId}
     />
   )
-}
+}) as StyledComponentWithProps<TouchableProps>
+
+Touchable.styleRegistryName = 'Touchable'
+Touchable.elements = ['wrapper']
+Touchable.rootElement = 'wrapper'
 
-export const Touchable = forwardRef(TouchableCP) as (<T extends NativeHTMLElement = 'button'>(
-  touchableProps: TouchableProps<T>
-) => JSX.Element) & {
-  defaultProps: Partial<TouchableProps<'button'>>
+Touchable.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Touchable as <T extends ElementType = 'button'>(props: StyledComponentProps<TouchableProps<T>, typeof styles>) => IJSX
 }
 
-Touchable.defaultProps = defaultProps
+Touchable.defaultProps = {
+  propagate: true,
+  debounce: null,
+  component: 'div',
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+  tabIndex: 0,
+} as Partial<TouchableProps>
+
+WebStyleRegistry.registerComponent(Touchable)

package/src/components/Touchable/styles.ts

@@ -1,9 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
 export type TouchableState = 'disabled'
 export type TouchableParts = 'wrapper'
 export type TouchableComposition = TouchableParts | `${TouchableParts}:${TouchableState}`
-
-const createTouchableStyle = createDefaultVariantFactory<TouchableComposition>()
-
-export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles })))

package/src/components/Touchable/types.ts

@@ -0,0 +1,22 @@
+import { AnyFunction } from '@codeleap/common'
+import { ComponentPropsWithRef, ElementType } from 'react'
+import { TouchableComposition } from './styles'
+import { AnyRecord, StyledProp } from '@codeleap/styles'
+
+export type TouchableProps<T extends ElementType = 'button'> =
+  Omit<ComponentPropsWithRef<T>, 'style'> &
+  {
+    component?: ElementType<AnyRecord>
+    disabled?: boolean
+    propagate?: boolean
+    onPress?: AnyFunction
+    debugName: string
+    debugComponent?: string
+    style?: StyledProp<TouchableComposition>
+    debounce?: number
+    leadingDebounce?: boolean
+    setPressed?: (pressed: boolean) => void
+    analyticsEnabled?: boolean
+    analyticsName?: string
+    analyticsData?: Record<string, any>
+  }

package/src/components/View/index.tsx

@@ -1,25 +1,19 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
-import { useDefaultComponentStyle, useCodeleapContext, useMemo, TypeGuards } from '@codeleap/common'
-import React, { forwardRef, Ref } from 'react'
-import { ViewPresets } from './styles'
+import { useMemo, TypeGuards } from '@codeleap/common'
+import React, { ElementType, forwardRef } from 'react'
 import { useMediaQuery } from '../../lib/hooks'
-import { NativeHTMLElement } from '../../types'
 import { motion } from 'framer-motion'
 import { ViewProps } from './types'
 import { getTestId } from '../../lib/utils/test'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps, useTheme } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-export const ViewCP = (
-  viewProps: ViewProps<'div'>,
-  ref: React.Ref<any>,
-) => {
+export const View = forwardRef<HTMLDivElement, ViewProps>((viewProps, ref) => {
   const {
-    responsiveVariants = {},
-    variants = [],
-    component = 'div',
+    component,
     children,
     is,
     not,
@@ -27,32 +21,28 @@ export const ViewCP = (
     onHover,
     debugName,
     down,
-    scroll = false,
-    debug = false,
     style,
-    animated = false,
-    animatedProps = {},
-    css = [],
+    animated,
+    animatedProps,
     ...props
-  } = viewProps
+  } = {
+    ...View.defaultProps,
+    ...viewProps,
+  }
 
-  const Component = animated ? (motion?.[component] || motion.div) : (component || 'div')
+  const styles = useStylesFor(View.styleRegistryName, style)
 
-  const variantStyles = useDefaultComponentStyle<'u:View', typeof ViewPresets>('u:View', {
-    responsiveVariants,
-    variants,
-    styles: { wrapper: style },
-    rootElement: 'wrapper',
-  })
+  const Component: ElementType = animated ? (motion?.[component as string] || motion.div) : (component || 'div')
 
-  const { Theme, logger } = useCodeleapContext()
+  const theme = useTheme(store => store.current)
 
   function handleHover(isMouseOverElement: boolean) {
     onHover?.(isMouseOverElement)
   }
 
   const platformMediaQuery = useMemo(() => {
-    return Theme.media.renderToPlatformQuery({
+    // @ts-expect-error theme type
+    return theme?.media?.renderToPlatformQuery({
       is,
       not,
       up,
@@ -62,42 +52,38 @@ export const ViewCP = (
 
   const matches = useMediaQuery(platformMediaQuery)
 
-  const componentStyles = useMemo(() => {
-    return [
-      variantStyles.wrapper,
-      scroll && { overflowY: 'scroll' },
-      matches && { display: 'none' },
-      style,
-      css,
-    ]
-  }, [variantStyles, scroll, matches, css])
-
-  const onHoverProps = TypeGuards.isFunction(onHover) && {
+  const hoverProps = TypeGuards.isFunction(onHover) && {
     onMouseEnter: () => handleHover(true),
     onMouseLeave: () => handleHover(false),
   }
 
-  if (debug) {
-    logger.log(debugName, { componentStyles, platformMediaQuery, matches })
-  }
-
   const testId = getTestId(viewProps)
 
   return (
     <Component
-      css={componentStyles}
-      // @ts-expect-error
-      ref={ref}
-      {...onHoverProps}
+      {...hoverProps}
       {...props}
       {...animatedProps}
+      ref={ref}
       data-testid={testId}
+      css={[styles.wrapper, matches && { display: 'none' }]}
     >
       {children}
     </Component>
   )
+}) as StyledComponentWithProps<ViewProps>
+
+View.styleRegistryName = 'View'
+View.elements = ['wrapper']
+View.rootElement = 'wrapper'
+
+View.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return View as <T extends ElementType = 'div'>(props: StyledComponentProps<ViewProps<T>, typeof styles>) => IJSX
 }
 
-export const View = forwardRef(ViewCP) as unknown as <T extends NativeHTMLElement = 'div'>(
-  props: ViewProps<T>
-) => JSX.Element
+View.defaultProps = {
+  component: 'div',
+  animated: false,
+} as Partial<ViewProps>
+
+WebStyleRegistry.registerComponent(View)

package/src/components/View/styles.ts

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